vdesign-ui 0.1.24-beta → 0.2.0-beta

package/dist/components/tabs/index.vue

@@ -2,14 +2,15 @@
   <div class="vd-tabs">
     <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
       <div :class="[barType,scrollspy]" ref="tabsContainer">
-        <div v-for="(item, index) in navList" :key="index" :class="tabClasses(item)" @click="handleChange(index)">
-          <span class="vd-tabs-text-cell" :class="ellipsisClasses">{{ item.title }}
+        <div v-for="(item, index) in navList" :key="index" :class="[tabClasses(item), lineClasses]" @click="handleChange(index)">
+          <span class="vd-tabs-text-cell" :class="ellipsisClasses">
+            {{ item.title }}
             <vd-icon class="vd-tabs-arrow" v-if="item.arrow" name="icon_btn_moredown"></vd-icon>
           </span>
         </div>
       </div>
       <div class="vd-tabs-menu--right" v-if="menu">
-        <vd-icon :name="menuIcon" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
+        <vd-icon :name="menuIconComputed" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
       </div>
     </div>
     <div class="vd-tabs__content">
@@ -28,7 +29,11 @@ export default {
       type: String,
       default: "primary",
     },
-    menu: Boolean,
+    // 将 menu 作为一个字段，同时控制显示和图标名称
+    menu: {
+      type: [Boolean, String],
+      default: false,
+    },
     ellipsis: {
       type: Boolean,
       default: true,
@@ -36,31 +41,40 @@ export default {
     actBorder: Boolean,
     backgroundColor: Boolean,
     divider: Boolean,
-    menuIcon: {
-      type: String,
-      default: 'icon_tab_morelist',
-    },
   },
   data() {
     return {
-      currentValue: this.value,
-      navList: [],
+      currentValue: this.value, // 当前选中的标签名
+      navList: [], // 标签导航列表
+      tabs: [], // 已注册的标签
     };
   },
   watch: {
+    // 监听 value 变化，更新 currentValue
     value(val) {
       this.currentValue = val;
     },
   },
   computed: {
+    // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
+    menuIconComputed() {
+      if (typeof this.menu === 'string') {
+        return this.menu;
+      } else {
+        return 'icon_tab_morelist'; // 默认的菜单图标名称
+      }
+    },
+    // 计算滚动监视的类名
     scrollspy() {
       return  `${prefixCls}--complete`
     },
+    // 计算标签文字是否需要省略号的类名
     ellipsisClasses() {
       return {
         [`${prefixCls}-text--ellipsis`]: this.ellipsis,
       };
     },
+    // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
     menuClasses() {
       return {
         [`${prefixCls}-menu`]: this.menu,
@@ -68,11 +82,13 @@ export default {
         "vd-hairline--bottom": this.divider,
       };
     },
+    // 计算标签下方线条的类名
     lineClasses() {
       return {
         [`${prefixCls}__line`]: !this.actBorder,
       };
     },
+    // 根据 tabsType 属性计算标签类型的类名
     barType() {
       return {
         [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
@@ -80,45 +96,54 @@ export default {
     },
   },
   methods: {
+    // 当菜单按钮被点击时触发事件
     emitMenuClick() {
       this.$emit('menu-click');
     },
+    // 计算每个标签项的类名
     tabClasses(item) {
       return {
         [`${prefixCls}-${this.tabsType}`]: true,
         [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
       };
     },
-    getTabs() {
-      return this.$children.filter((item) => item.$options.name === "vd-tab");
+     // 注册新的标签到 tabs 数组中
+    registerTab(tab) {
+      if (!this.tabs.includes(tab)) {
+        this.tabs.push(tab);
+        this.updateNav();
+      }
     },
+     // 从 tabs 数组中注销一个标签
+    unregisterTab(tab) {
+      const index = this.tabs.indexOf(tab);
+      if (index !== -1) {
+        this.tabs.splice(index, 1);
+        this.updateNav();
+      }
+    },
+    // 根据已注册的标签更新导航列表
     updateNav() {
-      this.navList = this.getTabs().map((pane, index) => ({
-        title: pane.title,
-        name: pane.name || index,
-        arrow: pane.arrow,
+      this.navList = this.tabs.map((tab, index) => ({
+        title: tab.title,
+        name: tab.name != null ? tab.name : index,
+        arrow: tab.arrow,
       }));
-      if (!this.currentValue) {
+       // 如果当前没有选中的标签且导航列表不为空，则将第一个标签设为当前值
+      if (!this.currentValue && this.navList.length) {
         this.currentValue = this.navList[0].name;
       }
-      this.updateStatus();
-    },
-    updateStatus() {
-      this.getTabs().forEach((tab) => {
-        tab.show = tab.computedName === this.currentValue;
-      });
     },
     handleChange(index) {
       const nav = this.navList[index];
       const name = nav.name;
       if (this.currentValue !== name) {
         this.currentValue = name;
-        this.$emit('input', name); // 确保向父组件更新
-        this.$emit('change', { index, title: nav.title, name });
-        this.updateStatus(); // 确保更新状态
-        this.adjustTabPosition(index);
+        this.$emit("input", name); // 触发 input 事件，更新父组件中的 v-model 绑定值
+        this.$emit("change", { index, title: nav.title, name }); // 触发 change 事件，传递标签的详细信息
+        this.adjustTabPosition(index); // 调整选中标签的位置
       }
-      this.$emit("click", { index, title: nav.title, name });
+      this.$emit("click", { index, title: nav.title, name }); // 触发 click 事件，传递标签的详细信息
     },
     adjustTabPosition(index) {
       const container = this.$refs.tabsContainer;
@@ -133,13 +158,11 @@ export default {
     },
   },
   mounted() {
-    this.updateNav();
+    // 组件挂载后更新导航列表
+    // this.updateNav();
   },
 };
 </script>
-
-<style lang="less"></style>
-
 <style lang="less">
 @import "./style.less";
 </style>

package/dist/components/tabs/tab/index.vue

@@ -20,35 +20,32 @@ export default {
     },
     data() {
         return {
-            show: false,
         };
     },
     watch: {
-        title() {
-            this.updateNav();
-        },
-        name() {
-            this.updateNav();
-        },
+
     },
     computed: {
+        isActive() {
+            return this.computedName === this.$parent.currentValue;
+            },
         tabClasses() {
             return {
                 'vd-tab': true,
-                'vd-tab-active': this.show,
+                'vd-tab-active': this.isActive,
             };
         },
         computedName() {
-            return this.name ?? this.$parent.getTabs().indexOf(this);
-        },
+            return this.name != null
+                ? this.name
+                : this.$parent.tabs.indexOf(this);
+            },
     },
-    methods: {
-        updateNav() {
-            this.$parent.updateNav();
-        },
+    created() {
+        this.$parent.registerTab(this);
     },
-    mounted() {
-        this.updateNav();
+    beforeDestroy() {
+        this.$parent.unregisterTab(this);
     },
 };
 </script>

package/dist/components/tag/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- {{text}} 改成v-html -->
-  <div class="vd-tag" :class="classes">
+  <div class="vd-tag" :class="classes"  @click="handleClick">
     <slot>{{ text }}</slot>
   </div>
 </template>
@@ -14,10 +13,20 @@ export default {
     type: {
       type: String,
       // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
-      default: ''
+      default: '',
+      validator(value) {
+        return [
+          'white', 'dark', 'blue', 'cyan', 'green',
+          'olive', 'yellow', 'orange', 'red', 'pink', 'purple',
+        ].includes(value);
+      },
     },
     size: {
       type: String,
+      required: true,
+      validator(value) {
+      return ['s', 'l'].includes(value);
+    },
     },
     borders: {
       type: Boolean,
@@ -41,7 +50,12 @@ export default {
       return classes
 
     },
-  }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    },
+  },
 }
 </script>
 

package/dist/components/tag/style.less

@@ -6,13 +6,13 @@
     border-radius: calc(var(--radius-tag-bg) * 1px);
     padding: 0 calc(var(--spacing-tag-padding_y) * 1px);
 
-    &--small{
+    &--s{
         font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
         font-weight: var(--en-single-f-b-s-fontWeight);
         height: calc(var(--height-tag-s) * 1px);
     }
 
-    &--large{
+    &--l{
         font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
         font-weight: var(--en-single-f-b-r-fontWeight);
         height: calc(var(--height-tag-m) * 1px);

package/dist/components/title/index.vue

@@ -2,9 +2,9 @@
     <div :class="['vd-title', wrapClasses]" @click="handleClick">
         <div class="vd-title--left">
             <div class="vd-title-content">
-                <vd-icon v-if="leftIcon" :name="leftIcon" :svg="leftSvg" :class="leftIconClasses"></vd-icon>
+                <vd-icon v-if="leftIcon" :name="leftIcon"  :class="leftIconClasses"></vd-icon>
                 <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon" :svg="rightSvg" :class="rightIconClasses"></vd-icon>
+                <vd-icon v-if="rightIcon" :name="rightIcon"  :class="rightIconClasses"></vd-icon>
             </div>
             <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
         </div>
@@ -22,18 +22,20 @@ const prefixCls = 'vd-title';
 export default {
     name: 'vd-title',
     props: {
+        type: {
+            type: String,
+            default: 'primary'
+        },
         title: String,
         leftIcon: String,
         rightIcon: String,
         arrow: Boolean,
         subText: String,
         guideText: String,
-        type: {
-            type: String,
-            default: 'primary'
-        },
-        leftSvg: Boolean,
-        rightSvg: Boolean,
+        sticky: {
+            type: Boolean,
+            default: false
+        }
 
     },
     data() {
@@ -46,6 +48,7 @@ export default {
             return {
                 [`${prefixCls}-${this.type}`]: this.type,
                 [`${prefixCls}-${this.type}-double`]: this.subText,
+                [`${prefixCls}--sticky`]: this.sticky
             }
 
         },

package/dist/components/title/style.less

@@ -14,6 +14,12 @@
         //     display: flex;
         //     flex-direction: column;
         // }
+
+        &--sticky {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
     
         &--right{
             display: flex;