vdesign-ui 0.2.20 → 0.3.0

package/dist/components/tabs/index.vue

@@ -1,356 +1,356 @@
-<template>
-  <div class="vd-tabs" :class="stickyClasses">
-    <div class="vd-tabs__wrap" :class="menuClasses" ref="wrap">
-      <div class="vd-tabs__scroll" ref="scroll">
-        <div class="vd-tabs__scroll--left" v-show="firstTabOut"></div>
-        <div class="vd-tabs__nav" :class="[barType, scrollspyClasses]" 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__scroll--right" v-show="lastTabOut"></div>
-     </div>
-      <div class="vd-tabs__menu--right" :class="{'vd-tabs__menu--margin':lastTabOut}" v-if="menu">
-        <vd-icon
-          :name="menuIconComputed"
-          class="vd-tabs__menu--btn"
-          @click="emitMenuClick"
-        ></vd-icon>
-      </div>
-    </div>
-    <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>
-
-<script>
-import VdIcon from "../icon";
-import languageMixin from '../mixins/languageMixin.js';
-
-const prefixCls = "vd-tabs";
-export default {
-  name: "vd-tabs",
-  mixins: [languageMixin],
-  components: {
-    VdIcon,
-  },
-  props: {
-    value: [String, Number],
-    tabsType: {
-      type: String,
-      default: "primary",
-    },
-    menu: {
-      type: [Boolean, String],
-      default: false,
-    },
-    ellipsis: {
-      type: Boolean,
-      default: true,
-    },
-    actBorder: Boolean,
-    backgroundColor: Boolean,
-    divider: Boolean,
-    sticky: Boolean,
-    lazyRender: Boolean,
-    animated: Boolean,
-    scrollspy:Boolean
-  },
-  data() {
-    return {
-      tabs: [],
-      currentName: this.value !== undefined ? this.value : 0, // 默认为 0
-      firstTabOut: false, // 第一个标签是否超出
-      lastTabOut: false
-    };
-  },
-  watch: {
-    // 监听 value 变化，更新 currentValue
-    value(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 offset = activeIndex * 100;
-        // 根据文本方向调整 translateX 值
-      const translateX = this.language === 'ar'  ? offset : -offset;
-      // const translateX = -activeIndex * 100;
-      return {
-        transform: `translateX(${translateX}%)`,
-        transitionDuration: '0.3s',
-      };
-    },
-    // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
-    menuIconComputed() {
-      if (typeof this.menu === "string") {
-        return this.menu;
-      } else {
-        return "icon_tab_morelist"; // 默认的菜单图标名称
-      }
-    },
-    // 计算滚动监视的类名
-    scrollspyClasses() {
-      return {
-        [`${prefixCls}--complete`]:this.scrollspy
-      }
-    },
-    // 计算标签文字是否需要省略号的类名
-    ellipsisClasses() {
-      return {
-        [`vd-tab__text--ellipsis`]: this.ellipsis,
-      };
-    },
-    // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
-    menuClasses() {
-      return {
-        [`${prefixCls}__menu`]: this.menu,
-        [`${prefixCls}__wrap--bg`]: this.backgroundColor,
-        "vd-hairline--bottom": this.divider,
-        // "vd-tabs__scroll": this.firstTabOut, // 当第一个标签超出时，添加滚动类名
-      };
-    },
-    // 计算标签下方线条的类名
-    lineClasses() {
-      return {
-        [`vd-tab__none--line`]: !this.actBorder,
-      };
-    },
-    // 根据 tabsType 属性计算标签类型的类名
-    barType() {
-      return {
-        [`${prefixCls}__nav--${this.tabsType}`]: this.tabsType,
-      };
-    },
-    stickyClasses() {
-      return {
-        [`${prefixCls}--sticky`]: this.sticky,
-      };
-    },
-  },
-  methods: {
-    // 当菜单按钮被点击时触发事件
-    emitMenuClick() {
-      this.$emit("menu-click");
-    },
-    // 计算每个标签项的类名
-    tabClasses(tab, index) {
-      const isActive = this.isTabActive(tab, index);
-      return {
-        'vd-tab': true,
-        'vd-tab--active': isActive,
-      };
-    },
-    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);
-      }
-    },
-    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);
-      }
-    },
-    onClick(tab, index) {
-      if (tab.disabled) {
-        this.$emit('disabled', tab.name !== undefined ? tab.name : index, index);
-      } else {
-        const newName = tab.name !== undefined ? tab.name : index;
-
-        // 始终触发 click 事件
-        this.$emit('click', newName, index);
-
-        // 检查是否需要切换标签
-        if (newName !== this.currentName) {
-          this.currentName = newName;
-          
-          // 如果 currentName 是索引值，确保为数字类型
-          if (tab.name === undefined) {
-            this.currentName = Number(this.currentName);
-          }
-
-          this.$emit('input', this.currentName);
-          this.$emit('change', this.currentName, index); // 仅在切换时触发 change 事件
-
-          // 切换标签后，滚动到当前标签
-          this.$nextTick(() => {
-            this.scrollToActiveTab();
-          });
-        }
-      }
-    },
-    scrollToActiveTab(targetIndex = null) {
-      const scrollWrapper = this.$refs.nav; 
-      const tabItems = this.$refs.tabItems;
-      if (!scrollWrapper || !tabItems || tabItems.length === 0) {
-        return;
-      }
-      // 如果传入 targetIndex，设置当前激活标签的 name
-      if (targetIndex !== null) {
-        const targetTab = this.tabs[targetIndex];
-        if (targetTab) {
-          this.currentName = targetTab.name !== undefined ? targetTab.name : targetIndex;
-        } else {
-          console.warn('Invalid target index:', targetIndex);
-          return;
-        }
-      }
-
-      const activeIndex = targetIndex !== null ? targetIndex : this.tabs.findIndex((tab, index) => this.isTabActive(tab, index));
-      const activeTab = tabItems[activeIndex];
-
-      setTimeout(() => {
-        const tabOffsetLeft = activeTab.offsetLeft;
-        const tabWidth = activeTab.offsetWidth;
-        const wrapperWidth = scrollWrapper.offsetWidth;
-        const scrollLeft = tabOffsetLeft - (wrapperWidth - tabWidth) / 2;
-    
-        scrollWrapper.scrollTo({
-          left: scrollLeft,
-          behavior: 'smooth'
-        });
-      }, 0);
-    },
-    checkFirstTabOverflow() {
-      const nav = this.$refs.nav;
-      if (nav) {
-        if (this.language === 'ar') {
-          // 在 RTL 模式下，scrollLeft 可能为负，判断是否滚出视口可以检测 scrollLeft 是否小于 0
-          // this.firstTabOut = nav.scrollLeft < 0;
-          // this.lastTabOut  = nav.scrollLeft < 0;
-
-          this.firstTabOut =
-            nav.scrollWidth > nav.clientWidth &&
-            Math.abs(nav.scrollLeft) + nav.clientWidth < nav.scrollWidth;
-          this.lastTabOut = nav.scrollLeft < 0;
-        } else {
-          // LTR 模式下，滚出视口时 scrollLeft 大于 0
-          this.firstTabOut = nav.scrollLeft > 0;
-          this.lastTabOut =
-            nav.scrollWidth > nav.clientWidth && nav.scrollLeft + nav.clientWidth < nav.scrollWidth;
-          // this.firstTabOut = nav.scrollLeft > 0;
-          // this.lastTabOut  = Math.ceil(nav.scrollLeft + nav.clientWidth) < nav.scrollWidth;
-        }
-      }
-    },
-    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);
-          }
-        }
-      });
-    },
-    /**
-     * resize 方法
-     * 当外层元素大小或组件显示状态变化时调用，触发重绘
-    */
-    resize() {
-      // 重新计算当前激活标签的位置
-      this.scrollToActiveTab();
-      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
-      // 例如，重新计算动画轨道的位置等
-    },
-    /**
-     * scrollTo 方法
-     * 刷新页面，滚动到指定位置
-    */
-    scrollTo(targetIndex = null){
-      // 重新计算当前激活标签的位置
-      this.scrollToActiveTab(targetIndex);
-      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
-      // 例如，重新计算动画轨道的位置等
-    }
-  },
-  mounted() {
-    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();
-      this.checkFirstTabOverflow()
-      if (this.$refs.nav) {
-        this.$refs.nav.addEventListener('scroll', this.checkFirstTabOverflow);
-      }
-    });
-  },
-  beforeDestroy() {
-    if (this.$refs.nav) {
-      this.$refs.nav.removeEventListener('scroll', this.checkFirstTabOverflow);
-    }
-  },
-};
-</script>
-<style lang="less">
-@import "./style.less";
-</style>
+<template>
+  <div class="vd-tabs" :class="stickyClasses">
+    <div class="vd-tabs__wrap" :class="menuClasses" ref="wrap">
+      <div class="vd-tabs__scroll" ref="scroll">
+        <div class="vd-tabs__scroll--left" v-show="firstTabOut"></div>
+        <div class="vd-tabs__nav" :class="[barType, scrollspyClasses]" 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__scroll--right" v-show="lastTabOut"></div>
+     </div>
+      <div class="vd-tabs__menu--right" :class="{'vd-tabs__menu--margin':lastTabOut}" v-if="menu">
+        <vd-icon
+          :name="menuIconComputed"
+          class="vd-tabs__menu--btn"
+          @click="emitMenuClick"
+        ></vd-icon>
+      </div>
+    </div>
+    <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>
+
+<script>
+import VdIcon from "../icon";
+import languageMixin from '../mixins/languageMixin.js';
+
+const prefixCls = "vd-tabs";
+export default {
+  name: "vd-tabs",
+  mixins: [languageMixin],
+  components: {
+    VdIcon,
+  },
+  props: {
+    value: [String, Number],
+    tabsType: {
+      type: String,
+      default: "primary",
+    },
+    menu: {
+      type: [Boolean, String],
+      default: false,
+    },
+    ellipsis: {
+      type: Boolean,
+      default: true,
+    },
+    actBorder: Boolean,
+    backgroundColor: Boolean,
+    divider: Boolean,
+    sticky: Boolean,
+    lazyRender: Boolean,
+    animated: Boolean,
+    scrollspy:Boolean
+  },
+  data() {
+    return {
+      tabs: [],
+      currentName: this.value !== undefined ? this.value : 0, // 默认为 0
+      firstTabOut: false, // 第一个标签是否超出
+      lastTabOut: false
+    };
+  },
+  watch: {
+    // 监听 value 变化，更新 currentValue
+    value(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 offset = activeIndex * 100;
+        // 根据文本方向调整 translateX 值
+      const translateX = this.language === 'ar'  ? offset : -offset;
+      // const translateX = -activeIndex * 100;
+      return {
+        transform: `translateX(${translateX}%)`,
+        transitionDuration: '0.3s',
+      };
+    },
+    // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
+    menuIconComputed() {
+      if (typeof this.menu === "string") {
+        return this.menu;
+      } else {
+        return "icon_tab_morelist"; // 默认的菜单图标名称
+      }
+    },
+    // 计算滚动监视的类名
+    scrollspyClasses() {
+      return {
+        [`${prefixCls}--complete`]:this.scrollspy
+      }
+    },
+    // 计算标签文字是否需要省略号的类名
+    ellipsisClasses() {
+      return {
+        [`vd-tab__text--ellipsis`]: this.ellipsis,
+      };
+    },
+    // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
+    menuClasses() {
+      return {
+        [`${prefixCls}__menu`]: this.menu,
+        [`${prefixCls}__wrap--bg`]: this.backgroundColor,
+        "vd-hairline--bottom": this.divider,
+        // "vd-tabs__scroll": this.firstTabOut, // 当第一个标签超出时，添加滚动类名
+      };
+    },
+    // 计算标签下方线条的类名
+    lineClasses() {
+      return {
+        [`vd-tab__none--line`]: !this.actBorder,
+      };
+    },
+    // 根据 tabsType 属性计算标签类型的类名
+    barType() {
+      return {
+        [`${prefixCls}__nav--${this.tabsType}`]: this.tabsType,
+      };
+    },
+    stickyClasses() {
+      return {
+        [`${prefixCls}--sticky`]: this.sticky,
+      };
+    },
+  },
+  methods: {
+    // 当菜单按钮被点击时触发事件
+    emitMenuClick() {
+      this.$emit("menu-click");
+    },
+    // 计算每个标签项的类名
+    tabClasses(tab, index) {
+      const isActive = this.isTabActive(tab, index);
+      return {
+        'vd-tab': true,
+        'vd-tab--active': isActive,
+      };
+    },
+    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);
+      }
+    },
+    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);
+      }
+    },
+    onClick(tab, index) {
+      if (tab.disabled) {
+        this.$emit('disabled', tab.name !== undefined ? tab.name : index, index);
+      } else {
+        const newName = tab.name !== undefined ? tab.name : index;
+
+        // 始终触发 click 事件
+        this.$emit('click', newName, index);
+
+        // 检查是否需要切换标签
+        if (newName !== this.currentName) {
+          this.currentName = newName;
+          
+          // 如果 currentName 是索引值，确保为数字类型
+          if (tab.name === undefined) {
+            this.currentName = Number(this.currentName);
+          }
+
+          this.$emit('input', this.currentName);
+          this.$emit('change', this.currentName, index); // 仅在切换时触发 change 事件
+
+          // 切换标签后，滚动到当前标签
+          this.$nextTick(() => {
+            this.scrollToActiveTab();
+          });
+        }
+      }
+    },
+    scrollToActiveTab(targetIndex = null) {
+      const scrollWrapper = this.$refs.nav; 
+      const tabItems = this.$refs.tabItems;
+      if (!scrollWrapper || !tabItems || tabItems.length === 0) {
+        return;
+      }
+      // 如果传入 targetIndex，设置当前激活标签的 name
+      if (targetIndex !== null) {
+        const targetTab = this.tabs[targetIndex];
+        if (targetTab) {
+          this.currentName = targetTab.name !== undefined ? targetTab.name : targetIndex;
+        } else {
+          console.warn('Invalid target index:', targetIndex);
+          return;
+        }
+      }
+
+      const activeIndex = targetIndex !== null ? targetIndex : this.tabs.findIndex((tab, index) => this.isTabActive(tab, index));
+      const activeTab = tabItems[activeIndex];
+
+      setTimeout(() => {
+        const tabOffsetLeft = activeTab.offsetLeft;
+        const tabWidth = activeTab.offsetWidth;
+        const wrapperWidth = scrollWrapper.offsetWidth;
+        const scrollLeft = tabOffsetLeft - (wrapperWidth - tabWidth) / 2;
+    
+        scrollWrapper.scrollTo({
+          left: scrollLeft,
+          behavior: 'smooth'
+        });
+      }, 0);
+    },
+    checkFirstTabOverflow() {
+      const nav = this.$refs.nav;
+      if (nav) {
+        if (this.language === 'ar') {
+          // 在 RTL 模式下，scrollLeft 可能为负，判断是否滚出视口可以检测 scrollLeft 是否小于 0
+          // this.firstTabOut = nav.scrollLeft < 0;
+          // this.lastTabOut  = nav.scrollLeft < 0;
+
+          this.firstTabOut =
+            nav.scrollWidth > nav.clientWidth &&
+            Math.abs(nav.scrollLeft) + nav.clientWidth < nav.scrollWidth;
+          this.lastTabOut = nav.scrollLeft < 0;
+        } else {
+          // LTR 模式下，滚出视口时 scrollLeft 大于 0
+          this.firstTabOut = nav.scrollLeft > 0;
+          this.lastTabOut =
+            nav.scrollWidth > nav.clientWidth && nav.scrollLeft + nav.clientWidth < nav.scrollWidth;
+          // this.firstTabOut = nav.scrollLeft > 0;
+          // this.lastTabOut  = Math.ceil(nav.scrollLeft + nav.clientWidth) < nav.scrollWidth;
+        }
+      }
+    },
+    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);
+          }
+        }
+      });
+    },
+    /**
+     * resize 方法
+     * 当外层元素大小或组件显示状态变化时调用，触发重绘
+    */
+    resize() {
+      // 重新计算当前激活标签的位置
+      this.scrollToActiveTab();
+      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
+      // 例如，重新计算动画轨道的位置等
+    },
+    /**
+     * scrollTo 方法
+     * 刷新页面，滚动到指定位置
+    */
+    scrollTo(targetIndex = null){
+      // 重新计算当前激活标签的位置
+      this.scrollToActiveTab(targetIndex);
+      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
+      // 例如，重新计算动画轨道的位置等
+    }
+  },
+  mounted() {
+    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();
+      this.checkFirstTabOverflow()
+      if (this.$refs.nav) {
+        this.$refs.nav.addEventListener('scroll', this.checkFirstTabOverflow);
+      }
+    });
+  },
+  beforeDestroy() {
+    if (this.$refs.nav) {
+      this.$refs.nav.removeEventListener('scroll', this.checkFirstTabOverflow);
+    }
+  },
+};
+</script>
+<style lang="less">
+@import "./style.less";
+</style>