Search
搜索组件。
属性
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
labelField | string | 否 | 搜索结果的label | |
subLabelField | string | 否 | 搜索结果的子label | |
value | string | 否 | 搜索输入的关键字 |
方法
- 方法说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
search | Function | 否 | 搜索结果的回调 | |
select | Function | 否 | 选中属性节点的回调 |
使用方法
代码示例:
// 在script标签中按需引入 import { Pinyin } from '@jecloud/ui'; export default { components: { Pinyin }, setup() { const value = ref(''); const data = [ { id: 1, text: '节点1' }, { id: 2, text: '节点2' }, { id: 3, text: '节点3' }, { id: 4, text: '节点4' }, { id: 5, text: '节点5' }, ]; // 选中属性节点 const onSelect = (val, option) => { value.value = val; console.log(option); }; // 节点过滤函数 const filter = (item, keyword) => { const text = item.text?.toLocaleLowerCase() ?? ''; const pinyinText = pinyin(text, 'pinyin'); if (text.includes(keyword) || pinyinText.includes(keyword)) { return true; } return false; }; // 查询关键字 const onSearch = (keyword, resolve) => { const items = []; keyword = keyword.toLocaleLowerCase(); data.forEach((item) => { if (filter(item, keyword)) { items.push({ id: item.id, text: item.text, }); } }); resolve(items); }; return { value, onSearch, onSelect }; }, }; // 在vue的template标签中 <Search v-model:value="value" labelField="text" subLabelField="id" @search="onSearch" @select="onSelect" placeholder="输入“节点”进行搜索" style="width: 100%" />
事件脚本示例:
const { Search } = JE.useUi(); const { h, ref } = JE.useVue(); const { pinyin } = JE.useUtils(); const searchValue = ref(''); // 节点过滤函数 const filter = (item, keyword) => { const text = item.text?.toLocaleLowerCase() ?? ''; const pinyinText = pinyin(text, 'pinyin'); if (text.includes(keyword) || pinyinText.includes(keyword)) { return true; } return false; }; const data = [ { id: 1, text: '节点1' }, { id: 2, text: '节点2' }, { id: 3, text: '节点3' }, { id: 4, text: '节点4' }, { id: 5, text: '节点5' }, ]; return h(Search, { labelField: 'text', subLabelField: 'id', value: searchValue.value, onSearch: function (keyword, resolve) { const items = []; keyword = keyword.toLocaleLowerCase(); data.forEach((item) => { if (filter(item, keyword)) { items.push({ id: item.id, text: item.text, }); } }); resolve(items); }, });
最后编辑: 秦永莲 文档更新时间: 2024-07-26 14:15 作者:秦永莲