vdesign-ui 0.2.20 → 0.3.0

package/dist/components/headnav/index.vue

@@ -1,185 +1,185 @@
-<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  :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>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { inBrowser } from '../utils/env'
-import VdIcon from '../icon';
-const prefixCls = 'vd-head-nav';
-export default {
-  name: 'vd-head-nav',
-  components: {
-    VdIcon,
-  },
-  props: {
-    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 {
-      height: null,
-    };
-  },
-
-  computed: {
-    wrapClasses() {
-      return [
-        {
-          [`${prefixCls}--${this.type}`]: this.type,
-          [`${prefixCls}--fixed`]: this.fixed,
-          [`${prefixCls}--safe-area-inset-top`]: this.safeAreaInsetTop,
-        }
-      ]
-    },
-    contentClasses() {
-      return [
-        {
-          'vd-head-nav__content--start': this.start,
-        }
-      ];
-    },
-    titleClasses() {
-      return [
-        {
-          [`${prefixCls}__title--normal`]: this.type,
-        }
-      ]
-    },
-    stockColor() {
-      return [
-        {
-          [`${prefixCls}__stock--${this.colors}`]: this.colors,
-
-        }
-      ]
-    },
-    showSidebar() {
-      return this.leftPrimary || this.$slots['left-primary'];
-    },
-    showLeftSection() {
-      return this.showSidebar || this.$slots['left-secondary'] || this.leftTitle || this.editLeftText;
-    },
-    showContentSection() {
-      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;
-    }
-  },
-  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 优化性能
-      };
-      window.addEventListener('resize', resizeHandler);
-      this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', resizeHandler));
-    }
-  },
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<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  :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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { inBrowser } from '../utils/env'
+import VdIcon from '../icon';
+const prefixCls = 'vd-head-nav';
+export default {
+  name: 'vd-head-nav',
+  components: {
+    VdIcon,
+  },
+  props: {
+    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 {
+      height: null,
+    };
+  },
+
+  computed: {
+    wrapClasses() {
+      return [
+        {
+          [`${prefixCls}--${this.type}`]: this.type,
+          [`${prefixCls}--fixed`]: this.fixed,
+          [`${prefixCls}--safe-area-inset-top`]: this.safeAreaInsetTop,
+        }
+      ]
+    },
+    contentClasses() {
+      return [
+        {
+          'vd-head-nav__content--start': this.start,
+        }
+      ];
+    },
+    titleClasses() {
+      return [
+        {
+          [`${prefixCls}__title--normal`]: this.type,
+        }
+      ]
+    },
+    stockColor() {
+      return [
+        {
+          [`${prefixCls}__stock--${this.colors}`]: this.colors,
+
+        }
+      ]
+    },
+    showSidebar() {
+      return this.leftPrimary || this.$slots['left-primary'];
+    },
+    showLeftSection() {
+      return this.showSidebar || this.$slots['left-secondary'] || this.leftTitle || this.editLeftText;
+    },
+    showContentSection() {
+      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;
+    }
+  },
+  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 优化性能
+      };
+      window.addEventListener('resize', resizeHandler);
+      this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', resizeHandler));
+    }
+  },
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>