vdesign-ui 0.1.18 → 0.1.20

package/dist/components/headnav/index.vue

@@ -1,64 +1,66 @@
 <template>
-  <div class="vd-head-nav" :class="wrapClasses">
-
-    <div v-if="showLeftSection" class="vd-head-nav--left">
-
-      <span v-if="showSidebar" class="vd-head-nav__icon">
-        <slot name="left-primary">
-          <vd-icon name="icon_nav_sidebar"></vd-icon>
-        </slot>
-      </span>
-
-      <span v-if="$slots['left-secondary']" class="vd-head-nav__icon">
-        <slot name="left-secondary"></slot>
-      </span>
-      <span v-if="leftTitle" class="vd-head-nav__left-title">{{ leftTitle }}</span>
-      <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 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">
+
+        <span v-if="showSidebar" class="vd-head-nav__icon">
+          <slot name="left-primary">
+            <vd-icon name="icon_nav_sidebar"></vd-icon>
+          </slot>
+        </span>
+
+        <span v-if="$slots['left-secondary']" class="vd-head-nav__icon">
+          <slot name="left-secondary"></slot>
+        </span>
+        <span v-if="leftTitle" class="vd-head-nav__left-title">{{ leftTitle }}</span>
+        <span v-if="editLeftText" class="vd-head-nav__edit-left-text">{{ editLeftText }}</span>
       </div>
 
-      <span v-if="title" class="vd-head-nav__title vd-ellipsis" :class="titleClasses">{{ title }}</span>
-      <span v-if="description" class="vd-head-nav__description">{{ description }}</span>
+      <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 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>
+        <span v-if="title" class="vd-head-nav__title vd-ellipsis" :class="titleClasses">{{ title }}</span>
+        <span v-if="description" class="vd-head-nav__description">{{ description }}</span>
 
-      <slot name="selector-bottom"></slot>
+        <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>
 
-      <span v-if="accountIcon || accountType" class="vd-head-nav__icontype">
-        <vd-icon svg :name="accountIcon" class="vd-head-nav__account-type--icon"></vd-icon>
-        <span class="vd-head-nav__account-type">{{ accountType }}</span>
-      </span>
-    </div>
+        <slot name="selector-bottom"></slot>
 
-    <div class="vd-head-nav--right" v-if="showRightSection">
-      <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>
-
-      <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>
-
-      <span class="vd-head-nav__edit-right-text" v-if="editRightText">{{ editRightText }}</span>
-      <span class="vd-head-nav__account-text" v-if="accountText">{{ accountText }}</span>
-    </div>
+        <span v-if="accountIcon || accountType" class="vd-head-nav__icontype">
+          <vd-icon svg :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__info" v-if="$slots['stock-time'] || time">
-      <slot name="stock-time"></slot>
-      <span v-if="time" class="vd-head-nav__time">{{ time }}</span>
+      <div class="vd-head-nav--right" v-if="showRightSection">
+        <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>
+
+        <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>
+
+        <span class="vd-head-nav__edit-right-text" v-if="editRightText">{{ editRightText }}</span>
+        <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>
+      </div>
     </div>
   </div>
 </template>
@@ -87,12 +89,24 @@ export default {
     accountText: String,
     accountType: String,
     accountIcon: String,
+    fixed: Boolean,
+    zIndex: [Number, String],
+    safeAreaInsetTop: Boolean,
+    placeholder: Boolean,
+  },
+  data() {
+    return {
+      height: null,
+    };
   },
+
   computed: {
     wrapClasses() {
       return [
         {
           [`${prefixCls}--${this.type}`]: this.type,
+          [`${prefixCls}--fixed`]: this.fixed,
+          [`${prefixCls}--safe-area-inset-top`]: this.safeAreaInsetTop,
         }
       ]
     },
@@ -130,7 +144,17 @@ export default {
     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);
+    }
+  },
 }
 </script>
 

package/dist/components/headnav/style.less

@@ -9,6 +9,19 @@
     height: calc(var(--height-headnav-primary) * 1px);
     padding: 0 calc(var(--spacing-headnav-padding_y) * 1px);
 
+    &--fixed {
+        top: 0;
+        left: 0;
+        width: 100%;
+        position: fixed;
+        z-index: 1;
+    }
+
+    &--safe-area-inset-top {
+        padding-top: constant(safe-area-inset-top);
+        padding-top: env(safe-area-inset-top);
+    }
+
     &__title {
         max-width: 100%;
         font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);