vdesign-ui 0.2.12 → 0.2.14

package/dist/components/tabs/index.vue

@@ -1,281 +1,292 @@
-<template>
-  <div class="vd-tabs" :class="stickyClasses">
-    <div class="vd-tabs__wrap" :class="menuClasses" ref="wrap">
-      <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__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" 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
-    };
-  },
-  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,
-      };
-    },
-    // 计算标签下方线条的类名
-    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 {
-        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();
-        });
-      }
-    },
-    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() {
-    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";
-</style>
+<template>
+  <div class="vd-tabs" :class="stickyClasses">
+    <div class="vd-tabs__wrap" :class="menuClasses" ref="wrap">
+      <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__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" 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
+    };
+  },
+  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,
+      };
+    },
+    // 计算标签下方线条的类名
+    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 {
+        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();
+        });
+      }
+    },
+    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);
+          }
+        }
+      });
+    },
+       /**
+     * resize 方法
+     * 当外层元素大小或组件显示状态变化时调用，触发重绘
+     */
+     resize() {
+      // 重新计算当前激活标签的位置
+      this.scrollToActiveTab();
+
+      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
+      // 例如，重新计算动画轨道的位置等
+    },
+  },
+  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();
+    });
+  },
+};
+</script>
+<style lang="less">
+@import "./style.less";
+</style>