@10yun/cv-mobile-ui 0.5.17 → 0.5.19

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

@@ -0,0 +1,238 @@
+<template>
+  <view
+    class="u-radio"
+    @tap.stop="wrapperClickHandler"
+    :style="[radioStyle]"
+    :class="[
+      `u-radio-label--${parentData.iconPlacement}`,
+      parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom'
+    ]"
+  >
+    <view class="u-radio__icon-wrap" @tap.stop="iconClickHandler" :class="iconClasses" :style="[iconWrapStyle]">
+      <slot name="icon">
+        <u-icon class="u-radio__icon-wrap__icon" name="checkbox-mark" :size="elIconSize" :color="elIconColor" />
+      </slot>
+    </view>
+    <text
+      class="u-radio__text"
+      @tap.stop="labelClickHandler"
+      :style="{
+        color: elDisabled ? elInactiveColor : elLabelColor,
+        fontSize: elLabelSize,
+        lineHeight: elLabelSize
+      }"
+    >
+      {{ label }}
+    </text>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * radio 单选框
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
+ * @tutorial https://ijry.github.io/uview-plus/components/radio.html
+ * @property {String | Number}	name			radio的名称
+ * @property {String}			shape			形状，square为方形，circle为圆型
+ * @property {Boolean}			disabled		是否禁用
+ * @property {String | Boolean}	labelDisabled	是否禁止点击提示语选中单选框
+ * @property {String}			activeColor		选中时的颜色，如设置parent的active-color将失效
+ * @property {String}			inactiveColor	未选中的颜色
+ * @property {String | Number}	iconSize		图标大小，单位px
+ * @property {String | Number}	labelSize		label字体大小，单位px
+ * @property {String | Number}	label			label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+ * @property {String | Number}	size			整体的大小
+ * @property {String}			iconColor		图标颜色
+ * @property {String}			labelColor		label的颜色
+ * @property {Object}			customStyle		组件的样式，对象形式
+ *
+ * @event {Function} change 某个radio状态发生变化时触发(选中状态)
+ * @example <u-radio :labelDisabled="false">门掩黄昏，无计留春住</u-radio>
+ */
+export default {
+  name: 'u-radio',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      checked: false,
+      // 当你看到这段代码的时候，
+      // 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
+      // 故只能使用如此方法
+      parentData: {
+        iconSize: 12,
+        labelDisabled: null,
+        disabled: null,
+        shape: null,
+        activeColor: null,
+        inactiveColor: null,
+        size: 18,
+        value: null,
+        modelValue: null,
+        iconColor: null,
+        placement: 'row',
+        borderBottom: false,
+        iconPlacement: 'left'
+      }
+    };
+  },
+  computed: {
+    // 是否禁用，如果父组件u-raios-group禁用的话，将会忽略子组件的配置
+    elDisabled() {
+      return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
+    },
+    // 是否禁用label点击
+    elLabelDisabled() {
+      return this.labelDisabled !== ''
+        ? this.labelDisabled
+        : this.parentData.labelDisabled !== null
+        ? this.parentData.labelDisabled
+        : false;
+    },
+    // 组件尺寸，对应size的值，默认值为21px
+    elSize() {
+      return this.size ? this.size : this.parentData.size ? this.parentData.size : 21;
+    },
+    // 组件的勾选图标的尺寸，默认12px
+    elIconSize() {
+      return this.iconSize ? this.iconSize : this.parentData.iconSize ? this.parentData.iconSize : 12;
+    },
+    // 组件选中激活时的颜色
+    elActiveColor() {
+      return this.activeColor ? this.activeColor : this.parentData.activeColor ? this.parentData.activeColor : '#2979ff';
+    },
+    // 组件选未中激活时的颜色
+    elInactiveColor() {
+      return this.inactiveColor ? this.inactiveColor : this.parentData.inactiveColor ? this.parentData.inactiveColor : '#c8c9cc';
+    },
+    // label的颜色
+    elLabelColor() {
+      return this.labelColor ? this.labelColor : this.parentData.labelColor ? this.parentData.labelColor : '#606266';
+    },
+    // 组件的形状
+    elShape() {
+      return this.shape ? this.shape : this.parentData.shape ? this.parentData.shape : 'circle';
+    },
+    // label大小
+    elLabelSize() {
+      return uni.$u.addUnit(this.labelSize ? this.labelSize : this.parentData.labelSize ? this.parentData.labelSize : '15');
+    },
+    elIconColor() {
+      const iconColor = this.iconColor ? this.iconColor : this.parentData.iconColor ? this.parentData.iconColor : '#ffffff';
+      // 图标的颜色
+      if (this.elDisabled) {
+        // disabled状态下，已勾选的radio图标改为elInactiveColor
+        return this.checked ? this.elInactiveColor : 'transparent';
+      } else {
+        return this.checked ? iconColor : 'transparent';
+      }
+    },
+    iconClasses() {
+      let classes = [];
+      // 组件的形状
+      classes.push('u-radio__icon-wrap--' + this.elShape);
+      if (this.elDisabled) {
+        classes.push('u-radio__icon-wrap--disabled');
+      }
+      if (this.checked && this.elDisabled) {
+        classes.push('u-radio__icon-wrap--disabled--checked');
+      }
+      // 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+      // #ifdef MP-ALIPAY || MP-TOUTIAO
+      classes = classes.join(' ');
+      // #endif
+      return classes;
+    },
+    iconWrapStyle() {
+      // radio的整体样式
+      const style = {};
+      style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff';
+      style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor;
+      style.width = uni.$u.addUnit(this.elSize);
+      style.height = uni.$u.addUnit(this.elSize);
+      // 如果是图标在右边的话，移除它的右边距
+      if (this.parentData.iconPlacement === 'right') {
+        style.marginRight = 0;
+      }
+      return style;
+    },
+    radioStyle() {
+      const style = {};
+      if (this.parentData.borderBottom && this.parentData.placement === 'row') {
+        uni.$u.error('检测到您将borderBottom设置为true，需要同时将u-radio-group的placement设置为column才有效');
+      }
+      // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+      if (this.parentData.borderBottom && this.parentData.placement === 'column') {
+        // ios像素密度高，需要多一点的距离
+        style.paddingBottom = uni.$u.os() === 'ios' ? '12px' : '8px';
+      }
+      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+      this.updateParentData();
+      if (!this.parent) {
+        uni.$u.error('u-radio必须搭配u-radio-group组件使用');
+      }
+      // 设置初始化时，是否默认选中的状态
+      // #ifdef VUE3
+      this.checked = this.name === this.parentData.modelValue;
+      // #endif
+      // #ifdef VUE2
+      this.checked = this.name === this.parentData.value;
+      // #endif
+    },
+    updateParentData() {
+      this.getParentData('u-radio-group');
+    },
+    // 点击图标
+    iconClickHandler(e) {
+      this.preventEvent(e);
+      // 如果整体被禁用，不允许被点击
+      if (!this.elDisabled) {
+        this.setRadioCheckedStatus();
+      }
+    },
+    // 横向两端排列时，点击组件即可触发选中事件
+    wrapperClickHandler(e) {
+      this.parentData.iconPlacement === 'right' && this.iconClickHandler(e);
+    },
+    // 点击label
+    labelClickHandler(e) {
+      this.preventEvent(e);
+      // 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
+      if (!this.elLabelDisabled && !this.elDisabled) {
+        this.setRadioCheckedStatus();
+      }
+    },
+    emitEvent() {
+      // u-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
+      if (!this.checked) {
+        this.$emit('change', this.name);
+        // 尝试调用u-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
+        this.$nextTick(() => {
+          uni.$u.formValidate(this, 'change');
+        });
+      }
+    },
+    // 改变组件选中状态
+    // 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有u-radio实例
+    // 将本组件外的其他u-radio的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
+    setRadioCheckedStatus() {
+      this.emitEvent();
+      // 将本组件标记为选中状态
+      this.checked = true;
+      typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-radio-group/props.js

@@ -0,0 +1,94 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // #ifdef VUE3
+    // 绑定的值
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: defprops.radioGroup.value
+    },
+    // #endif
+    // #ifdef VUE2
+    // 绑定的值
+    value: {
+      type: [String, Number, Boolean],
+      default: defprops.radioGroup.value
+    },
+    // #endif
+    // 是否禁用全部radio
+    disabled: {
+      type: Boolean,
+      default: defprops.radioGroup.disabled
+    },
+    // 形状，circle-圆形，square-方形
+    shape: {
+      type: String,
+      default: defprops.radioGroup.shape
+    },
+    // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+    activeColor: {
+      type: String,
+      default: defprops.radioGroup.activeColor
+    },
+    // 未选中的颜色
+    inactiveColor: {
+      type: String,
+      default: defprops.radioGroup.inactiveColor
+    },
+    // 标识符
+    name: {
+      type: String,
+      default: defprops.radioGroup.name
+    },
+    // 整个组件的尺寸，默认px
+    size: {
+      type: [String, Number],
+      default: defprops.radioGroup.size
+    },
+    // 布局方式，row-横向，column-纵向
+    placement: {
+      type: String,
+      default: defprops.radioGroup.placement
+    },
+    // label的文本
+    label: {
+      type: [String],
+      default: defprops.radioGroup.label
+    },
+    // label的颜色 （默认 '#303133' ）
+    labelColor: {
+      type: [String],
+      default: defprops.radioGroup.labelColor
+    },
+    // label的字体大小，px单位
+    labelSize: {
+      type: [String, Number],
+      default: defprops.radioGroup.labelSize
+    },
+    // 是否禁止点击文本操作checkbox(默认 false )
+    labelDisabled: {
+      type: Boolean,
+      default: defprops.radioGroup.labelDisabled
+    },
+    // 图标颜色
+    iconColor: {
+      type: String,
+      default: defprops.radioGroup.iconColor
+    },
+    // 图标的大小，单位px
+    iconSize: {
+      type: [String, Number],
+      default: defprops.radioGroup.iconSize
+    },
+    // 竖向配列时，是否显示下划线
+    borderBottom: {
+      type: Boolean,
+      default: defprops.radioGroup.borderBottom
+    },
+    // 图标与文字的对齐方式
+    iconPlacement: {
+      type: String,
+      default: defprops.radio.iconPlacement
+    }
+  }
+};

package/uview-plus/components/u-radio-group/style.css

@@ -0,0 +1,26 @@
+/* #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-radio-group {
+  flex: 1;
+}
+.u-radio-group--row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-flow: row wrap;
+}
+.u-radio-group--column {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}

package/uview-plus/components/u-radio-group/style.scss

@@ -0,0 +1,16 @@
+@import '../../libs/css/components.scss';
+
+.u-radio-group {
+  flex: 1;
+
+  &--row {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-flow: row wrap;
+  }
+
+  &--column {
+    @include flex(column);
+  }
+}

package/uview-plus/components/u-radio-group/u-radio-group.vue

@@ -0,0 +1,121 @@
+<template>
+  <view class="u-radio-group" :class="bemClass">
+    <slot></slot>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * radioRroup 单选框父组件
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
+ * @tutorial https://ijry.github.io/uview-plus/components/radio.html
+ * @property {String | Number | Boolean}	value 			绑定的值
+ * @property {Boolean}						disabled		是否禁用所有radio（默认 false ）
+ * @property {String}						shape			外观形状，shape-方形，circle-圆形(默认 circle )
+ * @property {String}						activeColor		选中时的颜色，应用到所有子Radio组件（默认 '#2979ff' ）
+ * @property {String}						inactiveColor	未选中的颜色 (默认 '#c8c9cc' )
+ * @property {String}						name			标识符
+ * @property {String | Number}				size			组件整体的大小，单位px（默认 18 ）
+ * @property {String}						placement		布局方式，row-横向，column-纵向 （默认 'row' ）
+ * @property {String}						label			文本
+ * @property {String}						labelColor		label的颜色 （默认 '#303133' ）
+ * @property {String | Number}				labelSize		label的字体大小，px单位 （默认 14 ）
+ * @property {Boolean}						labelDisabled	是否禁止点击文本操作checkbox(默认 false )
+ * @property {String}						iconColor		图标颜色 （默认 '#ffffff' ）
+ * @property {String | Number}				iconSize		图标的大小，单位px （默认 12 ）
+ * @property {Boolean}						borderBottom	placement为row时，是否显示下边框 （默认 false ）
+ * @property {String}						iconPlacement	图标与文字的对齐方式 （默认 'left' ）
+ * @property {Object}						customStyle		组件的样式，对象形式
+ * @event {Function} change 任一个radio状态发生变化时触发
+ * @example <u-radio-group v-model="value"></u-radio-group>
+ */
+export default {
+  name: 'u-radio-group',
+  mixins: [mpMixin, mixin, props],
+  computed: {
+    // 这里computed的变量，都是子组件u-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+    // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-radio-group)
+    // 拉取父组件新的变化后的参数
+    parentData() {
+      // #ifdef VUE3
+      return [
+        this.modelValue,
+        this.disabled,
+        this.inactiveColor,
+        this.activeColor,
+        this.size,
+        this.labelDisabled,
+        this.shape,
+        this.iconSize,
+        this.borderBottom,
+        this.placement
+      ];
+      // #endif
+      // #ifdef VUE2
+      return [
+        this.value,
+        this.disabled,
+        this.inactiveColor,
+        this.activeColor,
+        this.size,
+        this.labelDisabled,
+        this.shape,
+        this.iconSize,
+        this.borderBottom,
+        this.placement
+      ];
+      // #endif
+    },
+    bemClass() {
+      // this.bem为一个computed变量，在mixin中
+      return this.bem('radio-group', ['placement']);
+    }
+  },
+  watch: {
+    // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+    parentData() {
+      if (this.children.length) {
+        this.children.map((child) => {
+          // 判断子组件(u-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+          typeof child.init === 'function' && child.init();
+        });
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    this.children = [];
+  },
+  // #ifdef VUE3
+  emits: ['update:modelValue', 'change'],
+  // #endif
+  methods: {
+    // 将其他的radio设置为未选中的状态
+    unCheckedOther(childInstance) {
+      this.children.map((child) => {
+        // 所有子radio中，被操作组件实例的checked的值无需修改
+        if (childInstance !== child) {
+          child.checked = false;
+        }
+      });
+      const { name } = childInstance;
+      // 通过emit事件，设置父组件通过v-model双向绑定的值
+      // #ifdef VUE3
+      this.$emit('update:modelValue', name);
+      // #endif
+      // #ifdef VUE2
+      this.$emit('input', name);
+      // #endif
+      // 发出事件
+      this.$emit('change', name);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,79 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // #ifdef VUE3
+    // 用于v-model双向绑定选中的星星数量
+    modelValue: {
+      type: [String, Number],
+      default: defprops.rate.value
+    },
+    // #endif
+    // #ifdef VUE2
+    // 用于v-model双向绑定选中的星星数量
+    value: {
+      type: [String, Number],
+      default: defprops.rate.value
+    },
+    // #endif
+    // 要显示的星星数量
+    count: {
+      type: [String, Number],
+      default: defprops.rate.count
+    },
+    // 是否不可选中
+    disabled: {
+      type: Boolean,
+      default: defprops.rate.disabled
+    },
+    // 是否只读
+    readonly: {
+      type: Boolean,
+      default: defprops.rate.readonly
+    },
+    // 星星的大小，单位px
+    size: {
+      type: [String, Number],
+      default: defprops.rate.size
+    },
+    // 未选中时的颜色
+    inactiveColor: {
+      type: String,
+      default: defprops.rate.inactiveColor
+    },
+    // 选中的颜色
+    activeColor: {
+      type: String,
+      default: defprops.rate.activeColor
+    },
+    // 星星之间的间距，单位px
+    gutter: {
+      type: [String, Number],
+      default: defprops.rate.gutter
+    },
+    // 最少能选择的星星个数
+    minCount: {
+      type: [String, Number],
+      default: defprops.rate.minCount
+    },
+    // 是否允许半星
+    allowHalf: {
+      type: Boolean,
+      default: defprops.rate.allowHalf
+    },
+    // 选中时的图标(星星)
+    activeIcon: {
+      type: String,
+      default: defprops.rate.activeIcon
+    },
+    // 未选中时的图标(星星)
+    inactiveIcon: {
+      type: String,
+      default: defprops.rate.inactiveIcon
+    },
+    // 是否可以通过滑动手势选择评分
+    touchable: {
+      type: Boolean,
+      default: defprops.rate.touchable
+    }
+  }
+};

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

@@ -0,0 +1,43 @@
+/* #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-rate {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  /* #ifndef APP-NVUE */
+  touch-action: none;
+  /* #endif */
+}
+.u-rate__content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.u-rate__content__item {
+  position: relative;
+}
+.u-rate__content__item__icon-wrap--half {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+}
+.u-icon {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}

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

@@ -0,0 +1,38 @@
+@import '../../libs/css/components.scss';
+$u-rate-margin: 0 !default;
+$u-rate-padding: 0 !default;
+$u-rate-item-icon-wrap-half-top: 0 !default;
+$u-rate-item-icon-wrap-half-left: 0 !default;
+
+.u-rate {
+  @include flex;
+  align-items: center;
+  margin: $u-rate-margin;
+  padding: $u-rate-padding;
+  /* #ifndef APP-NVUE */
+  touch-action: none;
+  /* #endif */
+
+  &__content {
+    @include flex;
+
+    &__item {
+      position: relative;
+
+      &__icon-wrap {
+        &--half {
+          position: absolute;
+          overflow: hidden;
+          top: $u-rate-item-icon-wrap-half-top;
+          left: $u-rate-item-icon-wrap-half-left;
+        }
+      }
+    }
+  }
+}
+
+.u-icon {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}