vdesign-ui 0.1.24 → 0.2.0

package/dist/components/footnav/index.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { inBrowser } from '@p/utils/env'
 export default {
   name: 'vd-foot-nav',
   props: {
@@ -21,20 +22,23 @@ export default {
       type: Boolean,
       default: true
     },
-    zIndex: [Number, String],
+    zIndex: {
+      type: [Number, String],
+      default: 1, 
+    },
     safeAreaInsetBottom: {
       type: Boolean,
       default: null,
     },
     placeholder: Boolean,
+    beforeChange: {
+      type: Function,
+      default: null,
+    },
   },
   computed: {
     fit() {
-      if (this.safeAreaInsetBottom !== null) {
-        return this.safeAreaInsetBottom;
-      }
-      // enable safe-area-inset-bottom by default when fixed
-      return this.fixed;
+      return this.safeAreaInsetBottom !== null ? this.safeAreaInsetBottom : this.fixed;
     },
     style() {
       return {
@@ -44,48 +48,40 @@ export default {
   },
   data() {
     return {
-      // active: 0,
-      items: [],
-      height: null,
+      height: 0,
     }
   },
   watch: {
-    items() {
-      this.setActiveItem();
-    },
-
-    value() {
-      this.setActiveItem();
-    }
   },
   methods: {
-    setActiveItem() {
-      this.items.forEach((item, index) => {
-        item.active = index === this.value;
-      });
-    },
+    async onChange(active) {
+      // 处理 before-change 回调，允许用户决定是否切换
+      if (this.beforeChange) {
+        const canChange = await this.beforeChange(active);
+        if (!canChange) return;
+      }
 
-    onChange(active) {
       if (active !== this.value) {
         this.$emit('input', active);
         this.$emit('change', active);
       }
     },
-    // updateActive(index) {
-    //   this.active = index;
-    // },
-    // handleClick() {
-    //   this.$emit('click',this.active)
-    // }
+    setHeight() {
+      if (this.$refs.footNav) {
+        this.height = this.$refs.footNav.getBoundingClientRect().height;
+      }
+    },
   },
   mounted() {
-    if (this.placeholder && this.fixed) {
-      const setHeight = () => {
-        this.height = this.$refs.footNav.getBoundingClientRect().height;
+    if (inBrowser && this.placeholder && this.fixed) {
+      this.setHeight();
+      const resizeHandler = () => {
+        requestAnimationFrame(this.setHeight); // 使用 requestAnimationFrame 优化性能
       };
 
-      setHeight();
-      setTimeout(setHeight, 100);
+      // setHeight();
+      window.addEventListener('resize', resizeHandler);
+      this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', resizeHandler));
     }
   }
 

package/dist/components/headnav/index.vue

@@ -1,62 +1,73 @@
 <template>
   <div class="vd-head-nav--placeholder" :style="{height:height + 'px'}">
     <div class="vd-head-nav" :class="wrapClasses" :style="{zIndex:zIndex}" ref="headNav">
-
       <div v-if="showLeftSection" class="vd-head-nav--left">
-
+        <!-- 左一icon -->
         <span v-if="showSidebar" class="vd-head-nav__icon">
           <slot name="left-primary">
             <vd-icon name="icon_nav_sidebar"></vd-icon>
           </slot>
         </span>
-
+        <!-- 左二icon -->
         <span v-if="$slots['left-secondary']" class="vd-head-nav__icon">
           <slot name="left-secondary"></slot>
         </span>
+
+        <!-- hno类型下的 左对齐文本-->
         <span v-if="leftTitle" class="vd-head-nav__left-title">{{ leftTitle }}</span>
+        <!-- hno类型下的 编辑文本 -->
         <span v-if="editLeftText" class="vd-head-nav__edit-left-text">{{ editLeftText }}</span>
       </div>
 
       <div v-if="showContentSection" class="vd-head-nav__content" :class="contentClasses">
+        <!-- 标题选择器 -->
         <div v-if="$slots.selector" class="vd-head-nav__content--selector">
           <slot name="selector"></slot>
         </div>
-
+        <!-- 标题 -->
         <span v-if="title" class="vd-head-nav__title vd-ellipsis" :class="titleClasses">{{ title }}</span>
+        <!-- hno 副标题 -->
         <span v-if="description" class="vd-head-nav__description">{{ description }}</span>
 
+        <!-- hno 股票价格 -->
         <span class="vd-head-nav__stock" :class="stockColor" v-if="colors">
+          <!-- 股票开市状态 -->
           <slot name="state"></slot>
           <span class="vd-head-nav__price--price">{{ price }}</span>
           <span class="vd-head-nav__price--chgp">{{ chgp }}</span>
           <span class="vd-head-nav__price--chg">{{ chg }}</span>
         </span>
 
+        <!-- hno title 账户类型选择器 -->
         <slot name="selector-bottom"></slot>
-
+        <!-- hno 账户类型选择器结果 -->
         <span v-if="accountIcon || accountType" class="vd-head-nav__icontype">
-          <vd-icon svg :name="accountIcon" class="vd-head-nav__account-type--icon"></vd-icon>
+          <vd-icon  :name="accountIcon" class="vd-head-nav__account-type--icon"></vd-icon>
           <span class="vd-head-nav__account-type">{{ accountType }}</span>
         </span>
       </div>
 
       <div class="vd-head-nav--right" v-if="showRightSection">
+        <!-- 右二icon -->
         <span v-if="rightSecondary || $slots['right-secondary']" class="vd-head-nav__icon">
           <slot name="right-secondary">
             <vd-icon name="icon_nav_search" style="transform: scale(1);"></vd-icon>
           </slot>
         </span>
-
+        <!-- 右一icon -->
         <span v-if="rightPrimary || $slots['right-primary']" class="vd-head-nav__icon">
           <slot name="right-primary">
             <vd-icon name="icon_nav_trade" style="transform: scale(1);"></vd-icon>
           </slot>
         </span>
 
+        <!-- hno-编辑右侧文字 -->
         <span class="vd-head-nav__edit-right-text" v-if="editRightText">{{ editRightText }}</span>
+        <!-- hno-账户类型右侧文字 -->
         <span class="vd-head-nav__account-text" v-if="accountText">{{ accountText }}</span>
       </div>
 
+      <!-- 股票开市状态 -->
       <div class="vd-head-nav__info" v-if="$slots['stock-time'] || time">
         <slot name="stock-time"></slot>
         <span v-if="time" class="vd-head-nav__time">{{ time }}</span>
@@ -66,33 +77,33 @@
 </template>
 
 <script>
-
+import { inBrowser } from '@p/utils/env'
 const prefixCls = 'vd-head-nav';
 export default {
   name: 'vd-head-nav',
   props: {
-    title: String,
-    time: String,
-    type: String,
-    leftPrimary: Boolean,
-    rightPrimary: Boolean,
-    rightSecondary: Boolean,
-    start: Boolean,
-    description: String,
-    price: String,
-    chg: String,
-    chgp: String,
-    colors: String,
-    leftTitle: String,
-    editLeftText: String,
-    editRightText: String,
-    accountText: String,
-    accountType: String,
-    accountIcon: String,
-    fixed: Boolean,
-    zIndex: [Number, String],
-    safeAreaInsetTop: Boolean,
-    placeholder: Boolean,
+    title: String,  // 标题
+    time: String,   // 标题下面的股票开市时间
+    type: String,   //  默认hnp 设置normal为hno
+    leftPrimary: Boolean,  // 左侧边栏图标，左一，有默认图标icon_nav_sidebar，也可以是同名slot
+    rightPrimary: Boolean,  // 右侧边栏图标，右一，有默认图标icon_nav_search，也可以是同名slot
+    rightSecondary: Boolean, // 右侧边栏图标，右二，有默认图标icon_nav_trade，也可以是同名slot
+    start: Boolean,  // hno类型下的，居左对齐
+    description: String, // 标题下面的描述文字
+    price: String,  // 股票价格
+    chgp: String,  // 股票涨跌百分比 如：+0.01%
+    chg: String,   // 股票涨跌，如：+0.01
+    colors: String, // 股票涨跌颜色，默认rise，可选值fall，rise为涨，fall为跌
+    leftTitle: String, // hno类型下的，左侧边栏文字，字号大一些
+    editLeftText: String, // hno类型下的，编辑左边栏文字
+    editRightText: String, // hno类型下的，编辑右边栏文字
+    accountText: String,  // 账户类型右侧边栏文字
+    accountType: String,  // 账户类型文本
+    accountIcon: String,  // 账户类型图标
+    fixed: Boolean, // 固定在顶部
+    zIndex: [Number, String],  // 固定在顶部时，设置z-index
+    safeAreaInsetTop: Boolean, // 固定在顶部时，是否使用安全区域
+    placeholder: Boolean, // 是否使用占位，用于固定在顶部时，占位高度
   },
   data() {
     return {
@@ -139,20 +150,27 @@ export default {
       return this.showSidebar || this.$slots['left-secondary'] || this.leftTitle || this.editLeftText;
     },
     showContentSection() {
-      return this.title || this.$slots.selector || this.$slots['selector-bottom'] || this.account || this.colors;
+      return this.title || this.description || this.$slots.selector || this.$slots['selector-bottom'] || this.accountIcon || this.accountType || this.colors;
     },
     showRightSection() {
       return this.rightPrimary || this.$slots['right-primary'] || this.rightSecondary || this.$slots['right-secondary'] || this.editRightText || this.accountText;
     }
   },
-  mounted() {
-    if (this.placeholder && this.fixed) {
-      const setHeight = () => {
+  methods: {
+    setHeight() {
+      if (this.$refs.headNav) {
         this.height = this.$refs.headNav.getBoundingClientRect().height;
+      }
+    },
+  },
+  mounted() {
+    if (inBrowser && this.placeholder && this.fixed) {
+      this.setHeight();
+      const resizeHandler = () => {
+        requestAnimationFrame(this.setHeight); // 使用 requestAnimationFrame 优化性能
       };
-
-      setHeight();
-      setTimeout(setHeight, 100);
+      window.addEventListener('resize', resizeHandler);
+      this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', resizeHandler));
     }
   },
 }

package/dist/components/headnav/style.less

@@ -164,15 +164,6 @@
             color: var(--color-headnav-icon);
         }
     }
-
-    // &__space--end {
-    //     margin-inline-end: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-    // }
-
-    // &__space--start {
-    //     margin-inline-start: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-    // }
-
     &__time {
         margin-inline-start: calc(var(--spacing-headnav-primary-text-margin_right) * 1px);
         font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);