Python私教张大鹏 Vue3整合AntDesignVue之AutoComplete 自动完成

news2024/9/9 5:36:49

何时使用

  • 需要一个输入框而不是选择器。
  • 需要输入建议/辅助提示。

和 Select 的区别

  • AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助输入。
  • Select 是在限定的可选项中进行选择，关键词是选择。

基本使用

基本使用。通过 options 设置自动完成的数据源。

核心代码：

<template>
  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    placeholder="input here"
    @select="onSelect"
    @search="onSearch"
  />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';

interface MockVal {
  value: string;
}
const mockVal = (str: string, repeat = 1): MockVal => {
  return {
    value: str.repeat(repeat),
  };
};
const value = ref('');
const options = ref<MockVal[]>([]);
const onSearch = (searchText: string) => {
  console.log('searchText');
  options.value = !searchText
    ? []
    : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = (value: string) => {
  console.log('onSelect', value);
};
watch(value, () => {
  console.log('value', value.value);
});
</script>

第一步：定义组件

  • 动态绑定的值：v-model:value="value"
  • 选项列表：:options="options"
  • 选中时触发的事件：@select="onSelect"
  • 搜索时触发的事件：@search="onSearch"
  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    placeholder="input here"
    @select="onSelect"
    @search="onSearch"
  />

第二步：定义搜索列表

const options = ref<MockVal[]>([]);

第三步：实现搜索方法

const mockVal = (str: string, repeat = 1): MockVal => {
  return {
    value: str.repeat(repeat),
  };
};

const onSearch = (searchText: string) => {
  console.log('searchText');
  options.value = !searchText
    ? []
    : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};

vue3示例：

<script setup>
import {ref} from "vue";

const value = ref('')
const options = ref([])

const onSearch = (value) => {
  console.log("要搜索的值：", value)
  // 准备数据
  options.value = [
    {value: "a"},
    {value: "aaa"},
    {value: "aaaaaaa"},
  ]
}

</script>
<template>
  <div class="p-8 bg-indigo-50 flex justify-center items-center">
    <a-auto-complete
        v-model:value="value"
        :options="options"
        @search="onSearch"
        class="w-32"
    />
  </div>
</template>

在这里插入图片描述

案例：选中事件

如何实现：@select="onSelect"

vue3示例：

<script setup>
import {ref} from "vue";

const value = ref('')
const options = ref([])

const onSearch = (value) => {
  console.log("要搜索的值：", value)
  // 准备数据
  options.value = [
    {value: "a"},
    {value: "aaa"},
    {value: "aaaaaaa"},
  ]
}

const onSelect = (value) => {
  console.log("选中的值是：", value)
  alert(value)
}

</script>
<template>
  <div class="p-8 bg-indigo-50 flex justify-center items-center">
    <a-auto-complete
        v-model:value="value"
        :options="options"
        @search="onSearch"
        @select="onSelect"
        class="w-32"
    />
  </div>
</template>

在这里插入图片描述

案例：自定义选项

核心代码：

<template>
  <a-auto-complete
    v-model:value="value"
    style="width: 200px"
    placeholder="input here"
    :options="options"
    @search="handleSearch"
  >
    <template #option="{ value: val }">
      {{ val.split('@')[0] }} @
      <span style="font-weight: bold">{{ val.split('@')[1] }}</span>
    </template>
  </a-auto-complete>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const options = ref([]);
const handleSearch = val => {
  let res;
  if (!val || val.indexOf('@') >= 0) {
    res = [];
  } else {
    res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
      value: `${val}@${domain}`,
    }));
  }
  options.value = res;
};
</script>

如何实现自定义选项？

<template #option="{ value: val }">
{{ val.split('@')[0] }} @
<span style="font-weight: bold">{{ val.split('@')[1] }}</span>
</template>

vue3示例：

<template>
  <div class="p-8 text-center bg-indigo-50">
    <a-auto-complete
        v-model:value="value"
        class="w-48"
        placeholder="请在这里输入内容"
        :options="options"
        @search="handleSearch"
    >
      <!--重写插槽-->
      <template #option="{ value: val }">
        {{ val.split('@')[0] }} @
        <span class="font-bold text-red-300">{{ val.split('@')[1] }}</span>
      </template>
    </a-auto-complete>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const options = ref([]);
const handleSearch = val => {
  let res;
  if (!val || val.indexOf('@') >= 0) {
    res = [];
  } else {
    res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
      value: `${val}@${domain}`,
    }));
  }
  options.value = res;
};
</script>

在这里插入图片描述

案例：自定义输入组件

核心代码：

<template>
  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
    />
  </a-auto-complete>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const options = ref([]);
const onSelect = value => {
  console.log('onSelect', value);
};
const handleSearch = value => {
  options.value = !value
    ? []
    : [
        {
          value,
        },
        {
          value: value + value,
        },
        {
          value: value + value + value,
        },
      ];
};
const handleKeyPress = ev => {
  console.log('handleKeyPress', ev);
};
</script>

如何实现：重写默认插槽

  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
    />
  </a-auto-complete>

在这里插入图片描述

案例：不区分大小写

核心代码：

<template>
  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    placeholder="input here"
    :filter-option="filterOption"
  />
</template>
<script setup>
import { ref } from 'vue';
const filterOption = (input, option) => {
  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
};
const value = ref('');
const options = ref([
  {
    value: 'Burns Bay Road',
  },
  {
    value: 'Downing Street',
  },
  {
    value: 'Wall Street',
  },
]);
</script>

如何实现：

  • 自定义过滤选项：:filter-option="filterOption"
  • 编写自定义选项方法
const filterOption = (input, option) => {
  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
};

在这里插入图片描述

案例：确定类目查询

核心代码：

<template>
  <div class="certain-category-search-wrapper" style="width: 250px">
    <a-auto-complete
      v-model:value="value"
      class="certain-category-search"
      popup-class-name="certain-category-search-dropdown"
      :dropdown-match-select-width="500"
      style="width: 250px"
      :options="dataSource"
    >
      <template #option="item">
        <template v-if="item.options">
          <span>
            {{ item.value }}
            <a
              style="float: right"
              href="https://www.google.com/search?q=antd"
              target="_blank"
              rel="noopener noreferrer"
            >
              more
            </a>
          </span>
        </template>
        <template v-else-if="item.value === 'all'">
          <a
            href="https://www.google.com/search?q=ant-design-vue"
            target="_blank"
            rel="noopener noreferrer"
          >
            View all results
          </a>
        </template>
        <template v-else>
          <div style="display: flex; justify-content: space-between">
            {{ item.value }}
            <span>
              <UserOutlined />
              {{ item.count }}
            </span>
          </div>
        </template>
      </template>
      <a-input-search placeholder="input here" size="large"></a-input-search>
    </a-auto-complete>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const dataSource = [
  {
    value: 'Libraries',
    options: [
      {
        value: 'AntDesignVue',
        count: 10000,
      },
      {
        value: 'AntDesignVue UI',
        count: 10600,
      },
    ],
  },
  {
    value: 'Solutions',
    options: [
      {
        value: 'AntDesignVue UI FAQ',
        count: 60100,
      },
      {
        value: 'AntDesignVue FAQ',
        count: 30010,
      },
    ],
  },
  {
    value: 'Articles',
    options: [
      {
        value: 'AntDesignVue design language',
        count: 100000,
      },
    ],
  },
  {
    value: 'all',
  },
];
const value = ref('');
</script>
<style scoped>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
  color: #666;
  font-weight: bold;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
  border-bottom: 1px solid #f6f6f6;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item {
  padding-left: 16px;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
  text-align: center;
  cursor: default;
}

.certain-category-search-dropdown .ant-select-dropdown-menu {
  max-height: 300px;
}
</style>

vue3示例：

<template>
  <div class="certain-category-search-wrapper" style="width: 250px">
    <a-auto-complete
        v-model:value="value"
        class="certain-category-search"
        popup-class-name="certain-category-search-dropdown"
        :dropdown-match-select-width="500"
        style="width: 250px"
        :options="dataSource"
    >
      <template #option="item">
        <!--有分类的情况-->
        <template v-if="item.options">
          <span>
            {{ item.value }}
            <a
                style="float: right"
                href="https://www.google.com/search?q=antd"
                target="_blank"
                rel="noopener noreferrer"
            >
              查看更多
            </a>
          </span>
        </template>
        <!--所有-->
        <template v-else-if="item.value === 'all'">
          <a
              href="https://www.google.com/search?q=ant-design-vue"
              target="_blank"
              rel="noopener noreferrer"
          >
            查看所有结果
          </a>
        </template>
        <!--其他情况-->
        <template v-else>
          <div style="display: flex; justify-content: space-between">
            {{ item.value }}
            <span>
              <UserOutlined />
              {{ item.count }}
            </span>
          </div>
        </template>
      </template>
      <!--搜索框-->
      <a-input-search placeholder="input here" size="large"></a-input-search>
    </a-auto-complete>
  </div>
</template>
<script setup>
import {ref} from 'vue';

const dataSource = [
  {
    value: '分类1', // 分类
    options: [
      {
        value: 'AntDesignVue', // 左边的值
        count: 10000, // 右边的值
      },
      {
        value: 'AntDesignVue UI',
        count: 10600,
      },
    ],
  },
  {
    value: '分类2',
    options: [
      {
        value: 'AntDesignVue UI FAQ',
        count: 60100,
      },
      {
        value: 'AntDesignVue FAQ',
        count: 30010,
      },
    ],
  },
  {
    value: '分类3',
    options: [
      {
        value: 'AntDesignVue design language',
        count: 100000,
      },
    ],
  },
  {
    value: '嘿嘿嘿',
  },
  {
    value: 'all',
  },
];
const value = ref('');
</script>
<style scoped>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
  color: #666;
  font-weight: bold;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
  border-bottom: 1px solid #f6f6f6;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item {
  padding-left: 16px;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
  text-align: center;
  cursor: default;
}

.certain-category-search-dropdown .ant-select-dropdown-menu {
  max-height: 300px;
}
</style>

在这里插入图片描述

案例：不确定类目查询

核心代码：

<template>
  <div class="global-search-wrapper" style="width: 300px">
    <a-auto-complete
      v-model:value="value"
      :dropdown-match-select-width="252"
      style="width: 300px"
      :options="dataSource"
      @select="onSelect"
      @search="handleSearch"
    >
      <template #option="item">
        <div style="display: flex; justify-content: space-between">
          <span>
            Found {{ item.query }} on
            <a
              :href="`https://s.taobao.com/search?q=${item.query}`"
              target="_blank"
              rel="noopener noreferrer"
            >
              {{ item.category }}
            </a>
          </span>
          <span>{{ item.count }} results</span>
        </div>
      </template>
      <a-input-search size="large" placeholder="input here" enter-button></a-input-search>
    </a-auto-complete>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
interface Option {
  query: string;
  category: string;
  value: string;
  count: number;
}
const value = ref('');
const dataSource = ref<Option[]>([]);
const onSelect = (value: string) => {
  console.log('onSelect', value);
};

const getRandomInt = (max: number, min = 0) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const searchResult = (query: string): Option[] => {
  return new Array(getRandomInt(5))
    .join('.')
    .split('.')
    .map((_item, idx) => ({
      query,
      category: `${query}${idx}`,
      value: `${query}${idx}`,
      count: getRandomInt(200, 100),
    }));
};
const handleSearch = (val: string) => {
  dataSource.value = val ? searchResult(val) : [];
};
</script>

vue3示例：

<template>
  <div class="global-search-wrapper" style="width: 300px">
    <a-auto-complete
        v-model:value="value"
        :dropdown-match-select-width="252"
        style="width: 300px"
        :options="dataSource"
        @select="onSelect"
        @search="handleSearch"
    >
      <template #option="item">
        <div style="display: flex; justify-content: space-between">
          <span>
            从分类
            <a
                :href="`https://s.taobao.com/search?q=${item.query}`"
                target="_blank"
                rel="noopener noreferrer"
            >
              {{ item.category }}
            </a>
            查找到 {{ item.query }}
          </span>
          <span>{{ item.count }} 条结果</span>
        </div>
      </template>
      <a-input-search size="large" placeholder="input here" enter-button></a-input-search>
    </a-auto-complete>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const dataSource = ref([]);
const onSelect = value => {
  console.log('onSelect', value);
};
const getRandomInt = (max, min = 0) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
const searchResult = query => {
  return new Array(getRandomInt(5))
      .join('.')
      .split('.')
      .map((_item, idx) => ({
        query,
        category: `${query}${idx}`,
        value: `${query}${idx}`,
        count: getRandomInt(200, 100),
      }));
};
const handleSearch = val => {
  dataSource.value = val ? searchResult(val) : [];
};
</script>

在这里插入图片描述

案例：自定义状态

使用 status 为 AutoComplete 添加状态，可选 error 或者 warning。

核心代码：

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-auto-complete
      v-model:value="value"
      :options="options"
      style="width: 200px"
      placeholder="input here"
      status="error"
      @select="onSelect"
      @search="onSearch"
    />
    <a-auto-complete
      v-model:value="value1"
      :options="options"
      style="width: 200px"
      placeholder="input here"
      status="warning"
      allow-clear
      @select="onSelect"
      @search="onSearch"
      @clear="onClear"
    />
  </a-space>
</template>
<script setup>
import { ref, watch } from 'vue';
const mockVal = (str, repeat = 1) => {
  return {
    value: str.repeat(repeat),
  };
};
const value = ref('');
const value1 = ref('');
const options = ref([]);
const onSearch = searchText => {
  console.log('searchText');
  options.value = !searchText
    ? []
    : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = value => {
  console.log('onSelect', value);
};
const onClear = () => {
  console.log('onClear');
};
watch(value, () => {
  console.log('value', value.value);
});
</script>

在这里插入图片描述

案例：自定义清除按钮

核心代码：

<template>
  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    placeholder="Clearable"
    :allow-clear="true"
    @select="onSelect"
    @search="onSearch"
  />
  <br />
  <br />
  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    placeholder="Customized clear icon"
    :allow-clear="true"
    @select="onSelect"
    @search="onSearch"
  >
    <template #clearIcon>
      <close-outlined />
    </template>
  </a-auto-complete>
</template>
<script setup>
import { ref } from 'vue';
const mockVal = (str, repeat = 1) => {
  return {
    value: str.repeat(repeat),
  };
};
const value = ref('');
const options = ref([]);
const onSearch = searchText => {
  console.log('searchText');
  options.value = !searchText
    ? []
    : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
};
const onSelect = value => {
  console.log('onSelect', value);
};
</script>

如何实现：重写clearIcon插槽

<template #clearIcon>
  <close-outlined />
</template>

在这里插入图片描述

属性

参数说明类型默认值版本
allowClear支持清除, 单选模式有效booleanfalse
autofocus自动获取焦点booleanfalse
backfill使用键盘选择选项的时候把选中项回填到输入框中booleanfalse
bordered是否有边框booleantrue4.0
clearIcon使用插槽自定义清除按钮slot<CloseCircleFilled />4.0
default (自定义输入框)自定义输入框slot<Input />
defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
defaultOpen是否默认展开下拉菜单boolean-
disabled是否禁用booleanfalse
popupClassName下拉菜单的 className 属性string-4.0
dropdownMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动boolean | numbertrue
dropdownMenuStyledropdown 菜单自定义样式object1.5.0
filterOption是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。boolean or function(inputValue, option)true
open是否展开下拉菜单boolean-
option通过 option 插槽，自定义节点v-slot:option=“{value, label, [disabled, key, title]}”-3.0
options自动完成的数据源DataSourceItemType[]
placeholder输入框提示string | slot-
status设置校验状态‘error’ | ‘warning’-3.3.0
v-model:value指定当前选中的条目string|string[]|{ key: string, label: string|vNodes }|Array<{ key: string, label: string|vNodes }>无

事件

事件名称说明回调参数版本
blur失去焦点时的回调function()
change选中 option，或 input 的 value 变化时，调用此函数function(value)
dropdownVisibleChange展开下拉菜单的回调function(open)
focus获得焦点时的回调function()
search搜索补全项的时候调用function(value)
select被选中时调用，参数为选中项的 value 值function(value, option)
clear清除内容时回调function-

方法

名称描述版本
blur()移除焦点
focus()获取焦点

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1815058.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

创新突破！科海思荣获高效含铊废水处理专利

创新突破！科海思荣获高效含铊废水处理专利

随着科技进步和工业发展&#xff0c;环境保护和资源循环利用日益受到全球关注。面对严峻的环境挑战&#xff0c;科技创新成为推动可持续发展的关键动力。近日&#xff0c;科海思&#xff08;北京&#xff09;科技有限公司凭借其深厚的技术积累和持续的创新精神&#xff0c;成功…
阅读更多...
RT-Thread系统使用STM32H7芯片串口5不工作

RT-Thread系统使用STM32H7芯片串口5不工作

使用stm32h743芯片串口5不工作&#xff0c;其他串口都正常&#xff0c;TX5->PC12,RX5->PD2 drv_usart.c里面串口5的TX和RX反了&#xff0c;将TX和RX对调后解决。
阅读更多...
SAP 生产订单工序创建BAPI外协加工字段增强CO_SE_PRODORD_OPR_CREATE

SAP 生产订单工序创建BAPI外协加工字段增强CO_SE_PRODORD_OPR_CREATE

需求&#xff1a; 使用BAPI对工单进行新增工序时&#xff0c;需要同时维护外协加工页签上的部分字段&#xff0c;但是该BAPI不包含其中的一些字段&#xff0c;故对此BAPI进行增强以实现该效果。 实现方式&#xff1a; 1.老规矩&#xff0c;COPY标准BAPI出来&#xff0c;再对其…
阅读更多...
微信小游戏开发流程及上架步骤：微信小游戏定制开发源码搭建

微信小游戏开发流程及上架步骤：微信小游戏定制开发源码搭建

微信小游戏开发方案主要包括以下几个方面&#xff1a; 1.游戏设计&#xff1a;根据需求和目标用户群体&#xff0c;设计游戏玩法、关卡、角色、场景等元素&#xff0c;确保游戏具有吸引力和可玩性。 2.技术实现&#xff1a;根据游戏设计&#xff0c;选择合适的技术栈和开发工具…
阅读更多...
平时的财经日历会影响黄金现货走势吗？

平时的财经日历会影响黄金现货走势吗？

现货黄金的价格走势会受到诸多因素的影响&#xff0c;比如在财经日历上&#xff0c;美国的非农就业报告、GDP、利率公告、通胀数据等新闻和经济公告&#xff0c;都可能会对市场产生重大影响&#xff0c;尤其是当这些数据与市场预期不符的时候。所以比起单纯地进行技术分析和图表…
阅读更多...
揭秘：消费1000，竟能领回2000？每天还有额外收入？

揭秘：消费1000，竟能领回2000？每天还有额外收入？

大家好&#xff0c;我是吴军&#xff0c;今天将为大家揭秘一种令人眼前一亮的商业模式——循环购模式。你可能会问&#xff0c;消费1000元&#xff0c;商家却送出了2000元的“好处”&#xff1f;每天还有钱领&#xff0c;这些钱还能提现&#xff1f;这究竟是怎么一回事&#xf…
阅读更多...
VMware Workstation安装及使用详细教程

VMware Workstation安装及使用详细教程

如何安装VMware Workstation的详细教程 一、准备工作 1. 下载VMware Workstation&#xff1a; 访问VMware官方网站&#xff0c;找到VMware Workstation的下载页面。根据您的操作系统&#xff08;Windows或macOS&#xff09;选择相应的版本进行下载。确保您的计算机满足VMwar…
阅读更多...
Java课程设计：基于ssm的旅游管理系统系统（内附源码）

Java课程设计：基于ssm的旅游管理系统系统（内附源码）

文章目录 一、项目介绍二、项目展示三、源码展示四、源码获取 一、项目介绍 2023年处于信息科技高速发展的大背景之下。在今天&#xff0c;缺少手机和电脑几乎已经成为不可能的事情&#xff0c;人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大旅行社非常必要…
阅读更多...
Windows远程桌面连接

Windows远程桌面连接

试验&#xff1a;使用Oracle VM VirtualBox创建虚拟机与物理机进行远程桌面连接实验 1. 准备 使用VirtualBox创建一台win10虚拟机&#xff0c;并与本地物理机相互ping通。&#xff08;注意&#xff1a;如何存在ping不通&#xff0c;可以试一下关闭Windows的防火墙&#xff09;…
阅读更多...
x-anylabelimg如何标识人脸

x-anylabelimg如何标识人脸

软件地址&#xff0c;下载CPU版本就好 https://github.com/CVHub520/X-AnyLabeling/releases/tag/v2.0.0 一、打开软件选择的一个按钮&#xff0c;选择文件夹 二、选择模型运行 未下载的模型需要安全上网下载 选用Yolov6Lite_l-Face MeiTuan生成的文件格式&#xff0c;略作调…
阅读更多...
AI大模型智慧政务解决方案

AI大模型智慧政务解决方案

随着AI大模型技术的蓬勃发展和普及应用&#xff0c;我们的政务治理正迎来一场波澜壮阔的革新巨浪。这场革新&#xff0c;不仅是技术层面的飞跃&#xff0c;更是一场深刻改变治理理念的伟大变革。它彻底颠覆了传统政务治理中依赖人力、效率低下、响应迟缓的“人盯人”模式&#…
阅读更多...
SAP CS01/CS02/CS03 BOM创建维护删除BAPI使用及增强改造

SAP CS01/CS02/CS03 BOM创建维护删除BAPI使用及增强改造

BOM创建维护删除相关BAPI的使用代码参考示例&#xff0c;客户电脑只能远程桌面&#xff0c;代码没法复制粘贴出来&#xff0c;只能贴图。 创建及修改BAPI: CSAP_MAT_BOM_MAINTAIN。 删除BAPI: CSAP_MAT_BOM_DELETE。 改造BAPI: CSAP_MAT_BOM_MAINTAIN 改造点1&#xff1a;拷…
阅读更多...
数据安全：Web3时代的隐私保护新标准

数据安全：Web3时代的隐私保护新标准

随着数字化时代的到来&#xff0c;我们的生活已经完全依赖于互联网和数据交换。然而&#xff0c;随之而来的是对个人隐私和数据安全的日益关注。在这个信息爆炸的时代&#xff0c;数据泄露、个人隐私侵犯和网络攻击等问题日益突出&#xff0c;而Web3技术的崛起正带来了一种全新…
阅读更多...
纷享销客海外合规观点与方案：个人隐私数据保护与数据出入境

纷享销客海外合规观点与方案：个人隐私数据保护与数据出入境

出海&#xff0c;已不再是企业的“备胎”&#xff0c;而是必须面对的“大考”&#xff01;在这个全球化的大潮中&#xff0c;有的企业乘风破浪&#xff0c;勇攀高峰&#xff0c;也有的企业在异国他乡遭遇了“水土不服”。 面对“要么出海&#xff0c;要么出局”的抉择&#xf…
阅读更多...
第三方检测机构出具的校准证书，企业如何进行验证和确认？

第三方检测机构出具的校准证书，企业如何进行验证和确认？

检测校准对企业来说是日常管理工作不可缺少的一环&#xff0c;大部分公司也都会有自己的品管部&#xff0c;对企业使用的设备和仪器进行维护管理&#xff0c;并周期性做计量校准。不过当我们仪器做完校准后&#xff0c;机构出具的校准证书我们如何来确认其可靠性&#xff1f;验…
阅读更多...
C# NX二次开发-获取圆弧中心点和半径

C# NX二次开发-获取圆弧中心点和半径

使用UF函数可以获取圆弧边或圆弧线中心点和半径: 1.使用 UF_CURVE_ask_arc_data: theUf.Curve.AskArcData(edge.Tag, out UFCurve.Arc arc);theUf.Curve.CreateArc(ref arc, out Tag arc_tag);double[] matrix_values new double[9];double[] vec_product new double[3];theU…
阅读更多...
优设AI导航

优设AI导航

1、优设AI导航 优设AI导航
阅读更多...
智能交通SCI期刊，中科院2区，专业性强，难度不大！

智能交通SCI期刊，中科院2区，专业性强，难度不大！

一、期刊名称 IEEE Intelligent Transportation Systems Magazine 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;智能交通 影响因子&#xff1a;3.6 中科院分区&#xff1a;2区 三、期刊征稿范围 IEEE智能交通系统杂志&#xff08;ITSM&#xff09;发表…
阅读更多...
大屏幕互动系统PHP源码 附动态背景图和配乐素材 含搭建教程

大屏幕互动系统PHP源码 附动态背景图和配乐素材 含搭建教程

最新大屏幕互动系统PHP源码 附动态背景图和配乐素材 含搭建教程 测试环境&#xff1a;apachePHP7.3MySQL5.7 源码免费下载地址抄笔记 (chaobiji.cn)
阅读更多...
PS系统教程18

PS系统教程18

渐变工具的使用 线性渐变径向渐变角度渐变对称渐变菱形渐变 正常模式 背后模式 径向渐变演示 新建图层选择径向渐变拉选渐变 角度渐变 对称渐变&#xff08;快捷键-按住shift拉选&#xff09; 菱形渐变 模式和画笔的模式理解一样 反向-反过来方向 白块原本在右边&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023