@jx3box/jx3box-common-ui 7.0.3 → 7.0.4

package/assets/css/tag-by2.less

@@ -1,19 +1,23 @@
-.w-filter-tags {
+.w-filter-topics {
     display: inline-block;
     .u-toggle {
         color: #606266;
-        font-size: 14px;
+        font-size: 12px;
         .pointer;
     }
 }
 
-.w-filter-tag__pop {
+.w-filter-topic__pop {
     .u-group-title {
         color: #606266;
         padding-bottom: 10px;
     }
+    .u-group {
+        .flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
     .u-tag {
-        margin: 0 10px 10px 0;
         .pointer;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/src/App.vue

@@ -66,7 +66,7 @@
                     <clientBy type="" />
                     <zlpBy />
 
-                    <tagBy2 v-model="tag2" :tags="post_topics" />
+                    <tagBy2 v-model="tag2" :topics="post_topics" />
 
                     <hr />
                     <uploadImage
@@ -255,7 +255,7 @@ export default {
             upload: "",
             text: `<Text>text="使用：<BUFF 3222 1 desc>，持续<BUFF 3222 1 time>。\\\n" font=105 </text><Text>text="红豆沙做馅儿，精致细腻的广式月饼。" font=100 </text><Text>text="使用：能在唐门套装供应商处换取如下装备。\\\n" font=105 </text><Text>text="[燕云·重泉靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35244 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="，" font=105 </text><Text>text="[燕云·铭松靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35245 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="。" font=100 </text>`,
 
-            post_topics,
+            post_topics: post_topics['pve'],
             tag2: ''
         };
     },

package/src/filters/tagBy2.vue

@@ -1,31 +1,31 @@
 <template>
-    <div class="w-filter-tags" ref="tagBy">
+    <div class="w-filter-topics" ref="tagBy">
         <el-popover
             v-model="visible"
             trigger="manual"
             ref="pop"
             :width="400"
-            popper-class="w-filter-tag__pop"
+            popper-class="w-filter-topic__pop"
             :popper-options="{ boundariesElement: 'parent' }"
         >
             <div class="w-filter-tag__content">
-                <div v-for="(group, key) in tags" :key="key">
-                    <div class="u-group-title">{{ key }}</div>
-                    <div class="u-group">
-                        <el-tag
-                            v-for="item in group"
-                            :key="item"
-                            @click="onTagClick(item)"
-                            class="u-tag"
-                            :effect="item === value ? 'dark' : 'plain'"
-                            >{{ item }}</el-tag
-                        >
-                    </div>
+                <div class="u-group">
+                    <el-tag
+                        v-for="item in computedTopics" :key="item"
+                        @click="onTagClick(item)"
+                        class="u-group-item u-tag"
+                        :effect="item === value ? 'dark' : 'plain'"
+                        >{{ item }}</el-tag
+                    >
                 </div>
             </div>
 
             <template #reference>
-                <span @click="onToggle" class="u-toggle" :class="{ active: !!value }">{{ activeText }}</span>
+                <span @click="onToggle" class="u-toggle" :class="{ active: !!value }">
+                    <i class="el-icon-s-operation"></i>
+                    {{ activeText }}
+                    <i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
             </template>
         </el-popover>
     </div>
@@ -35,9 +35,9 @@
 export default {
     name: "tagBy2",
     props: {
-        tags: {
-            type: Object,
-            default: () => {},
+        topics: {
+            type: Array,
+            default: () => [],
         },
         modelValue: {
             type: String,
@@ -52,23 +52,27 @@ export default {
     data() {
         return {
             visible: false,
-            value: "",
+            value: "全部",
         };
     },
     computed: {
         activeText() {
             const { value } = this;
-            return value ? value : "主题";
+            return value === "全部" ? "主题" : value;
+        },
+        computedTopics() {
+            return ['全部', ...this.topics]
         },
     },
     watch: {
         modelValue: {
             immediate: true,
             handler(val) {
-                this.value = val;
+                this.value = val === '' ? '全部' : val;
             },
         },
         value(val) {
+            if (val === '全部') val = ''
             this.$emit("update:modelValue", val);
         },
     },