vdesign-ui 0.2.8 → 0.2.9

package/dist/components/tab/index.vue

@@ -1,68 +1,94 @@
 <template>
-    <div :class="tabClasses">
-        <slot v-if="shouldRender" />
+    <div v-show="shouldShow" :class="paneClasses">
+      <slot v-if="shouldRender" />
+      <!-- 标题插槽占位符 -->
+      <div v-if="$slots.title" ref="title">
+        <slot name="title" />
+      </div>
     </div>
-</template>
-
-<script>
-export default {
+  </template>
+  
+  <script>
+  export default {
     name: 'vd-tab',
     props: {
-        name: [String, Number],
-        title: {
-            type: String,
-        },
-        arrow: {
-            type: Boolean,
-            default: false,
-        },
+      name: [String, Number],
+      title: String,
     },
     data() {
+      return {
+        parent: null,
+        inited: false,
+      };
+    },
+    computed: {
+      paneClasses() {
         return {
-            isRendered: false,
+          'vd-tab__pane': true,
         };
+      },
+      isActive() {
+      if (!this.parent) return false;
+      if (this.name !== undefined) {
+        return this.name === this.parent.currentName;
+      } else {
+        const index = this.parent.tabs.indexOf(this);
+        return index === Number(this.parent.currentName);
+      }
     },
-    watch: {
-        isActive(newVal) {
-            if (newVal && !this.isRendered) {
-                this.isRendered = true;
-            }
-        },
+      shouldShow() {
+        // 当 animated 为 true 时，所有标签页都需要渲染（用于动画效果）
+        // 当 animated 为 false 时，只渲染当前激活的标签页
+        return this.isActive || (this.parent && this.parent.animated);
+      },
+      shouldRender() {
+        return this.inited || !(this.parent && this.parent.lazyRender);
+      },
     },
-    computed: {
-        isActive() {
-            return this.computedName === this.$parent.currentValue;
-            },
-        tabClasses() {
-            return {
-                'vd-tab': true,
-                'vd-tab-active': this.isActive,
-            };
-        },
-        computedName() {
-            return this.name != null
-                ? this.name
-                : this.$parent.tabs.indexOf(this);
-            },
-        shouldRender() {
-            if (this.$parent.lazyRender) {
-                return this.isRendered || this.isActive;
-            } else {
-                return true;
-            }
-        },
-        computedTitle() {
-        // Since the title slot is now handled by vd-tabs, we return the title prop
-            return this.title;
-        },
+    watch: {
+      isActive(val) {
+        if (val) {
+          this.inited = true;
+        }
+      },
     },
     created() {
-        this.$parent.registerTab(this);
+      this.parent = this.findParent('vd-tabs');
+      if (this.parent) {
+        this.parent.addTab(this);
+      } else {
+        console.error('vd-tab must be used within vd-tabs.');
+      }
+    },
+    mounted() {
+      if (this.isActive) {
+        this.inited = true;
+      }
+      // 如果存在 title 插槽，调用父组件的 renderTitle 方法
+      if (this.$slots.title && this.$refs.title) {
+        this.parent.renderTitle(this.$refs.title, this);
+        this.$refs.title.parentNode.removeChild(this.$refs.title);
+  
+      }
     },
     beforeDestroy() {
-        this.$parent.unregisterTab(this);
+      if (this.parent) {
+        this.parent.removeTab(this);
+      }
+    },
+    methods: {
+      findParent(name) {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options && parent.$options.name === name) {
+            return parent;
+          }
+          parent = parent.$parent;
+        }
+        return null;
+      },
     },
-};
-</script>
-
-<style lang="less"></style>
+  };
+  </script>
+  
+  

package/dist/components/tabs/index.vue

@@ -1,20 +1,38 @@
 <template>
   <div class="vd-tabs" :class="stickyClasses">
-    <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
-      <div class="vd-tabs__nav" :class="[barType,scrollspy]" ref="tabsContainer">
-        <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>
+    <div class="vd-tabs__wrap" :class="menuClasses" ref="wrap">
+      <div class="vd-tabs__nav" :class="[barType, scrollspy]" ref="nav">
+        <div
+          v-for="(tab, index) in tabs"
+          :key="tab.name !== undefined ? tab.name : index"
+          :class="[tabClasses(tab, index), lineClasses]"
+          @click="onClick(tab, index)"
+          ref="tabItems"
+        >
+          <span class="vd-tab__text" :class="ellipsisClasses"  ref="title"
+          >
+            {{ tab.title }}
+            <!-- <vd-icon
+              class="vd-tab__arrow"
+              v-if="tab.arrow"
+              name="icon_btn_moredown"
+            ></vd-icon> -->
           </span>
         </div>
       </div>
-      <div class="vd-tabs-menu--right" v-if="menu">
-        <vd-icon :name="menuIconComputed" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
+      <div class="vd-tabs__menu--right" v-if="menu">
+        <vd-icon
+          :name="menuIconComputed"
+          class="vd-tabs__menu--btn"
+          @click="emitMenuClick"
+        ></vd-icon>
       </div>
     </div>
-    <div class="vd-tabs__content">
-      <slot />
+    <div class="vd-tabs__content" ref="content" :class="{'vd-tabs__content--animated':animated}">
+      <div v-if="animated" :class="trackClasses" :style="trackStyle">
+        <slot />
+      </div>
+      <slot v-else />
     </div>
   </div>
 </template>
@@ -33,7 +51,6 @@ export default {
       type: String,
       default: "primary",
     },
-    // 将 menu 作为一个字段，同时控制显示和图标名称
     menu: {
       type: [Boolean, String],
       default: false,
@@ -47,43 +64,59 @@ export default {
     divider: Boolean,
     sticky: Boolean,
     lazyRender: Boolean,
+    animated: Boolean,
   },
   data() {
     return {
-      currentValue: this.value, // 当前选中的标签名
-      navList: [], // 标签导航列表
-      tabs: [], // 已注册的标签
+      tabs: [],
+      currentName: this.value !== undefined ? this.value : 0, // 默认为 0
     };
   },
   watch: {
     // 监听 value 变化，更新 currentValue
     value(val) {
-      this.currentValue = val;
+      this.currentName = val;
+      this.setCurrentName(val);
     },
   },
   computed: {
+    trackClasses() {
+      return {
+        'vd-tabs__track': true,
+      };
+    },
+    trackStyle() {
+      const activeIndex = this.tabs.findIndex((tab, index) => {
+        return this.isTabActive(tab, index);
+      });
+      const translateX = -activeIndex * 100;
+      return {
+        transform: `translateX(${translateX}%)`,
+        transitionDuration: '0.3s',
+      };
+    },
     // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
     menuIconComputed() {
-      if (typeof this.menu === 'string') {
+      if (typeof this.menu === "string") {
         return this.menu;
       } else {
-        return 'icon_tab_morelist'; // 默认的菜单图标名称
+        return "icon_tab_morelist"; // 默认的菜单图标名称
       }
     },
     // 计算滚动监视的类名
     scrollspy() {
-      return  `${prefixCls}--complete`
+      return `${prefixCls}--complete`;
     },
     // 计算标签文字是否需要省略号的类名
     ellipsisClasses() {
       return {
-        [`${prefixCls}-text--ellipsis`]: this.ellipsis,
+        [`vd-tab__text--ellipsis`]: this.ellipsis,
       };
     },
     // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
     menuClasses() {
       return {
-        [`${prefixCls}-menu`]: this.menu,
+        [`${prefixCls}__menu`]: this.menu,
         [`${prefixCls}__wrap--bg`]: this.backgroundColor,
         "vd-hairline--bottom": this.divider,
       };
@@ -91,13 +124,13 @@ export default {
     // 计算标签下方线条的类名
     lineClasses() {
       return {
-        [`${prefixCls}__line`]: !this.actBorder,
+        [`vd-tab__none--line`]: !this.actBorder,
       };
     },
     // 根据 tabsType 属性计算标签类型的类名
     barType() {
       return {
-        [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
+        [`${prefixCls}__nav--${this.tabsType}`]: this.tabsType,
       };
     },
     stickyClasses() {
@@ -109,71 +142,129 @@ export default {
   methods: {
     // 当菜单按钮被点击时触发事件
     emitMenuClick() {
-      this.$emit('menu-click');
+      this.$emit("menu-click");
     },
     // 计算每个标签项的类名
-    tabClasses(item) {
+    tabClasses(tab, index) {
+      const isActive = this.isTabActive(tab, index);
       return {
-        [`${prefixCls}-${this.tabsType}`]: true,
-        [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
+        'vd-tab': true,
+        'vd-tab--active': isActive,
       };
     },
-     // 注册新的标签到 tabs 数组中
-    registerTab(tab) {
-      if (!this.tabs.includes(tab)) {
-        this.tabs.push(tab);
-        this.updateNav();
+    setCurrentName(name) {
+      // 如果没有指定 name 属性，则使用索引值，确保索引值为数字类型
+      const nameIsNumber = typeof name === 'number' || /^\d+$/.test(name);
+      const parsedName = nameIsNumber ? Number(name) : name;
+      
+      const matchedTab = this.tabs.find((tab, index) => {
+        if (tab.name !== undefined) {
+          return tab.name === parsedName;
+        } else {
+          return index === parsedName;
+        }
+      });
+
+      if (matchedTab) {
+        this.currentName = matchedTab.name !== undefined ? matchedTab.name : this.tabs.indexOf(matchedTab);
+      } else if (this.tabs.length > 0) {
+        const firstTab = this.tabs[0];
+        this.currentName = firstTab.name !== undefined ? firstTab.name : 0;
+      } else {
+        this.currentName = null;
+      }
+      this.$emit('input', this.currentName);
+    },
+    isTabActive(tab, index) {
+      if (tab.name !== undefined) {
+        return tab.name === this.currentName;
+      } else {
+        return index === Number(this.currentName);
       }
     },
-     // 从 tabs 数组中注销一个标签
-    unregisterTab(tab) {
+    addTab(tab) {
+      this.tabs.push(tab);
+      if (this.currentName === undefined) {
+        this.setCurrentName(tab.name !== undefined ? tab.name : 0);
+      }
+    },
+    removeTab(tab) {
       const index = this.tabs.indexOf(tab);
       if (index !== -1) {
         this.tabs.splice(index, 1);
-        this.updateNav();
       }
     },
-    // 根据已注册的标签更新导航列表
-    updateNav() {
-      this.navList = this.tabs.map((tab, index) => ({
-        title: tab.title,
-        name: tab.name != null ? tab.name : index,
-        arrow: tab.arrow,
-      }));
-       // 如果当前没有选中的标签且导航列表不为空，则将第一个标签设为当前值
-      if (!this.currentValue && this.navList.length) {
-        this.currentValue = this.navList[0].name;
-        this.$emit("input", this.currentValue);
+    onClick(tab, index) {
+      if (tab.disabled) {
+        this.$emit('disabled', tab.name !== undefined ? tab.name : index, index);
+      } else {
+        this.currentName = tab.name !== undefined ? tab.name : index;
+        // 如果 currentName 是索引值，确保为数字类型
+        if (tab.name === undefined) {
+          this.currentName = Number(this.currentName);
+        }
+        this.$emit('input', this.currentName);
+        this.$emit('change', this.currentName, index);
+        // 切换标签后，滚动到当前标签
+        this.$nextTick(() => {
+          this.scrollToActiveTab();
+        });
       }
     },
-    handleChange(index) {
-      const nav = this.navList[index];
-      const name = nav.name;
-      if (this.currentValue !== name) {
-        this.currentValue = name;
-        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 }); // 触发 click 事件，传递标签的详细信息
-    },
-    adjustTabPosition(index) {
-      const container = this.$refs.tabsContainer;
-      const selectedTab = container.children[index];
-      if (selectedTab) {
-        const containerWidth = container.offsetWidth;
-        const tabWidth = selectedTab.offsetWidth;
-        const tabOffsetLeft = selectedTab.offsetLeft;
-        const scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
-        container.scrollTo({ left: scrollLeft, behavior: "smooth" });
-      }
+    scrollToActiveTab() {
+        const scrollWrapper = this.$refs.nav; // 修改这里
+        const tabItems = this.$refs.tabItems;
+
+        if (!scrollWrapper || !tabItems || tabItems.length === 0) {
+          return;
+        }
+
+        const activeIndex = this.tabs.findIndex((tab, index) => {
+          return this.isTabActive(tab, index);
+        });
+
+        const activeTab = tabItems[activeIndex];
+
+        if (activeTab) {
+          const tabOffsetLeft = activeTab.offsetLeft;
+          const tabWidth = activeTab.offsetWidth;
+          const wrapperWidth = scrollWrapper.offsetWidth;
+          const scrollLeft = tabOffsetLeft - (wrapperWidth - tabWidth) / 2;
+
+          scrollWrapper.scrollTo({
+            left: scrollLeft,
+            behavior: 'smooth',
+          });
+        }
+    },
+    renderTitle(titleEl, tab) {
+      this.$nextTick(() => {
+        const index = this.tabs.indexOf(tab);
+        if (index !== -1 && this.$refs.title && this.$refs.title[index]) {
+          const navTitleEl = this.$refs.title[index];
+          // 清空导航标题元素的内容
+          navTitleEl.innerHTML = '';
+          // 将子组件的 title 插槽内容移动到导航标题元素中
+          while (titleEl.firstChild) {
+            navTitleEl.appendChild(titleEl.firstChild);
+          }
+        }
+      });
     },
   },
   mounted() {
-    // 组件挂载后更新导航列表
-    // this.updateNav();
-  },
-};
+    if (this.currentName !== undefined) {
+      this.setCurrentName(this.currentName);
+    } else if (this.tabs.length > 0) {
+      const firstTab = this.tabs[0];
+      this.currentName = firstTab.name !== undefined ? firstTab.name : 0;
+    }
+    // 初始加载时，滚动到当前激活的标签
+    this.$nextTick(() => {
+        this.scrollToActiveTab();
+      });
+    },
+  };
 </script>
 <style lang="less">
 @import "./style.less";