Merge pull request #68 from mayinrain/master

upd: 一定程度上支持反显

Author: nancyzhan

docs/.vitepress/components/BTagSelector/multi.vue

@@ -1,5 +1,5 @@
 <template>
-    <BTagSelector v-model:selectedList="flavour" :options="flavourList" label="计数" tagKey="value" @selectorChange="handleChange">
+    <BTagSelector v-model:selectedList="flavour" :options="flavourList.length > 0 ? flavourList : [{ value: '烤鸭我喜欢有葱丝的', label: '葱丝' }, { value: '烤鸭我喜欢有黄瓜丝的', label: '黄瓜丝' }]" label="计数" tagKey="value" @selectorChange="handleChange">
          <template v-slot:header>
              <div class="title-text">选中tag计数: {{ flavour.length }}</div>
          </template>
@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { BTagSelector } from '@fesjs/traction-widget';
 import { FSelect } from '@fesjs/fes-design';
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 
 // 选择器所绑定的数据
 const city = ref<string>('');
@@ -60,6 +60,11 @@ const handleCityChange = () => {
 const handleChange = (val: any) => {
     console.log(val);
 };
+
+onMounted(() => {
+    flavour.value = ['烤鸭我喜欢有葱丝的', '烤鸭我喜欢有黄瓜丝的'];
+});
+
 </script>
 <style scoped>
 .title-text {

packages/traction-widget/components/TagSelector/TagSelector.vue

@@ -28,7 +28,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { defineProps, defineEmits, computed, useSlots, ref } from 'vue';
+import { defineProps, defineEmits, computed, useSlots, ref, watch } from 'vue';
 import { FTag, FSelect } from '@fesjs/fes-design';
 import { useLocale } from '../hooks/useLocale';
 
@@ -81,14 +81,15 @@ const deleteTag = (item: any, index: number) => {
 const cacheOptions = ref<any[]>([]);
 const isSlotHeader = computed(() => !!useSlots().header);
 const handleChange = (val: any) => {
-    cacheOptions.value.push(...props.options);
+    emit('selectorChange', val);
+};
+watch(() => props.options, (oldVal, newVal) => {
+    cacheOptions.value.push(...(props.options as any[]));
+    // 基于value去重，保证cacheOptions能保证最小
     cacheOptions.value = cacheOptions.value.filter((item, index, self) => {
         return self.findIndex(el => el.value === item.value) === index;
     });
-    cacheOptions.value = cacheOptions.value.filter(item => val.includes(item.value));
-    emit('selectorChange', val);
-};
-
+}, { immediate: true });
 const handleClear = () => {
     selectedList.value = [];
     emit('clearAll');