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

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

@@ -0,0 +1,20 @@
+.u-qrcode__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f7f7f7;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.u-qrcode__content {
+  position: relative;
+}
+.u-qrcode__content__canvas {
+  position: fixed;
+  top: -99999rpx;
+  left: -99999rpx;
+  z-index: -99999;
+}

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

@@ -0,0 +1,23 @@
+.u-qrcode {
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7f7f7;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  &__content {
+    position: relative;
+
+    &__canvas {
+      position: fixed;
+      top: -99999rpx;
+      left: -99999rpx;
+      z-index: -99999;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<template>
  <view class="u-qrcode" @longpress="longpress">
    <view class="u-qrcode__content" @click="preview">
      <!-- #ifndef APP-NVUE -->
      <canvas class="u-qrcode__canvas" :id="cid" :canvas-id="cid" :style="{ width: size + unit, height: size + unit }" />
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      <gcanvas class="u-qrcode__canvas" ref="gcanvess" :style="{ width: size + unit, height: size + unit }"></gcanvas>
      <!-- #endif -->
      <view v-if="showLoading && loading" class="u-qrcode__loading" :style="{ width: size + unit, height: size + unit }">
        <up-loading-icon vertical :text="loadingText" textSize="14px"></up-loading-icon>
      </view>
      <!-- <image v-show="show" :src="result" :style="{ width: size + unit, height: size + unit }" /> -->
    </view>
    <!-- <up-action-sheet :actions="list" cancelText="取消"
  </view>
  name: 'u-qrcode',
  props: {
    cid: {
      type: String,
      default: 'u-qrcode-canvas' + Math.random().toString()
    },
    size: {
      type: Number,
      default: 200
    },
    unit: {
      type: String,
      default: 'px'
    },
    show: {
      type: Boolean,
      default: true
    },
    val: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#ffffff'
    },
    foreground: {
      type: String,
      default: '#000000'
    },
    pdground: {
      type: String,
      default: '#000000'
    },
    icon: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 40
    },
    lv: {
      type: Number,
      default: 3
    },
    onval: {
      type: Boolean,
      default: true
    },
    loadMake: {
      type: Boolean,
      default: true
    },
    usingComponents: {
      type: Boolean,
      default: true
    },
    showLoading: {
      type: Boolean,
      default: true
    },
    loadingText: {
      type: String,
      default: '生成中'
    },
    allowPreview: {
      type: Boolean,
      default: false
    }
  },
  emits: ['result', 'longpress'],
  data() {
    return {
      loading: false,
      result: '',
      popupShow: false,
      list: [
        {
          name: '保存二维码'
        }
      ],
      ganvas: null,
      context: '',
      canvasObj: {}
    };
  },
  mounted: function () {
    // #ifdef APP-NVUE
    /*获取元素引用*/
    this.ganvas = this.$refs['gcanvess'];
    /*通过元素引用获取canvas对象*/
    this.canvasObj = enable(this.ganvas, {
      bridge: WeexBridge
    });
    /*获取绘图所需的上下文，目前不支持3d*/
    this.context = this.canvasObj.getContext('2d');
    // #endif
    if (this.loadMake) {
      if (!this._empty(this.val)) {
        setTimeout(() => {
          this._makeCode();
        }, 0);
      }
    }
  },
  methods: {
    _makeCode() {
      let that = this;
      if (!this._empty(this.val)) {
        // #ifndef APP-NVUE
        this.loading = true;
        // #endif
        qrcode = new QRCode({
          context: that, // 上下文环境
          canvasId: that.cid, // canvas-id
          nvueContext: that.context,
          usingComponents: that.usingComponents, // 是否是自定义组件
          showLoading: false, // 是否显示loading
          loadingText: that.loadingText, // loading文字
          text: that.val, // 生成内容
          size: that.size, // 二维码大小
          background: that.background, // 背景色
          foreground: that.foreground, // 前景色
          pdground: that.pdground, // 定位角点颜色
          correctLevel: that.lv, // 容错级别
          image: that.icon, // 二维码图标
          imageSize: that.iconSize, // 二维码图标大小
          cbResult: function (res) {
            // 生成二维码的回调
            that._result(res);
          }
        });
      } else {
        uni.showToast({
          title: '二维码内容不能为空',
          icon: 'none',
          duration: 2000
        });
      }
    },
    _clearCode() {
      this._result('');
      qrcode.clear();
    },
    _saveCode() {
      let that = this;
      if (this.result != '') {
        uni.saveImageToPhotosAlbum({
          filePath: that.result,
          success: function () {
            uni.showToast({
              title: '二维码保存成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      }
    },
    preview(e) {
      // 预览图片
      // console.log(this.result)
      if (this.allowPreview) {
        uni.previewImage({
          urls: [this.result],
          longPressActions: {
            itemList: ['保存二维码图片'],
            success: function (data) {
              // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
              switch (data.tapIndex) {
                case 0:
                  that._saveCode();
                  break;
              }
            },
            fail: function (err) {
              console.log(err.errMsg);
            }
          }
        });
      }
      this.$emit(
        'preview',
        {
          url: this.result
        },
        e
      );
    },
    longpress() {
      this.$emit('longpress', this.result);
    },
    selectClick(index) {
      switch (index) {
        case 0:
          alert('保存二维码');
          this._saveCode();
          break;
      }
    },
    _result(res) {
      this.loading = false;
      this.result = res;
      this.$emit('result', res);
    },
    _empty(v) {
      let tp = typeof v,
        rt = false;
      if (tp == 'number' && String(v) == '') {
        rt = true;
      } else if (tp == 'undefined') {
        rt = true;
      } else if (tp == 'object') {
        if (JSON.stringify(v) == '{}' || JSON.stringify(v) == '[]' || v == null) rt = true;
      } else if (tp == 'string') {
        if (v == '' || v == 'undefined' || v == 'null' || v == '{}' || v == '[]') rt = true;
      } else if (tp == 'function') {
        rt = false;
      }
      return rt;
    }
  },
  watch: {
    size: function (n, o) {
      if (n != o && !this._empty(n)) {
        this.cSize = n;
        if (!this._empty(this.val)) {
          setTimeout(() => {
            this._makeCode();
          }, 100);
        }
      }
    },
    val: function (n, o) {
      if (this.onval) {
        if (n != o && !this._empty(n)) {
          setTimeout(() => {
            this._makeCode();
          }, 0);
        }
      }
    }
  },
  computed: {}
+@import './style.css';
+</style>

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

@@ -1,70 +1,71 @@
-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: {
     // radio的名称
     name: {
       type: [String, Number, Boolean],
-      default: defprops.radio.name
+      default: () => defProps.radio.name
     },
     // 形状，square为方形，circle为圆型
     shape: {
       type: String,
-      default: defprops.radio.shape
+      default: () => defProps.radio.shape
     },
     // 是否禁用
     disabled: {
       type: [String, Boolean],
-      default: defprops.radio.disabled
+      default: () => defProps.radio.disabled
     },
     // 是否禁止点击提示语选中单选框
     labelDisabled: {
       type: [String, Boolean],
-      default: defprops.radio.labelDisabled
+      default: () => defProps.radio.labelDisabled
     },
     // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
     activeColor: {
       type: String,
-      default: defprops.radio.activeColor
+      default: () => defProps.radio.activeColor
     },
     // 未选中的颜色
     inactiveColor: {
       type: String,
-      default: defprops.radio.inactiveColor
+      default: () => defProps.radio.inactiveColor
     },
     // 图标的大小，单位px
     iconSize: {
       type: [String, Number],
-      default: defprops.radio.iconSize
+      default: () => defProps.radio.iconSize
     },
     // label的字体大小，px单位
     labelSize: {
       type: [String, Number],
-      default: defprops.radio.labelSize
+      default: () => defProps.radio.labelSize
     },
     // label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
     label: {
       type: [String, Number],
-      default: defprops.radio.label
+      default: () => defProps.radio.label
     },
     // 整体的大小
     size: {
       type: [String, Number],
-      default: defprops.radio.size
+      default: () => defProps.radio.size
     },
     // 图标颜色
     color: {
       type: String,
-      default: defprops.radio.color
+      default: () => defProps.radio.color
     },
     // label的颜色
     labelColor: {
       type: String,
-      default: defprops.radio.labelColor
+      default: () => defProps.radio.labelColor
     },
     // 图标颜色
     iconColor: {
       type: String,
-      default: defprops.radio.iconColor
+      default: () => defProps.radio.iconColor
     }
   }
-};
+});

package/uview-plus/components/u-radio/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;
@@ -83,4 +98,4 @@ view, scroll-view, swiper-item {
 }
 .u-radio__label--disabled {
   color: #c8c9cc;
-}
+}

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

@@ -1,6 +1,6 @@
 <template>
   <view
-    class="u-radio"
+    class="u-radio cursor-pointer"
     @tap.stop="wrapperClickHandler"
     :style="[radioStyle]"
     :class="[
@@ -8,28 +8,32 @@
       parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom'
     ]"
   >
-    <view class="u-radio__icon-wrap" @tap.stop="iconClickHandler" :class="iconClasses" :style="[iconWrapStyle]">
-      <slot name="icon">
+    <view class="u-radio__icon-wrap cursor-pointer" @tap.stop="iconClickHandler" :class="iconClasses" :style="[iconWrapStyle]">
+      <slot name="icon" :elIconSize="elIconSize" :elIconColor="elIconColor">
         <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 class="u-radio__label-wrap cursor-pointer" @tap.stop="labelClickHandler">
+      <slot name="label" :label="label" :elDisabled="elDisabled">
+        <text
+          class="u-radio__text"
+          :style="{
+            color: elDisabled ? elInactiveColor : elLabelColor,
+            fontSize: elLabelSize,
+            lineHeight: elLabelSize
+          }"
+        >
+          {{ label }}
+        </text>
+      </slot>
+    </view>
   </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 { addUnit, addStyle, os, deepMerge, formValidate, error } from '../../libs/function/index';
 /**
  * radio 单选框
  * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
@@ -87,8 +91,8 @@ export default {
       return this.labelDisabled !== ''
         ? this.labelDisabled
         : this.parentData.labelDisabled !== null
-        ? this.parentData.labelDisabled
-        : false;
+          ? this.parentData.labelDisabled
+          : false;
     },
     // 组件尺寸，对应size的值，默认值为21px
     elSize() {
@@ -116,7 +120,7 @@ export default {
     },
     // label大小
     elLabelSize() {
-      return uni.$u.addUnit(this.labelSize ? this.labelSize : this.parentData.labelSize ? this.parentData.labelSize : '15');
+      return 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';
@@ -149,8 +153,8 @@ export default {
       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);
+      style.width = addUnit(this.elSize);
+      style.height = addUnit(this.elSize);
       // 如果是图标在右边的话，移除它的右边距
       if (this.parentData.iconPlacement === 'right') {
         style.marginRight = 0;
@@ -160,25 +164,26 @@ export default {
     radioStyle() {
       const style = {};
       if (this.parentData.borderBottom && this.parentData.placement === 'row') {
-        uni.$u.error('检测到您将borderBottom设置为true，需要同时将u-radio-group的placement设置为column才有效');
+        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';
+        style.paddingBottom = os() === 'ios' ? '12px' : '8px';
       }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
   mounted() {
     this.init();
   },
+  emits: ['change'],
   methods: {
     init() {
       // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
       this.updateParentData();
       if (!this.parent) {
-        uni.$u.error('u-radio必须搭配u-radio-group组件使用');
+        error('u-radio必须搭配u-radio-group组件使用');
       }
       // 设置初始化时，是否默认选中的状态
       // #ifdef VUE3
@@ -217,7 +222,7 @@ export default {
         this.$emit('change', this.name);
         // 尝试调用u-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
         this.$nextTick(() => {
-          uni.$u.formValidate(this, 'change');
+          formValidate(this, 'change');
         });
       }
     },

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

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