@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-divider/props.js

@@ -1,45 +1,46 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 是否虚线
     dashed: {
       type: Boolean,
-      default: defprops.divider.dashed
+      default: () => defProps.divider.dashed
     },
     // 是否细线
     hairline: {
       type: Boolean,
-      default: defprops.divider.hairline
+      default: () => defProps.divider.hairline
     },
     // 是否以点替代文字，优先于text字段起作用
     dot: {
       type: Boolean,
-      default: defprops.divider.dot
+      default: () => defProps.divider.dot
     },
     // 内容文本的位置，left-左边，center-中间，right-右边
     textPosition: {
       type: String,
-      default: defprops.divider.textPosition
+      default: () => defProps.divider.textPosition
     },
     // 文本内容
     text: {
       type: [String, Number],
-      default: defprops.divider.text
+      default: () => defProps.divider.text
     },
     // 文本大小
     textSize: {
       type: [String, Number],
-      default: defprops.divider.textSize
+      default: () => defProps.divider.textSize
     },
     // 文本颜色
     textColor: {
       type: String,
-      default: defprops.divider.textColor
+      default: () => defProps.divider.textColor
     },
     // 线条颜色
     lineColor: {
       type: String,
-      default: defprops.divider.lineColor
+      default: () => defProps.divider.lineColor
     }
   }
-};
+});

package/uview-plus/components/u-divider/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -25,4 +40,4 @@ view, scroll-view, swiper-item {
   font-size: 12px;
   margin: 0 12px;
   color: #c0c4cc;
-}
+}

package/uview-plus/components/u-divider/u-divider.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-divider" :style="[$u.addStyle(customStyle)]" @tap="click">
+  <view class="u-divider" :style="[addStyle(customStyle)]" @tap="click">
     <u-line :color="lineColor" :customStyle="leftLineStyle" :hairline="hairline" :dashed="dashed"></u-line>
     <text v-if="dot" class="u-divider__dot">●</text>
     <text v-else-if="text" class="u-divider__text" :style="[textStyle]">{{ text }}</text>
@@ -7,9 +7,10 @@
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit } from '../../libs/function/index';
 /**
  * divider 分割线
  * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
@@ -33,7 +34,7 @@ export default {
   computed: {
     textStyle() {
       const style = {};
-      style.fontSize = uni.$u.addUnit(this.textSize);
+      style.fontSize = addUnit(this.textSize);
       style.color = this.textColor;
       return style;
     },
@@ -60,7 +61,9 @@ export default {
       return style;
     }
   },
+  emits: ['click'],
   methods: {
+    addStyle,
     // divider组件被点击时触发
     click() {
       this.$emit('click');

package/uview-plus/components/u-dropdown/props.js

@@ -1,21 +1,16 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
-    // 标题选中时的样式
-    activeStyle: {
-      type: [String, Object],
-      default: () => ({
-        color: '#2979ff',
-        fontSize: '14px'
-      })
+    // 菜单标题和选项的激活态颜色
+    activeColor: {
+      type: String,
+      default: '#2979ff'
     },
-    // 标题未选中时的样式
-    inactiveStyle: {
-      type: [String, Object],
-      default: () => ({
-        color: '#606266',
-        fontSize: '14px'
-      })
+    // 菜单标题和选项的未激活态颜色
+    inactiveColor: {
+      type: String,
+      default: '#606266'
     },
     // 点击遮罩是否关闭菜单
     closeOnClickMask: {
@@ -63,4 +58,4 @@ export default {
       default: 14
     }
   }
-};
+});

package/uview-plus/components/u-dropdown/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -9,11 +24,19 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
+.u-dropdown {
+  flex: 1;
+  width: 100%;
+  position: relative;
+}
 .u-dropdown__menu {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
+  position: relative;
+  z-index: 11;
+  height: 80rpx;
 }
 .u-dropdown__menu__item {
   flex: 1;
@@ -22,11 +45,48 @@ view, scroll-view, swiper-item {
   /* #endif */
   flex-direction: row;
   justify-content: center;
+  align-items: center;
+}
+.u-dropdown__menu__item .u-flex-row {
+  flex-direction: row;
+}
+.u-dropdown__menu__item__text {
+  font-size: 28rpx;
+  color: var(--u-content-color);
 }
-.u-dropdown__menu__item__content {
+.u-dropdown__menu__item__arrow {
+  margin-left: 6rpx;
+  transition: transform 0.3s;
+  align-items: center;
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
-  align-items: center;
 }
+.u-dropdown__menu__item__arrow--rotate {
+  transform: rotate(180deg);
+}
+.u-dropdown__content {
+  position: absolute;
+  z-index: 8;
+  width: 100%;
+  left: 0px;
+  bottom: 0;
+  overflow: hidden;
+}
+.u-dropdown__content__mask {
+  position: absolute;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.3);
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.u-dropdown__content__popup {
+  position: relative;
+  z-index: 10;
+  transition: transform 0.3s;
+  transform: translate3D(0, -100%, 0);
+  overflow: hidden;
+}

package/uview-plus/components/u-dropdown/style.scss

@@ -1,18 +1,68 @@
-@import '../../libs/css/components.scss';
-
-.u-dropdown {
-  &__menu {
-    @include flex;
-
-    &__item {
-      flex: 1;
-      @include flex;
-      justify-content: center;
-
-      &__content {
-        @include flex;
-        align-items: center;
-      }
-    }
-  }
-}
+@import '../../libs/css/components.scss';
+
+.u-dropdown {
+  flex: 1;
+  width: 100%;
+  position: relative;
+
+  &__menu {
+    @include flex;
+    position: relative;
+    z-index: 11;
+    height: 80rpx;
+
+    &__item {
+      flex: 1;
+      @include flex;
+      justify-content: center;
+      align-items: center;
+
+      .u-flex-row {
+        flex-direction: row;
+      }
+
+      &__text {
+        font-size: 28rpx;
+        color: $u-content-color;
+      }
+
+      &__arrow {
+        margin-left: 6rpx;
+        transition: transform 0.3s;
+        align-items: center;
+        @include flex;
+
+        &--rotate {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  &__content {
+    position: absolute;
+    z-index: 8;
+    width: 100%;
+    left: 0px;
+    bottom: 0;
+    overflow: hidden;
+
+    &__mask {
+      position: absolute;
+      z-index: 9;
+      background: rgba(0, 0, 0, 0.3);
+      width: 100%;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &__popup {
+      position: relative;
+      z-index: 10;
+      transition: transform 0.3s;
+      transform: translate3D(0, -100%, 0);
+      overflow: hidden;
+    }
+  }
+}

package/uview-plus/components/u-dropdown/u-dropdown.vue

@@ -1 +1,208 @@
-<template>
  <view class="u-drawdown">
    <view
      class="u-dropdown__menu"
      :style="{
        height: $u.addUnit(height)
      }"
      ref="u-dropdown__menu"
    >
      <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="clickHandler(item, index)">
        <view class="u-dropdown__menu__item__content">
          <text class="u-dropdown__menu__item__content__text" :style="[index === current ? activeStyle : inactiveStyle]">
            {{ item.title }}
          </text>
          <view
            class="u-dropdown__menu__item__content__arrow"
            :class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']"
          >
            <u-icon :name="menuIcon" :size="$u.addUnit(menuIconSize)"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="u-dropdown__content">
      <slot />
    </view>
  </view>
 * Dropdown
 * @description
 * @tutorial url
 * @property {String}
 * @event {Function}
 * @example
 */
  name: 'u-dropdown',
  mixins: [mixin, props],
  data() {
    return {
      // �˵�����
      menuList: [],
      current: 0
    };
  },
  computed: {},
  created() {
    // �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö�����
    this.children = [];
  },
  methods: {
    clickHandler(item, index) {
      this.children.map((child) => {
        if (child.title === item.title) {
          // this.queryRect('u-dropdown__menu').then(size => {
          child.$emit('click');
          child.setContentAnimate(child.show ? 0 : 300);
          child.show = !child.show;
          // })
        } else {
          child.show = false;
          child.setContentAnimate(0);
        }
      });
    },
    // ��ȡ��ǩ�ijߴ�λ��
    queryRect(el) {
      // #ifndef APP-NVUE
      // $uGetRectΪuView�Դ��Ľڵ��ѯ�򻯷���https://ijry.github.io/uview-plus/.uviewui.com/js/getRect.html
      // ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ
      return new Promise((resolve) => {
        this.$uGetRect(`.${el}`).then((size) => {
          resolve(size);
        });
      });
      // #endif
      // #ifdef APP-NVUE
      // nvue�£�ʹ��domģ���ѯԪ�ظ߶�
      // ����һ��promise���õ��ô˷�����������ʹ��then�ص�
      return new Promise((resolve) => {
        dom.getComponentRect(this.$refs[el], (res) => {
          resolve(res.size);
        });
      });
      // #endif
    }
  }
+<template>
+  <view class="u-dropdown">
+    <view
+      class="u-dropdown__menu"
+      :style="{
+        height: addUnit(height)
+      }"
+      :class="{
+        'u-border-bottom': borderBottom
+      }"
+    >
+      <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+        <view class="u-flex u-flex-row">
+          <text
+            class="u-dropdown__menu__item__text"
+            :style="{
+              color: item.disabled ? '#c0c4cc' : index === current || highlightIndex == index ? activeColor : inactiveColor,
+              fontSize: addUnit(titleSize)
+            }"
+          >
+            {{ item.title }}
+          </text>
+          <view
+            class="u-dropdown__menu__item__arrow"
+            :class="{
+              'u-dropdown__menu__item__arrow--rotate': index === current
+            }"
+          >
+            <u-icon
+              :custom-style="{ display: 'flex' }"
+              :name="menuIcon"
+              :size="addUnit(menuIconSize)"
+              :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"
+            ></u-icon>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view
+      class="u-dropdown__content"
+      :style="[
+        contentStyle,
+        {
+          transition: `opacity ${duration / 1000}s, z-index ${duration / 1000}s linear`,
+          top: addUnit(height)
+        }
+      ]"
+      @tap="maskClick"
+      @touchmove.stop.prevent
+    >
+      <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle, {}]">
+        <slot></slot>
+      </view>
+      <view class="u-dropdown__content__mask"></view>
+    </view>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, getWindowInfo } from '../../libs/function/index';
+/**
+ * dropdown 下拉菜单
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ * @tutorial https://ijry.github.io/uview-plus/components/dropdown.html
+ * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+ * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+ * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+ * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+ * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+ * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+ * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+ * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+ * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+ * @event {Function} open 下拉菜单被打开时触发
+ * @event {Function} close 下拉菜单被关闭时触发
+ * @example <u-dropdown></u-dropdown>
+ */
+export default {
+  name: 'u-dropdown',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      showDropdown: true, // 是否打开下来菜单,
+      menuList: [], // 显示的菜单
+      active: false, // 下拉菜单的状态
+      // 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+      // 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+      current: 99999,
+      // 外层内容的样式，初始时处于底层，且透明
+      contentStyle: {
+        zIndex: -1,
+        opacity: 0
+      },
+      // 让某个菜单保持高亮的状态
+      highlightIndex: 99999,
+      contentHeight: 0
+    };
+  },
+  computed: {
+    // 下拉出来部分的样式
+    popupStyle() {
+      let style = {};
+      // 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+      style.transform = `translateY(${this.active ? 0 : '-100%'})`;
+      style['transition-duration'] = this.duration / 1000 + 's';
+      style.borderRadius = `0 0 ${addUnit(this.borderRadius)} ${addUnit(this.borderRadius)}`;
+      return style;
+    }
+  },
+  created() {
+    // 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
+    this.children = [];
+  },
+  mounted() {
+    this.getContentHeight();
+  },
+  emits: ['open', 'close'],
+  methods: {
+    addUnit,
+    init() {
+      // 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+      // 以保证数据的正确性
+      this.menuList = [];
+      this.children.map((child) => {
+        child.init();
+      });
+    },
+    // 点击菜单
+    menuClick(index) {
+      // 判断是否被禁用
+      if (this.menuList[index].disabled) return;
+      // 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+      if (index === this.current && this.closeOnClickSelf) {
+        this.close();
+        // 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+        setTimeout(() => {
+          this.children[index].active = false;
+        }, this.duration);
+        return;
+      }
+      this.open(index);
+    },
+    // 打开下拉菜单
+    open(index) {
+      // 嵌套popup使用时可能获取不到正确的高度，重新计算
+      if (this.contentHeight < 1) this.getContentHeight();
+      // 重置高亮索引，否则会造成多个菜单同时高亮
+      // this.highlightIndex = 9999;
+      // 展开时，设置下拉内容的样式
+      this.contentStyle = {
+        zIndex: 11,
+        height: this.contentHeight + 'px'
+      };
+      // 标记展开状态以及当前展开项的索引
+      this.active = true;
+      this.current = index;
+      // 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+      // 之所以不是因display: none，是因为nvue没有display这个属性
+      this.children.map((val, idx) => {
+        val.active = index == idx ? true : false;
+      });
+      this.$emit('open', this.current);
+    },
+    // 设置下拉菜单处于收起状态
+    close() {
+      this.$emit('close', this.current);
+      // 设置为收起状态，同时current归位，设置为空字符串
+      this.active = false;
+      this.current = 99999;
+      // 下拉内容的样式进行调整，不透明度设置为0
+      this.contentStyle.zIndex = -1;
+      this.contentStyle.opacity = 0;
+      setTimeout(() => {
+        this.contentStyle.height = 0;
+      }, this.duration);
+    },
+    // 点击遮罩
+    maskClick() {
+      // 如果不允许点击遮罩，直接返回
+      if (!this.closeOnClickMask) return;
+      this.close();
+    },
+    // 外部手动设置某个菜单高亮
+    highlight(index = undefined) {
+      this.highlightIndex = index !== undefined ? index : 99999;
+    },
+    // 获取下拉菜单内容的高度
+    getContentHeight() {
+      // 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+      // 才能让遮罩占满菜单一下，直到屏幕底部的高度
+      // getWindowInfo()为uview-plus封装的获取设备信息的方法
+      let windowHeight = getWindowInfo().windowHeight;
+      this.$uGetRect('.u-dropdown__menu').then((res) => {
+        // 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+        // H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+        // 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+        // 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+        this.contentHeight = windowHeight - res.bottom;
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>