@10yun/cv-mobile-ui 0.5.18 → 0.5.20

package/uview-ui/components/u-sticky/u-sticky.vue

@@ -0,0 +1,201 @@
+<template>
+  <view class="u-sticky" :id="elId" :style="[style]">
+    <view :style="[stickyContent]" class="u-sticky__content">
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * sticky 吸顶
+ * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+ * @tutorial https://ijry.github.io/uview-plus/components/sticky.html
+ * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
+ * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+ * @property {Boolean}			disabled		是否开启吸顶功能 （默认 false ）
+ * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
+ * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+ * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
+ * @property {Object}			customStyle		组件的样式，对象形式
+ * @event {Function} fixed		组件吸顶时触发
+ * @event {Function} unfixed	组件取消吸顶时触发
+ * @example <u-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
+ */
+export default {
+  name: 'u-sticky',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      cssSticky: false, // 是否使用css的sticky实现
+      stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+      elId: uni.$u.guid(),
+      left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+      width: 'auto',
+      height: 'auto',
+      fixed: false // js模式时，是否处于吸顶模式
+    };
+  },
+  computed: {
+    style() {
+      const style = {};
+      if (!this.disabled) {
+        if (this.cssSticky) {
+          style.position = 'sticky';
+          style.zIndex = this.uZindex;
+          style.top = uni.$u.addUnit(this.stickyTop);
+        } else {
+          style.height = this.fixed ? this.height + 'px' : 'auto';
+        }
+      } else {
+        // 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+        // #ifdef APP-NVUE
+        style.position = 'relative';
+        // #endif
+        // #ifndef APP-NVUE
+        style.position = 'static';
+        // #endif
+      }
+      style.backgroundColor = this.bgColor;
+      return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style);
+    },
+    // 吸顶内容的样式
+    stickyContent() {
+      const style = {};
+      if (!this.cssSticky) {
+        style.position = this.fixed ? 'fixed' : 'static';
+        style.top = this.stickyTop + 'px';
+        style.left = this.left + 'px';
+        style.width = this.width == 'auto' ? 'auto' : this.width + 'px';
+        style.zIndex = this.uZindex;
+      }
+      return style;
+    },
+    uZindex() {
+      return this.zIndex ? this.zIndex : uni.$u.zIndex.sticky;
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getStickyTop();
+      // 判断使用的模式
+      this.checkSupportCssSticky();
+      // 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+      if (!this.cssSticky) {
+        !this.disabled && this.initObserveContent();
+      }
+    },
+    initObserveContent() {
+      // 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+      this.$uGetRect('#' + this.elId).then((res) => {
+        this.height = res.height;
+        this.left = res.left;
+        this.width = res.width;
+        this.$nextTick(() => {
+          this.observeContent();
+        });
+      });
+    },
+    observeContent() {
+      // 先断掉之前的观察
+      this.disconnectObserver('contentObserver');
+      const contentObserver = uni.createIntersectionObserver({
+        // 检测的区间范围
+        thresholds: [0.95, 0.98, 1]
+      });
+      // 到屏幕顶部的高度时触发
+      contentObserver.relativeToViewport({
+        top: -this.stickyTop
+      });
+      // 绑定观察的元素
+      contentObserver.observe(`#${this.elId}`, (res) => {
+        this.setFixed(res.boundingClientRect.top);
+      });
+      this.contentObserver = contentObserver;
+    },
+    setFixed(top) {
+      // 判断是否出于吸顶条件范围
+      const fixed = top <= this.stickyTop;
+      this.fixed = fixed;
+    },
+    disconnectObserver(observerName) {
+      // 断掉观察，释放资源
+      const observer = this[observerName];
+      observer && observer.disconnect();
+    },
+    getStickyTop() {
+      this.stickyTop = uni.$u.getPx(this.offsetTop) + uni.$u.getPx(this.customNavHeight);
+    },
+    async checkSupportCssSticky() {
+      // #ifdef H5
+      // H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
+      if (this.checkCssStickyForH5()) {
+        this.cssSticky = true;
+      }
+      // #endif
+      // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
+      if (uni.$u.os() === 'android' && Number(uni.$u.sys().system) > 8) {
+        this.cssSticky = true;
+      }
+      // APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
+      // #ifdef APP-VUE || MP-WEIXIN
+      this.cssSticky = await this.checkComputedStyle();
+      // #endif
+      // ios上，从ios6开始，都是支持css sticky的
+      if (uni.$u.os() === 'ios') {
+        this.cssSticky = true;
+      }
+      // nvue，是支持css sticky的
+      // #ifdef APP-NVUE
+      this.cssSticky = true;
+      // #endif
+    },
+    // 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
+    checkComputedStyle() {
+      // 方法内进行判断，避免在其他平台生成无用代码
+      // #ifdef APP-VUE || MP-WEIXIN
+      return new Promise((resolve) => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('.u-sticky')
+          .fields({
+            computedStyle: ['position']
+          })
+          .exec((e) => {
+            resolve('sticky' === e[0].position);
+          });
+      });
+      // #endif
+    },
+    // H5通过创建元素的形式嗅探是否支持css sticky
+    // 判断浏览器是否支持sticky属性
+    checkCssStickyForH5() {
+      // 方法内进行判断，避免在其他平台生成无用代码
+      // #ifdef H5
+      const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
+        vendorListLength = vendorList.length,
+        stickyElement = document.createElement('div');
+      for (let i = 0; i < vendorListLength; i++) {
+        stickyElement.style.position = vendorList[i] + 'sticky';
+        if (stickyElement.style.position !== '') {
+          return true;
+        }
+      }
+      return false;
+      // #endif
+    }
+  },
+  beforeDestroy() {
+    this.disconnectObserver('contentObserver');
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-ui/components/u-subsection/props.js

@@ -0,0 +1,50 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // tab的数据
+    list: {
+      type: Array,
+      default: defprops.subsection.list
+    },
+    // 当前活动的tab的index
+    current: {
+      type: [String, Number],
+      default: defprops.subsection.current
+    },
+    // 激活的颜色
+    activeColor: {
+      type: String,
+      default: defprops.subsection.activeColor
+    },
+    // 未激活的颜色
+    inactiveColor: {
+      type: String,
+      default: defprops.subsection.inactiveColor
+    },
+    // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+    mode: {
+      type: String,
+      default: defprops.subsection.mode
+    },
+    // 字体大小
+    fontSize: {
+      type: [String, Number],
+      default: defprops.subsection.fontSize
+    },
+    // 激活tab的字体是否加粗
+    bold: {
+      type: Boolean,
+      default: defprops.subsection.bold
+    },
+    // mode = button时，组件背景颜色
+    bgColor: {
+      type: String,
+      default: defprops.subsection.bgColor
+    },
+    // 从list元素对象中读取的键名
+    keyName: {
+      type: String,
+      default: defprops.subsection.keyName
+    }
+  }
+};

package/uview-ui/components/u-subsection/style.css

@@ -0,0 +1,95 @@
+/* #ifndef APP-NVUE */
+view, scroll-view, swiper-item {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-subsection {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+}
+.u-subsection--button {
+  height: 32px;
+  background-color: #eeeeef;
+  padding: 3px;
+  border-radius: 3px;
+  align-items: stretch;
+}
+.u-subsection--button__bar {
+  background-color: #ffffff;
+  border-radius: 3px !important;
+}
+.u-subsection--subsection {
+  height: 30px;
+}
+.u-subsection__bar {
+  position: absolute;
+  /* #ifndef APP-NVUE */
+  transition-property: transform, color;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  /* #endif */
+}
+.u-subsection__bar--first {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.u-subsection__bar--center {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.u-subsection__bar--last {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.u-subsection__item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.u-subsection__item--no-border-right {
+  border-right-width: 0 !important;
+}
+.u-subsection__item--first {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.u-subsection__item--last {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.u-subsection__item__text {
+  font-size: 12px;
+  line-height: 12px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  transition-property: color;
+  transition-duration: 0.3s;
+}

package/uview-ui/components/u-subsection/style.scss

@@ -0,0 +1,90 @@
+@import '../../libs/css/components.scss';
+
+.u-subsection {
+  @include flex;
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+
+  &--button {
+    height: 32px;
+    background-color: rgb(238, 238, 239);
+    padding: 3px;
+    border-radius: 3px;
+    align-items: stretch;
+
+    &__bar {
+      background-color: #ffffff;
+      border-radius: 3px !important;
+    }
+  }
+
+  &--subsection {
+    height: 30px;
+  }
+
+  &__bar {
+    position: absolute;
+    /* #ifndef APP-NVUE */
+    transition-property: transform, color;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    /* #endif */
+
+    &--first {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    &--center {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    &--last {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
+
+  &__item {
+    @include flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+    position: relative;
+
+    &--no-border-right {
+      border-right-width: 0 !important;
+    }
+
+    &--first {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+
+    &--last {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    &__text {
+      font-size: 12px;
+      line-height: 12px;
+      @include flex;
+      align-items: center;
+      transition-property: color;
+      transition-duration: 0.3s;
+    }
+  }
+}

package/uview-ui/components/u-subsection/u-subsection.vue

@@ -0,0 +1,188 @@
+<template>
+  <view
+    class="u-subsection"
+    ref="u-subsection"
+    :class="[`u-subsection--${mode}`]"
+    :style="[$u.addStyle(customStyle), wrapperStyle]"
+  >
+    <view
+      class="u-subsection__bar"
+      ref="u-subsection__bar"
+      :style="[barStyle]"
+      :class="[
+        mode === 'button' && 'u-subsection--button__bar',
+        current === 0 && mode === 'subsection' && 'u-subsection__bar--first',
+        current > 0 && current < list.length - 1 && mode === 'subsection' && 'u-subsection__bar--center',
+        current === list.length - 1 && mode === 'subsection' && 'u-subsection__bar--last'
+      ]"
+    ></view>
+    <view
+      class="u-subsection__item"
+      :class="[
+        `u-subsection__item--${index}`,
+        index < list.length - 1 && 'u-subsection__item--no-border-right',
+        index === 0 && 'u-subsection__item--first',
+        index === list.length - 1 && 'u-subsection__item--last'
+      ]"
+      :ref="`u-subsection__item--${index}`"
+      :style="[itemStyle(index)]"
+      @tap="clickHandler(index)"
+      v-for="(item, index) in list"
+      :key="index"
+    >
+      <text class="u-subsection__item__text" :style="[textStyle(index)]">{{ getText(item) }}</text>
+    </view>
+  </view>
+</template>
+<script>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+const animation = uni.requireNativePlugin('animation');
+// #endif
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * Subsection 分段器
+ * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @tutorial https://ijry.github.io/uview-plus/components/subsection.html
+ * @property {Array}			list			tab的数据
+ * @property {String ｜ Number}	current			当前活动的tab的index（默认 0 ）
+ * @property {String}			activeColor		激活时的颜色（默认 '#3c9cff' ）
+ * @property {String}			inactiveColor	未激活时的颜色（默认 '#303133' ）
+ * @property {String}			mode			模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
+ * @property {String ｜ Number}	fontSize		字体大小，单位px（默认 12 ）
+ * @property {Boolean}			bold			激活选项的字体是否加粗（默认 true ）
+ * @property {String}			bgColor			组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
+ * @property {Object}			customStyle		定义需要用到的外部样式
+ * @property {String}	        keyName	        从`list`元素对象中读取的键名（默认 'name' ）
+ *
+ * @event {Function} change		分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
+ * @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
+ */
+export default {
+  name: 'u-subsection',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      // 组件尺寸
+      itemRect: {
+        width: 0,
+        height: 0
+      }
+    };
+  },
+  watch: {
+    list(newValue, oldValue) {
+      this.init();
+    },
+    current: {
+      immediate: true,
+      handler(n) {
+        // #ifdef APP-NVUE
+        // 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角
+        // 故用animation模块进行位移
+        const ref = this.$refs?.['u-subsection__bar']?.ref;
+        // 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改
+        uni.$u.sleep(ref ? 0 : 100).then(() => {
+          animation.transition(this.$refs['u-subsection__bar'].ref, {
+            styles: {
+              transform: `translateX(${n * this.itemRect.width}px)`,
+              transformOrigin: 'center center'
+            },
+            duration: 300
+          });
+        });
+        // #endif
+      }
+    }
+  },
+  computed: {
+    wrapperStyle() {
+      const style = {};
+      // button模式时，设置背景色
+      if (this.mode === 'button') {
+        style.backgroundColor = this.bgColor;
+      }
+      return style;
+    },
+    // 滑块的样式
+    barStyle() {
+      const style = {};
+      style.width = `${this.itemRect.width}px`;
+      style.height = `${this.itemRect.height}px`;
+      // 通过translateX移动滑块，其移动的距离为索引*item的宽度
+      // #ifndef APP-NVUE
+      style.transform = `translateX(${this.current * this.itemRect.width}px)`;
+      // #endif
+      if (this.mode === 'subsection') {
+        // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
+        style.backgroundColor = this.activeColor;
+      }
+      return style;
+    },
+    // 分段器item的样式
+    itemStyle(index) {
+      return (index) => {
+        const style = {};
+        if (this.mode === 'subsection') {
+          // 设置border的样式
+          style.borderColor = this.activeColor;
+          style.borderWidth = '1px';
+          style.borderStyle = 'solid';
+        }
+        return style;
+      };
+    },
+    // 分段器文字颜色
+    textStyle(index) {
+      return (index) => {
+        const style = {};
+        style.fontWeight = this.bold && this.current === index ? 'bold' : 'normal';
+        style.fontSize = uni.$u.addUnit(this.fontSize);
+        // subsection模式下，激活时默认为白色的文字
+        if (this.mode === 'subsection') {
+          style.color = this.current === index ? '#fff' : this.inactiveColor;
+        } else {
+          // button模式下，激活时文字颜色默认为activeColor
+          style.color = this.current === index ? this.activeColor : this.inactiveColor;
+        }
+        return style;
+      };
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      uni.$u.sleep().then(() => this.getRect());
+    },
+    // 判断展示文本
+    getText(item) {
+      return typeof item === 'object' ? item[this.keyName] : item;
+    },
+    // 获取组件的尺寸
+    getRect() {
+      // #ifndef APP-NVUE
+      this.$uGetRect('.u-subsection__item--0').then((size) => {
+        this.itemRect = size;
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      const ref = this.$refs['u-subsection__item--0'][0];
+      ref &&
+        dom.getComponentRect(ref, (res) => {
+          this.itemRect = res.size;
+        });
+      // #endif
+    },
+    clickHandler(index) {
+      this.$emit('change', index);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-ui/components/u-swipe-action/props.js

@@ -0,0 +1,10 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 是否自动关闭其他swipe按钮组
+    autoClose: {
+      type: Boolean,
+      default: defprops.swipeAction.autoClose
+    }
+  }
+};

package/uview-ui/components/u-swipe-action/u-swipe-action.vue

@@ -0,0 +1,65 @@
+<template>
+  <view class="u-swipe-action">
+    <slot></slot>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * SwipeAction 滑动单元格
+ * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
+ * @tutorial https://ijry.github.io/uview-plus/components/swipeAction.html
+ * @property {Boolean}	autoClose	是否自动关闭其他swipe按钮组
+ * @event {Function(index)}	click	点击组件时触发
+ * @example	<u-swipe-action><u-swipe-action-item :rightOptions="options1" ></u-swipe-action-item></u-swipe-action>
+ */
+export default {
+  name: 'u-swipe-action',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {};
+  },
+  provide() {
+    return {
+      swipeAction: this
+    };
+  },
+  computed: {
+    // 这里computed的变量，都是子组件u-swipe-action-item需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+    // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-swipe-action-item)
+    // 拉取父组件新的变化后的参数
+    parentData() {
+      return [this.autoClose];
+    }
+  },
+  watch: {
+    // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+    parentData() {
+      if (this.children.length) {
+        this.children.map((child) => {
+          // 判断子组件(u-swipe-action-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+          typeof child.updateParentData === 'function' && child.updateParentData();
+        });
+      }
+    }
+  },
+  created() {
+    this.children = [];
+  },
+  methods: {
+    closeOther(child) {
+      if (this.autoClose) {
+        // 历遍所有的单元格，找出非当前操作中的单元格，进行关闭
+        this.children.map((item, index) => {
+          if (child !== item) {
+            item.closeHandler();
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+<style scoped></style>