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

package/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="u-swiper-indicator">
+    <view
+      class="u-swiper-indicator__wrapper"
+      v-if="indicatorMode === 'line'"
+      :class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
+      :style="{
+        width: $u.addUnit(lineWidth * length),
+        backgroundColor: indicatorInactiveColor
+      }"
+    >
+      <view class="u-swiper-indicator__wrapper--line__bar" :style="[lineStyle]"></view>
+    </view>
+    <view class="u-swiper-indicator__wrapper" v-if="indicatorMode === 'dot'">
+      <view
+        class="u-swiper-indicator__wrapper__dot"
+        v-for="(item, index) in length"
+        :key="index"
+        :class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
+        :style="[dotStyle(index)]"
+      ></view>
+    </view>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * SwiperIndicator 轮播图指示器
+ * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
+ * @tutorial https://ijry.github.io/uview-plus/components/swiper.html
+ * @property {String | Number}	length					轮播的长度（默认 0 ）
+ * @property {String | Number}	current					当前处于活动状态的轮播的索引（默认 0 ）
+ * @property {String}			indicatorActiveColor	指示器非激活颜色
+ * @property {String}			indicatorInactiveColor	指示器的激活颜色
+ * @property {String}			indicatorMode			指示器模式（默认 'line' ）
+ * @example	<u-swiper :list="list4" indicator keyName="url" :autoplay="false"></u-swiper>
+ */
+export default {
+  name: 'u-swiper-indicator',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      lineWidth: 22
+    };
+  },
+  computed: {
+    // 指示器为线型的样式
+    lineStyle() {
+      let style = {};
+      style.width = uni.$u.addUnit(this.lineWidth);
+      style.transform = `translateX(${uni.$u.addUnit(this.current * this.lineWidth)})`;
+      style.backgroundColor = this.indicatorActiveColor;
+      return style;
+    },
+    // 指示器为点型的样式
+    dotStyle() {
+      return (index) => {
+        let style = {};
+        style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor;
+        return style;
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,55 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 是否为加载中状态
+    loading: {
+      type: Boolean,
+      default: defprops.switch.loading
+    },
+    // 是否为禁用装填
+    disabled: {
+      type: Boolean,
+      default: defprops.switch.disabled
+    },
+    // 开关尺寸，单位px
+    size: {
+      type: [String, Number],
+      default: defprops.switch.size
+    },
+    // 打开时的背景颜色
+    activeColor: {
+      type: String,
+      default: defprops.switch.activeColor
+    },
+    // 关闭时的背景颜色
+    inactiveColor: {
+      type: String,
+      default: defprops.switch.inactiveColor
+    },
+    // 通过v-model双向绑定的值
+    value: {
+      type: [Boolean, String, Number],
+      default: defprops.switch.value
+    },
+    // switch打开时的值
+    activeValue: {
+      type: [String, Number, Boolean],
+      default: defprops.switch.activeValue
+    },
+    // switch关闭时的值
+    inactiveValue: {
+      type: [String, Number, Boolean],
+      default: defprops.switch.inactiveValue
+    },
+    // 是否开启异步变更，开启后需要手动控制输入值
+    asyncChange: {
+      type: Boolean,
+      default: defprops.switch.asyncChange
+    },
+    // 圆点与外边框的距离
+    space: {
+      type: [String, Number],
+      default: defprops.switch.space
+    }
+  }
+};

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

@@ -0,0 +1,58 @@
+/* #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-switch {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  position: relative;
+  background-color: #fff;
+  border-width: 1px;
+  border-radius: 100px;
+  transition: background-color 0.4s;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-style: solid;
+  justify-content: flex-end;
+  align-items: center;
+  overflow: hidden;
+}
+.u-switch__node {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+  background-color: #fff;
+  border-radius: 100px;
+  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+  transition-property: transform;
+  transition-duration: 0.4s;
+  transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+}
+.u-switch__bg {
+  position: absolute;
+  border-radius: 100px;
+  background-color: #ffffff;
+  transition-property: transform;
+  transition-duration: 0.4s;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  transition-timing-function: ease;
+}
+.u-switch--disabled {
+  opacity: 0.6;
+}

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

@@ -0,0 +1,48 @@
+@import '../../libs/css/components.scss';
+
+.u-switch {
+  @include flex(row);
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  position: relative;
+  background-color: #fff;
+  border-width: 1px;
+  border-radius: 100px;
+  transition: background-color 0.4s;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-style: solid;
+  justify-content: flex-end;
+  align-items: center;
+  // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
+  // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
+  overflow: hidden;
+
+  &__node {
+    @include flex(row);
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    background-color: #fff;
+    border-radius: 100px;
+    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+    transition-property: transform;
+    transition-duration: 0.4s;
+    transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+  }
+
+  &__bg {
+    position: absolute;
+    border-radius: 100px;
+    background-color: #ffffff;
+    transition-property: transform;
+    transition-duration: 0.4s;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    transition-timing-function: ease;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}

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

@@ -0,0 +1,121 @@
+<template>
+  <view
+    class="u-switch"
+    :class="[disabled && 'u-switch--disabled']"
+    :style="[switchStyle, $u.addStyle(customStyle)]"
+    @tap="clickHandler"
+  >
+    <view class="u-switch__bg" :style="[bgStyle]"></view>
+    <view class="u-switch__node" :class="[value && 'u-switch__node--on']" :style="[nodeStyle]" ref="u-switch__node">
+      <u-loading-icon
+        :show="loading"
+        mode="circle"
+        timingFunction="linear"
+        :color="value ? activeColor : '#AAABAD'"
+        :size="size * 0.6"
+      />
+    </view>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * switch 开关选择器
+ * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
+ * @tutorial https://ijry.github.io/uview-plus/components/switch.html
+ * @property {Boolean}						loading			是否处于加载中（默认 false ）
+ * @property {Boolean}						disabled		是否禁用（默认 false ）
+ * @property {String | Number}				size			开关尺寸，单位px （默认 25 ）
+ * @property {String}						activeColor		打开时的背景色 （默认 '#2979ff' ）
+ * @property {String} 						inactiveColor	关闭时的背景色 （默认 '#ffffff' ）
+ * @property {Boolean | String | Number}	value			通过v-model双向绑定的值 （默认 false ）
+ * @property {Boolean | String | Number}	activeValue		打开选择器时通过change事件发出的值 （默认 true ）
+ * @property {Boolean | String | Number}	inactiveValue	关闭选择器时通过change事件发出的值 （默认 false ）
+ * @property {Boolean}						asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
+ * @property {String | Number}				space			圆点与外边框的距离 （默认 0 ）
+ * @property {Object}						customStyle		定义需要用到的外部样式
+ *
+ * @event {Function} change 在switch打开或关闭时触发
+ * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
+ */
+export default {
+  name: 'u-switch',
+  mixins: [mpMixin, mixin, props],
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        if (n !== this.inactiveValue && n !== this.activeValue) {
+          uni.$u.error('v-model绑定的值必须为inactiveValue、activeValue二者之一');
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      bgColor: '#ffffff'
+    };
+  },
+  computed: {
+    isActive() {
+      return this.value === this.activeValue;
+    },
+    switchStyle() {
+      let style = {};
+      // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
+      style.width = uni.$u.addUnit(this.size * 2 + 2);
+      style.height = uni.$u.addUnit(Number(this.size) + 2);
+      // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
+      // 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
+      // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
+      if (this.customInactiveColor) {
+        style.borderColor = 'rgba(0, 0, 0, 0)';
+      }
+      style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor;
+      return style;
+    },
+    nodeStyle() {
+      let style = {};
+      // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
+      style.width = uni.$u.addUnit(this.size - this.space);
+      style.height = uni.$u.addUnit(this.size - this.space);
+      const translateX = this.isActive ? uni.$u.addUnit(this.space) : uni.$u.addUnit(this.size);
+      style.transform = `translateX(-${translateX})`;
+      return style;
+    },
+    bgStyle() {
+      let style = {};
+      // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
+      style.width = uni.$u.addUnit(Number(this.size) * 2 - this.size / 2);
+      style.height = uni.$u.addUnit(this.size);
+      style.backgroundColor = this.inactiveColor;
+      // 打开时，让此元素收缩，否则反之
+      style.transform = `scale(${this.isActive ? 0 : 1})`;
+      return style;
+    },
+    customInactiveColor() {
+      // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
+      return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff';
+    }
+  },
+  methods: {
+    clickHandler() {
+      if (!this.disabled && !this.loading) {
+        const oldValue = this.isActive ? this.inactiveValue : this.activeValue;
+        if (!this.asyncChange) {
+          this.$emit('input', oldValue);
+        }
+        // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+        this.$nextTick(() => {
+          this.$emit('change', oldValue);
+        });
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,45 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 当前匹配项的name
+    value: {
+      type: [String, Number, null],
+      default: defprops.tabbar.value
+    },
+    // 是否为iPhoneX留出底部安全距离
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: defprops.tabbar.safeAreaInsetBottom
+    },
+    // 是否显示上方边框
+    border: {
+      type: Boolean,
+      default: defprops.tabbar.border
+    },
+    // 元素层级z-index
+    zIndex: {
+      type: [String, Number],
+      default: defprops.tabbar.zIndex
+    },
+    // 选中标签的颜色
+    activeColor: {
+      type: String,
+      default: defprops.tabbar.activeColor
+    },
+    // 未选中标签的颜色
+    inactiveColor: {
+      type: String,
+      default: defprops.tabbar.inactiveColor
+    },
+    // 是否固定在底部
+    fixed: {
+      type: Boolean,
+      default: defprops.tabbar.fixed
+    },
+    // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
+    placeholder: {
+      type: Boolean,
+      default: defprops.tabbar.placeholder
+    }
+  }
+};

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

@@ -0,0 +1,39 @@
+/* #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-tabbar {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+}
+.u-tabbar__content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  background-color: #fff;
+}
+.u-tabbar__content__item-wrapper {
+  height: 50px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.u-tabbar--fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

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

@@ -0,0 +1,24 @@
+@import '../../libs/css/components.scss';
+
+.u-tabbar {
+  @include flex(column);
+  flex: 1;
+  justify-content: center;
+
+  &__content {
+    @include flex(column);
+    background-color: #fff;
+
+    &__item-wrapper {
+      height: 50px;
+      @include flex(row);
+    }
+  }
+
+  &--fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}

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

@@ -0,0 +1,115 @@
+<template>
+  <view class="u-tabbar">
+    <view
+      class="u-tabbar__content"
+      ref="u-tabbar__content"
+      @touchmove.stop.prevent="noop"
+      :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
+      :style="[tabbarStyle]"
+    >
+      <view class="u-tabbar__content__item-wrapper">
+        <slot />
+      </view>
+      <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
+    </view>
+    <view
+      class="u-tabbar__placeholder"
+      v-if="placeholder"
+      :style="{
+        height: placeholderHeight + 'px'
+      }"
+    ></view>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+/**
+ * Tabbar 底部导航栏
+ * @description 此组件提供了自定义tabbar的能力。
+ * @tutorial https://ijry.github.io/uview-plus/components/tabbar.html
+ * @property {String | Number}	value				当前匹配项的name
+ * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
+ * @property {Boolean}			border				是否显示上方边框（默认 true ）
+ * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
+ * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
+ * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
+ * @property {Boolean}			fixed				是否固定在底部（默认 true ）
+ * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
+ * @property {Object}			customStyle			定义需要用到的外部样式
+ *
+ * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
+ */
+export default {
+  name: 'u-tabbar',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      placeholderHeight: 0
+    };
+  },
+  computed: {
+    tabbarStyle() {
+      const style = {
+        zIndex: this.zIndex
+      };
+      // 合并来自父组件的customStyle样式
+      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+    },
+    // 监听多个参数的变化，通过在computed执行对应的操作
+    updateChild() {
+      return [this.value, this.activeColor, this.inactiveColor];
+    },
+    updatePlaceholder() {
+      return [this.fixed, this.placeholder];
+    }
+  },
+  watch: {
+    updateChild() {
+      // 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
+      this.updateChildren();
+    },
+    updatePlaceholder() {
+      // 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
+      this.setPlaceholderHeight();
+    }
+  },
+  created() {
+    this.children = [];
+  },
+  mounted() {
+    this.setPlaceholderHeight();
+  },
+  methods: {
+    updateChildren() {
+      // 如果存在子元素，则执行子元素的updateFromParent进行更新数据
+      this.children.length && this.children.map((child) => child.updateFromParent());
+    },
+    // 设置用于防止塌陷元素的高度
+    async setPlaceholderHeight() {
+      if (!this.fixed || !this.placeholder) return;
+      // 延时一定时间
+      await uni.$u.sleep(20);
+      // #ifndef APP-NVUE
+      this.$uGetRect('.u-tabbar__content').then(({ height = 50 }) => {
+        // 修复IOS safearea bottom 未填充高度
+        this.placeholderHeight = height;
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
+        const { size } = res;
+        this.placeholderHeight = size.height;
+      });
+      // #endif
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-ui/components/u-tabbar-item/props.js

@@ -0,0 +1,35 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // item标签的名称，作为与u-tabbar的value参数匹配的标识符
+    name: {
+      type: [String, Number, null],
+      default: defprops.tabbarItem.name
+    },
+    // uView内置图标或者绝对路径的图片
+    icon: {
+      icon: String,
+      default: defprops.tabbarItem.icon
+    },
+    // 右上角的角标提示信息
+    badge: {
+      type: [String, Number, null],
+      default: defprops.tabbarItem.badge
+    },
+    // 是否显示圆点，将会覆盖badge参数
+    dot: {
+      type: Boolean,
+      default: defprops.tabbarItem.dot
+    },
+    // 描述文本
+    text: {
+      type: String,
+      default: defprops.tabbarItem.text
+    },
+    // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
+    badgeStyle: {
+      type: [Object, String],
+      default: defprops.tabbarItem.badgeStyle
+    }
+  }
+};

package/uview-ui/components/u-tabbar-item/style.css

@@ -0,0 +1,39 @@
+/* #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-tabbar-item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.u-tabbar-item__icon {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  position: relative;
+  width: 150rpx;
+  justify-content: center;
+}
+.u-tabbar-item__text {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--u-content-color);
+}
+/* #ifdef MP */
+:host {
+  flex: 1;
+}
+/* #endif */

package/uview-ui/components/u-tabbar-item/style.scss

@@ -0,0 +1,28 @@
+@import '../../libs/css/components.scss';
+
+.u-tabbar-item {
+  @include flex(column);
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  &__icon {
+    @include flex;
+    position: relative;
+    width: 150rpx;
+    justify-content: center;
+  }
+
+  &__text {
+    margin-top: 2px;
+    font-size: 12px;
+    color: $u-content-color;
+  }
+}
+
+/* #ifdef MP */
+// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
+:host {
+  flex: 1;
+}
+/* #endif */