@ditari/bsui 1.1.13 → 1.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/select/Select.vue2.cjs +4 -18
- package/dist/cjs/select/Select.vue2.cjs.map +1 -1
- package/dist/esm/select/Select.vue2.mjs +4 -18
- package/dist/esm/select/Select.vue2.mjs.map +1 -1
- package/example/src/App.vue +12 -0
- package/package.json +1 -1
- package/src/select/Select.vue +29 -23
package/CHANGELOG.md
CHANGED
|
@@ -27,7 +27,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
27
27
|
() => props.value,
|
|
28
28
|
(val) => {
|
|
29
29
|
modelValue2.value = val;
|
|
30
|
-
initSearch(val);
|
|
31
30
|
}
|
|
32
31
|
);
|
|
33
32
|
const onSearch = (keywords) => {
|
|
@@ -42,22 +41,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
42
41
|
data2.value = [...dicData].splice(0, 10);
|
|
43
42
|
}
|
|
44
43
|
}
|
|
45
|
-
function initSearch(val) {
|
|
46
|
-
val = val || "";
|
|
47
|
-
const index = dicData.findIndex((item) => {
|
|
48
|
-
return item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 || item.label.toLowerCase().includes(val);
|
|
49
|
-
});
|
|
50
|
-
if (index === -1) {
|
|
51
|
-
data2.value = [...dicData].splice(0, 10);
|
|
52
|
-
} else {
|
|
53
|
-
data2.value = sliceArrayByIndex(dicData, index);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
function sliceArrayByIndex(arr, currentIndex) {
|
|
57
|
-
const start = Math.max(0, currentIndex - 5);
|
|
58
|
-
const end = Math.min(arr.length, currentIndex + 6);
|
|
59
|
-
return arr.slice(start, end);
|
|
60
|
-
}
|
|
61
44
|
const onSelect2 = (value) => {
|
|
62
45
|
emits("update:value", value);
|
|
63
46
|
onSelectHandler();
|
|
@@ -78,6 +61,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
78
61
|
data2.value = dicData.filter((item) => {
|
|
79
62
|
return val.some((i) => i === item.value);
|
|
80
63
|
});
|
|
64
|
+
} else {
|
|
65
|
+
data2.value = dicData;
|
|
81
66
|
}
|
|
82
67
|
},
|
|
83
68
|
{
|
|
@@ -93,13 +78,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
93
78
|
};
|
|
94
79
|
}
|
|
95
80
|
const onFilterOption = (inputValue, options) => {
|
|
96
|
-
return options.label.includes(inputValue);
|
|
81
|
+
return options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 || options.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
97
82
|
};
|
|
98
83
|
return (_ctx, _cache) => {
|
|
99
84
|
const _component_a_select = vue.resolveComponent("a-select");
|
|
100
85
|
return vue.openBlock(), vue.createBlock(_component_a_select, {
|
|
101
86
|
value: vue.unref(modelValue),
|
|
102
87
|
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null),
|
|
88
|
+
style: { "width": "100%" },
|
|
103
89
|
"allow-clear": "",
|
|
104
90
|
"show-search": "",
|
|
105
91
|
options: vue.unref(data),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue2.cjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\nconst { modelValue, data, onSelect, onChange } = useSelect();\n\nfunction useSelect() {\n // 字典数据\n const dicData: any[] = [...getDicByKey(props.name)];\n const data = ref<any>(dicData);\n // 取值\n const modelValue = ref(props.value);\n\n // 监听value值的变化\n watch(\n () => props.value,\n (val) => {\n modelValue.value = val;\n initSearch(val);\n }\n );\n\n //监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: any) => {\n return (\n item.value.toLowerCase().indexOf(keywords.toLowerCase()) !== -1 ||\n item.label.toLowerCase().includes(keywords.toLowerCase())\n );\n })\n .splice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].splice(0, 10);\n }\n }\n\n /**\n * 初始化value的时候进行搜索\n * @param val\n */\n function initSearch(val: any) {\n
|
|
1
|
+
{"version":3,"file":"Select.vue2.cjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\nconst { modelValue, data, onSelect, onChange } = useSelect();\n\nfunction useSelect() {\n // 字典数据\n const dicData: any[] = [...getDicByKey(props.name)];\n const data = ref<any>(dicData);\n // 取值\n const modelValue = ref(props.value);\n\n // 监听value值的变化\n watch(\n () => props.value,\n (val) => {\n modelValue.value = val;\n //initSearch(val);\n }\n );\n\n //监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: any) => {\n return (\n item.value.toLowerCase().indexOf(keywords.toLowerCase()) !== -1 ||\n item.label.toLowerCase().includes(keywords.toLowerCase())\n );\n })\n .splice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].splice(0, 10);\n }\n }\n\n /**\n * 初始化value的时候进行搜索\n * @param val\n */\n // function initSearch(val: any) {\n // val = val || \"\";\n // const index = dicData.findIndex((item: any) => {\n // return (\n // item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 ||\n // item.label.toLowerCase().includes(val)\n // );\n // });\n // if (index === -1) {\n // data.value = [...dicData].splice(0, 10);\n // } else {\n // data.value = sliceArrayByIndex(dicData, index);\n // }\n // }\n //\n // function sliceArrayByIndex(arr: any, currentIndex: any) {\n // const start = Math.max(0, currentIndex - 5);\n // const end = Math.min(arr.length, currentIndex + 6);\n //\n // return arr.slice(start, end);\n // }\n\n //监听下拉选择事件\n const onSelect = (value: any) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n //TODO 变化的时候 需要发送字典的所有数据\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find((obj: any) => obj.value === modelValue.value);\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: any) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: any) => {\n return val.some((i: any) => i === item.value);\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (inputValue: any, options: any) => {\n return (\n options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label.toLowerCase().includes(inputValue.toLowerCase())\n );\n};\n</script>\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n<style scoped></style>\n"],"names":["useDataDicStore","data","ref","modelValue","watch","onSelect","onChange"],"mappings":"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"}
|
|
@@ -23,7 +23,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
23
23
|
() => props.value,
|
|
24
24
|
(val) => {
|
|
25
25
|
modelValue2.value = val;
|
|
26
|
-
initSearch(val);
|
|
27
26
|
}
|
|
28
27
|
);
|
|
29
28
|
const onSearch = (keywords) => {
|
|
@@ -38,22 +37,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
38
37
|
data2.value = [...dicData].splice(0, 10);
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
|
-
function initSearch(val) {
|
|
42
|
-
val = val || "";
|
|
43
|
-
const index = dicData.findIndex((item) => {
|
|
44
|
-
return item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 || item.label.toLowerCase().includes(val);
|
|
45
|
-
});
|
|
46
|
-
if (index === -1) {
|
|
47
|
-
data2.value = [...dicData].splice(0, 10);
|
|
48
|
-
} else {
|
|
49
|
-
data2.value = sliceArrayByIndex(dicData, index);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
function sliceArrayByIndex(arr, currentIndex) {
|
|
53
|
-
const start = Math.max(0, currentIndex - 5);
|
|
54
|
-
const end = Math.min(arr.length, currentIndex + 6);
|
|
55
|
-
return arr.slice(start, end);
|
|
56
|
-
}
|
|
57
40
|
const onSelect2 = (value) => {
|
|
58
41
|
emits("update:value", value);
|
|
59
42
|
onSelectHandler();
|
|
@@ -74,6 +57,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
74
57
|
data2.value = dicData.filter((item) => {
|
|
75
58
|
return val.some((i) => i === item.value);
|
|
76
59
|
});
|
|
60
|
+
} else {
|
|
61
|
+
data2.value = dicData;
|
|
77
62
|
}
|
|
78
63
|
},
|
|
79
64
|
{
|
|
@@ -89,13 +74,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
89
74
|
};
|
|
90
75
|
}
|
|
91
76
|
const onFilterOption = (inputValue, options) => {
|
|
92
|
-
return options.label.includes(inputValue);
|
|
77
|
+
return options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 || options.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
93
78
|
};
|
|
94
79
|
return (_ctx, _cache) => {
|
|
95
80
|
const _component_a_select = resolveComponent("a-select");
|
|
96
81
|
return openBlock(), createBlock(_component_a_select, {
|
|
97
82
|
value: unref(modelValue),
|
|
98
83
|
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
|
|
84
|
+
style: { "width": "100%" },
|
|
99
85
|
"allow-clear": "",
|
|
100
86
|
"show-search": "",
|
|
101
87
|
options: unref(data),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue2.mjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\nconst { modelValue, data, onSelect, onChange } = useSelect();\n\nfunction useSelect() {\n // 字典数据\n const dicData: any[] = [...getDicByKey(props.name)];\n const data = ref<any>(dicData);\n // 取值\n const modelValue = ref(props.value);\n\n // 监听value值的变化\n watch(\n () => props.value,\n (val) => {\n modelValue.value = val;\n initSearch(val);\n }\n );\n\n //监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: any) => {\n return (\n item.value.toLowerCase().indexOf(keywords.toLowerCase()) !== -1 ||\n item.label.toLowerCase().includes(keywords.toLowerCase())\n );\n })\n .splice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].splice(0, 10);\n }\n }\n\n /**\n * 初始化value的时候进行搜索\n * @param val\n */\n function initSearch(val: any) {\n
|
|
1
|
+
{"version":3,"file":"Select.vue2.mjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\nconst { modelValue, data, onSelect, onChange } = useSelect();\n\nfunction useSelect() {\n // 字典数据\n const dicData: any[] = [...getDicByKey(props.name)];\n const data = ref<any>(dicData);\n // 取值\n const modelValue = ref(props.value);\n\n // 监听value值的变化\n watch(\n () => props.value,\n (val) => {\n modelValue.value = val;\n //initSearch(val);\n }\n );\n\n //监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: any) => {\n return (\n item.value.toLowerCase().indexOf(keywords.toLowerCase()) !== -1 ||\n item.label.toLowerCase().includes(keywords.toLowerCase())\n );\n })\n .splice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].splice(0, 10);\n }\n }\n\n /**\n * 初始化value的时候进行搜索\n * @param val\n */\n // function initSearch(val: any) {\n // val = val || \"\";\n // const index = dicData.findIndex((item: any) => {\n // return (\n // item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 ||\n // item.label.toLowerCase().includes(val)\n // );\n // });\n // if (index === -1) {\n // data.value = [...dicData].splice(0, 10);\n // } else {\n // data.value = sliceArrayByIndex(dicData, index);\n // }\n // }\n //\n // function sliceArrayByIndex(arr: any, currentIndex: any) {\n // const start = Math.max(0, currentIndex - 5);\n // const end = Math.min(arr.length, currentIndex + 6);\n //\n // return arr.slice(start, end);\n // }\n\n //监听下拉选择事件\n const onSelect = (value: any) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n //TODO 变化的时候 需要发送字典的所有数据\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find((obj: any) => obj.value === modelValue.value);\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: any) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: any) => {\n return val.some((i: any) => i === item.value);\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (inputValue: any, options: any) => {\n return (\n options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label.toLowerCase().includes(inputValue.toLowerCase())\n );\n};\n</script>\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n<style scoped></style>\n"],"names":["data","modelValue","onSelect","onChange"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAgB,EAAA,CAAA;AAExC,IAAA,MAAM,EAAE,UAAY,EAAA,IAAA,EAAM,QAAU,EAAA,QAAA,KAAa,SAAU,EAAA,CAAA;AAE3D,IAAA,SAAS,SAAY,GAAA;AAEnB,MAAA,MAAM,UAAiB,CAAC,GAAG,WAAY,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAClD,MAAMA,MAAAA,KAAAA,GAAO,IAAS,OAAO,CAAA,CAAA;AAE7B,MAAMC,MAAAA,WAAAA,GAAa,GAAI,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAGlC,MAAA,KAAA;AAAA,QACE,MAAM,KAAM,CAAA,KAAA;AAAA,QACZ,CAAC,GAAQ,KAAA;AACP,UAAAA,YAAW,KAAQ,GAAA,GAAA,CAAA;AAAA,SAErB;AAAA,OACF,CAAA;AAGA,MAAM,MAAA,QAAA,GAAW,CAAC,QAAqB,KAAA;AACrC,QAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAAA,OAC3B,CAAA;AAGA,MAAA,SAAS,iBAAiB,QAAkB,EAAA;AAC1C,QAAA,QAAA,GAAW,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,EAAA,CAAA;AACvB,QAAAD,KAAK,CAAA,KAAA,GAAQ,OACV,CAAA,MAAA,CAAO,CAAC,IAAc,KAAA;AACrB,UAAA,OACE,KAAK,KAAM,CAAA,WAAA,EAAc,CAAA,OAAA,CAAQ,SAAS,WAAY,EAAC,CAAM,KAAA,CAAA,CAAA,IAC7D,KAAK,KAAM,CAAA,WAAA,GAAc,QAAS,CAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,SAE3D,CAAA,CACA,MAAO,CAAA,CAAA,EAAG,EAAE,CAAA,CAAA;AACf,QAAIA,IAAAA,KAAAA,CAAK,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC3B,UAAAA,KAAAA,CAAK,QAAQ,CAAC,GAAG,OAAO,CAAE,CAAA,MAAA,CAAO,GAAG,EAAE,CAAA,CAAA;AAAA,SACxC;AAAA,OACF;AA6BA,MAAME,MAAAA,SAAAA,GAAW,CAAC,KAAe,KAAA;AAE/B,QAAA,KAAA,CAAM,gBAAgB,KAAK,CAAA,CAAA;AAE3B,QAAgB,eAAA,EAAA,CAAA;AAAA,OAClB,CAAA;AAGA,MAAA,MAAMC,YAAW,MAAM;AAErB,QAAM,KAAA,CAAA,cAAA,EAAgBF,YAAW,KAAK,CAAA,CAAA;AACtC,QAAM,KAAA,CAAA,QAAA,EAAUA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClC,CAAA;AAMA,MAAA,SAAS,eAAkB,GAAA;AACzB,QAAM,MAAA,OAAA,GAAU,WAAY,CAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AACtC,QAAM,MAAA,EAAA,GAAK,QAAQ,IAAK,CAAA,CAAC,QAAa,GAAI,CAAA,KAAA,KAAUA,YAAW,KAAK,CAAA,CAAA;AACpE,QAAA,KAAA,CAAM,UAAU,EAAE,CAAA,CAAA;AAAA,OACpB;AAEA,MAAA,KAAA;AAAA,QACE,MAAM,KAAM,CAAA,OAAA;AAAA,QACZ,CAAC,GAAa,KAAA;AACZ,UAAI,IAAA,GAAA,CAAI,SAAS,CAAG,EAAA;AAElB,YAAAD,KAAK,CAAA,KAAA,GAAQ,OAAQ,CAAA,MAAA,CAAO,CAAC,IAAc,KAAA;AACzC,cAAA,OAAO,IAAI,IAAK,CAAA,CAAC,CAAW,KAAA,CAAA,KAAM,KAAK,KAAK,CAAA,CAAA;AAAA,aAC7C,CAAA,CAAA;AAAA,WACI,MAAA;AACL,YAAAA,MAAK,KAAQ,GAAA,OAAA,CAAA;AAAA,WACf;AAAA,SACF;AAAA,QACA;AAAA,UACE,SAAW,EAAA,IAAA;AAAA,SACb;AAAA,OACF,CAAA;AAEA,MAAO,OAAA;AAAA,QACL,IAAAA,EAAAA,KAAAA;AAAA,QACA,UAAAC,EAAAA,WAAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAAC,EAAAA,SAAAA;AAAA,QACA,QAAAC,EAAAA,SAAAA;AAAA,OACF,CAAA;AAAA,KACF;AAOA,IAAM,MAAA,cAAA,GAAiB,CAAC,UAAA,EAAiB,OAAiB,KAAA;AACxD,MAAA,OACE,QAAQ,KAAM,CAAA,WAAA,EAAc,CAAA,OAAA,CAAQ,WAAW,WAAY,EAAC,CAAM,KAAA,CAAA,CAAA,IAClE,QAAQ,KAAM,CAAA,WAAA,GAAc,QAAS,CAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAAA,KAEjE,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
|
package/example/src/App.vue
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import { ref } from "vue";
|
|
3
|
+
|
|
2
4
|
import { useTable } from "./hooks";
|
|
3
5
|
const { data, loading, config } = useTable();
|
|
4
6
|
|
|
@@ -6,9 +8,19 @@ setTimeout(() => {
|
|
|
6
8
|
data.value = [];
|
|
7
9
|
config.pagination.total = 0;
|
|
8
10
|
}, 3000);
|
|
11
|
+
|
|
12
|
+
const declareType = ref("");
|
|
9
13
|
</script>
|
|
10
14
|
<template>
|
|
11
15
|
<DTable :config="config" :data="data" :loading="loading"></DTable>
|
|
16
|
+
<div style="width: 200px">
|
|
17
|
+
<d-select
|
|
18
|
+
v-model:value="declareType"
|
|
19
|
+
:include="['3', '4']"
|
|
20
|
+
name="PRE_DEC_TYPE"
|
|
21
|
+
placeholder="请选择申报人类别"
|
|
22
|
+
></d-select>
|
|
23
|
+
</div>
|
|
12
24
|
</template>
|
|
13
25
|
<style>
|
|
14
26
|
.my-modal {
|
package/package.json
CHANGED
package/src/select/Select.vue
CHANGED
|
@@ -45,7 +45,7 @@ function useSelect() {
|
|
|
45
45
|
() => props.value,
|
|
46
46
|
(val) => {
|
|
47
47
|
modelValue.value = val;
|
|
48
|
-
initSearch(val);
|
|
48
|
+
//initSearch(val);
|
|
49
49
|
}
|
|
50
50
|
);
|
|
51
51
|
|
|
@@ -74,27 +74,27 @@ function useSelect() {
|
|
|
74
74
|
* 初始化value的时候进行搜索
|
|
75
75
|
* @param val
|
|
76
76
|
*/
|
|
77
|
-
function initSearch(val: any) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function sliceArrayByIndex(arr: any, currentIndex: any) {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
77
|
+
// function initSearch(val: any) {
|
|
78
|
+
// val = val || "";
|
|
79
|
+
// const index = dicData.findIndex((item: any) => {
|
|
80
|
+
// return (
|
|
81
|
+
// item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 ||
|
|
82
|
+
// item.label.toLowerCase().includes(val)
|
|
83
|
+
// );
|
|
84
|
+
// });
|
|
85
|
+
// if (index === -1) {
|
|
86
|
+
// data.value = [...dicData].splice(0, 10);
|
|
87
|
+
// } else {
|
|
88
|
+
// data.value = sliceArrayByIndex(dicData, index);
|
|
89
|
+
// }
|
|
90
|
+
// }
|
|
91
|
+
//
|
|
92
|
+
// function sliceArrayByIndex(arr: any, currentIndex: any) {
|
|
93
|
+
// const start = Math.max(0, currentIndex - 5);
|
|
94
|
+
// const end = Math.min(arr.length, currentIndex + 6);
|
|
95
|
+
//
|
|
96
|
+
// return arr.slice(start, end);
|
|
97
|
+
// }
|
|
98
98
|
|
|
99
99
|
//监听下拉选择事件
|
|
100
100
|
const onSelect = (value: any) => {
|
|
@@ -129,6 +129,8 @@ function useSelect() {
|
|
|
129
129
|
data.value = dicData.filter((item: any) => {
|
|
130
130
|
return val.some((i: any) => i === item.value);
|
|
131
131
|
});
|
|
132
|
+
} else {
|
|
133
|
+
data.value = dicData;
|
|
132
134
|
}
|
|
133
135
|
},
|
|
134
136
|
{
|
|
@@ -151,12 +153,16 @@ function useSelect() {
|
|
|
151
153
|
* @param options
|
|
152
154
|
*/
|
|
153
155
|
const onFilterOption = (inputValue: any, options: any) => {
|
|
154
|
-
return
|
|
156
|
+
return (
|
|
157
|
+
options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 ||
|
|
158
|
+
options.label.toLowerCase().includes(inputValue.toLowerCase())
|
|
159
|
+
);
|
|
155
160
|
};
|
|
156
161
|
</script>
|
|
157
162
|
<template>
|
|
158
163
|
<a-select
|
|
159
164
|
v-model:value="modelValue"
|
|
165
|
+
style="width: 100%"
|
|
160
166
|
allow-clear
|
|
161
167
|
show-search
|
|
162
168
|
:options="data"
|