vdesign-ui 0.1.24 → 0.2.0-beta

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>
@@ -71,28 +82,28 @@ 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,26 @@ 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 = () => {
+    //     this.height = this.$refs.headNav.getBoundingClientRect().height;
+    //   };
+
+    //   setHeight();
+    //   setTimeout(setHeight, 100);
+    // }
+
     if (this.placeholder && this.fixed) {
-      const setHeight = () => {
+      this.$nextTick(() => {
         this.height = this.$refs.headNav.getBoundingClientRect().height;
-      };
-
-      setHeight();
-      setTimeout(setHeight, 100);
+      });
     }
   },
 }