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

package/uview-plus/components/u-transition-wu/createAnimation.js

@@ -0,0 +1,148 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation');
+// #endif
+class MPAnimation {
+  constructor(options, _this) {
+    this.options = options;
+    // 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
+    this.animation = uni.createAnimation({
+      ...options
+    });
+    this.currentStepAnimates = {};
+    this.next = 0;
+    this.$ = _this;
+  }
+
+  _nvuePushAnimates(type, args) {
+    let aniObj = this.currentStepAnimates[this.next];
+    let styles = {};
+    if (!aniObj) {
+      styles = {
+        styles: {},
+        config: {}
+      };
+    } else {
+      styles = aniObj;
+    }
+    if (animateTypes1.includes(type)) {
+      if (!styles.styles.transform) {
+        styles.styles.transform = '';
+      }
+      let unit = '';
+      if (type === 'rotate') {
+        unit = 'deg';
+      }
+      styles.styles.transform += `${type}(${args + unit}) `;
+    } else {
+      styles.styles[type] = `${args}`;
+    }
+    this.currentStepAnimates[this.next] = styles;
+  }
+  _animateRun(styles = {}, config = {}) {
+    let ref = this.$.$refs['ani'].ref;
+    if (!ref) return;
+    return new Promise((resolve, reject) => {
+      nvueAnimation.transition(
+        ref,
+        {
+          styles,
+          ...config
+        },
+        (res) => {
+          resolve();
+        }
+      );
+    });
+  }
+
+  _nvueNextAnimate(animates, step = 0, fn) {
+    let obj = animates[step];
+    if (obj) {
+      let { styles, config } = obj;
+      this._animateRun(styles, config).then(() => {
+        step += 1;
+        this._nvueNextAnimate(animates, step, fn);
+      });
+    } else {
+      this.currentStepAnimates = {};
+      typeof fn === 'function' && fn();
+      this.isEnd = true;
+    }
+  }
+
+  step(config = {}) {
+    // #ifndef APP-NVUE
+    this.animation.step(config);
+    // #endif
+    // #ifdef APP-NVUE
+    this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config);
+    this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin;
+    this.next++;
+    // #endif
+    return this;
+  }
+
+  run(fn) {
+    // #ifndef APP-NVUE
+    this.$.animationData = this.animation.export();
+    this.$.timer = setTimeout(() => {
+      typeof fn === 'function' && fn();
+    }, this.$.durationTime);
+    // #endif
+    // #ifdef APP-NVUE
+    this.isEnd = false;
+    let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref;
+    if (!ref) return;
+    this._nvueNextAnimate(this.currentStepAnimates, 0, fn);
+    this.next = 0;
+    // #endif
+  }
+}
+
+const animateTypes1 = [
+  'matrix',
+  'matrix3d',
+  'rotate',
+  'rotate3d',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'scale',
+  'scale3d',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'skew',
+  'skewX',
+  'skewY',
+  'translate',
+  'translate3d',
+  'translateX',
+  'translateY',
+  'translateZ'
+];
+const animateTypes2 = ['opacity', 'backgroundColor'];
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'];
+animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
+  MPAnimation.prototype[type] = function (...args) {
+    // #ifndef APP-NVUE
+    this.animation[type](...args);
+    // #endif
+    // #ifdef APP-NVUE
+    this._nvuePushAnimates(type, args);
+    // #endif
+    return this;
+  };
+});
+
+export function createAnimation(option, _this) {
+  if (!_this) return;
+  clearTimeout(_this.timer);
+  return new MPAnimation(option, _this);
+}

package/uview-plus/components/u-transition-wu/props.js

@@ -0,0 +1,32 @@
+export default {
+  props: {
+    // 是否展示组件
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 使用的动画模式
+    mode: {
+      type: [Array, String, null],
+      default() {
+        return 'fade';
+      }
+    },
+    // 动画的执行时间，单位ms
+    duration: {
+      type: [String, Number],
+      default: 300
+    },
+    // 使用的动画过渡函数
+    timingFunction: {
+      type: String,
+      default: 'ease-out'
+    },
+    // 自定义class属性
+    customClass: {
+      type: String,
+      default: ''
+    },
+    ...uni.$w?.props?.transition
+  }
+};

package/uview-plus/components/u-transition-wu/u-transition.vue

@@ -0,0 +1,300 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script>
+import { createAnimation } from './createAnimation';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+/**
+ * transition 过渡动画
+ * @description 过渡动画组件
+ * @tutorial https://ijry.github.io/uview-plus/components/transition.html
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} mode = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间，单位ms(默认300)
+ * @property {String} timingFunction 使用的动画过渡函数 （默认 'ease-out' ）
+ * @property {Object} customStyle	自定义样式
+ * @property {String} customClass	自定义类名
+ * @event {Function} click 点击组件触发
+ * @event {Function} change	过渡动画结束时触发
+ */
+export default {
+  name: 'u-transition',
+  mixins: [mpMixin, mixin],
+  emits: ['click', 'change'],
+  props: {
+    // 是否展示组件
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 使用的动画模式
+    mode: {
+      type: [Array, String, null],
+      default() {
+        return 'fade';
+      }
+    },
+    // 动画的执行时间，单位ms
+    duration: {
+      type: [String, Number],
+      default: 300
+    },
+    // 使用的动画过渡函数
+    timingFunction: {
+      type: String,
+      default: 'ease-out'
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    // nvue模式下 是否直接显示，在u-list等cell下面使用就需要设置
+    cellChild: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      transform: '',
+      opacity: 1,
+      animationData: {},
+      durationTime: 300,
+      config: {}
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.open();
+        } else {
+          // 避免上来就执行 close,导致动画错乱
+          if (this.isShow) {
+            this.close();
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // 生成样式数据
+    stylesObject() {
+      let styles = {
+        ...this.customStyle,
+        'transition-duration': this.duration / 1000 + 's'
+      };
+      let transform = '';
+      for (let i in styles) {
+        let line = this.toLine(i);
+        transform += line + ':' + styles[i] + ';';
+      }
+      return transform;
+    },
+    // 初始化动画条件
+    transformStyles() {
+      return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject;
+    }
+  },
+  created() {
+    // 动画默认配置
+    this.config = {
+      duration: this.duration,
+      timingFunction: 'ease',
+      transformOrigin: '50% 50%',
+      delay: 0
+    };
+    this.durationTime = this.duration;
+  },
+  methods: {
+    /**
+     *  ref 触发 初始化动画
+     */
+    init(obj = {}) {
+      if (obj.duration) {
+        this.durationTime = obj.duration;
+      }
+      this.animation = createAnimation(Object.assign(this.config, obj), this);
+    },
+    /**
+     * 点击组件触发回调
+     */
+    onClick() {
+      this.$emit('click', {
+        detail: this.isShow
+      });
+    },
+    /**
+     * ref 触发 动画分组
+     * @param {Object} obj
+     */
+    step(obj, config = {}) {
+      if (!this.animation) return;
+      for (let i in obj) {
+        try {
+          if (typeof obj[i] === 'object') {
+            this.animation[i](...obj[i]);
+          } else {
+            this.animation[i](obj[i]);
+          }
+        } catch (e) {
+          console.error(`方法 ${i} 不存在`);
+        }
+      }
+      this.animation.step(config);
+      return this;
+    },
+    /**
+     *  ref 触发 执行动画
+     */
+    run(fn) {
+      if (!this.animation) return;
+      this.animation.run(fn);
+    },
+    // 开始过度动画
+    open() {
+      clearTimeout(this.timer);
+      this.transform = '';
+      this.isShow = true;
+      let { opacity, transform } = this.styleInit(false);
+      if (typeof opacity !== 'undefined') {
+        this.opacity = opacity;
+      }
+      this.transform = transform;
+      // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+      this.$nextTick(() => {
+        // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+        this.timer = setTimeout(() => {
+          this.animation = createAnimation(this.config, this);
+          this.tranfromInit(false).step();
+          this.animation.run();
+          this.$emit('change', {
+            detail: this.isShow
+          });
+        }, 20);
+      });
+    },
+    // 关闭过度动画
+    close(type) {
+      if (!this.animation) return;
+      this.tranfromInit(true)
+        .step()
+        .run(() => {
+          this.isShow = false;
+          this.animationData = null;
+          this.animation = null;
+          let { opacity, transform } = this.styleInit(false);
+          this.opacity = opacity || 1;
+          this.transform = transform;
+          this.$emit('change', {
+            detail: this.isShow
+          });
+        });
+    },
+    // 处理动画开始前的默认样式
+    styleInit(type) {
+      let styles = {
+        transform: ''
+      };
+      let buildStyle = (type, mode) => {
+        if (mode === 'fade') {
+          styles.opacity = this.animationType(type)[mode];
+        } else {
+          styles.transform += this.animationType(type)[mode] + ' ';
+        }
+      };
+      if (typeof this.mode === 'string') {
+        buildStyle(type, this.mode);
+      } else {
+        this.mode.forEach((mode) => {
+          buildStyle(type, mode);
+        });
+      }
+      return styles;
+    },
+    // 处理内置组合动画
+    tranfromInit(type) {
+      let buildTranfrom = (type, mode) => {
+        let aniNum = null;
+        if (mode === 'fade') {
+          aniNum = type ? 0 : 1;
+        } else {
+          aniNum = type ? '-100%' : '0';
+          if (mode === 'zoom-in') {
+            aniNum = type ? 0.8 : 1;
+          }
+          if (mode === 'zoom-out') {
+            aniNum = type ? 1.2 : 1;
+          }
+          if (mode === 'slide-right') {
+            aniNum = type ? '100%' : '0';
+          }
+          if (mode === 'slide-bottom') {
+            aniNum = type ? '100%' : '0';
+          }
+        }
+
+        this.animation[this.animationMode()[mode]](aniNum);
+      };
+      if (typeof this.mode === 'string') {
+        buildTranfrom(type, this.mode);
+      } else {
+        this.mode.forEach((mode) => {
+          buildTranfrom(type, mode);
+        });
+      }
+
+      return this.animation;
+    },
+    animationType(type) {
+      return {
+        fade: type ? 1 : 0,
+        'slide-top': `translateY(${type ? '0' : '-100%'})`,
+        'slide-right': `translateX(${type ? '0' : '100%'})`,
+        'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+        'slide-left': `translateX(${type ? '0' : '-100%'})`,
+        'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+        'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+      };
+    },
+    // 内置动画类型与实际动画对应字典
+    animationMode() {
+      return {
+        fade: 'opacity',
+        'slide-top': 'translateY',
+        'slide-right': 'translateX',
+        'slide-bottom': 'translateY',
+        'slide-left': 'translateX',
+        'zoom-in': 'scale',
+        'zoom-out': 'scale'
+      };
+    },
+    // 驼峰转中横线
+    toLine(name) {
+      return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+  }
+};
+</script>
+
+<style></style>

package/uview-plus/components/u-upload/mixin.js

@@ -1,4 +1,6 @@
-export default {
+import { error } from '../../libs/function/index'
+
+export const mixinUpload = {
     watch: {
         // 监听accept的变化，判断是否符合个平台要求
         // 只有微信小程序才支持选择媒体，文件类型，所以这里做一个判断提示
@@ -7,15 +9,15 @@ export default {
             handler(val) {
                 // #ifndef MP-WEIXIN
                 if (val === 'all' || val === 'media') {
-                    uni.$u.error('只有微信小程序才支持把accept配置为all、media之一')
+                    error('只有微信小程序才支持把accept配置为all、media之一')
                 }
                 // #endif
                 // #ifndef H5 || MP-WEIXIN
                 if (val === 'file') {
-                    uni.$u.error('只有微信小程序和H5(HX2.9.9)才支持把accept配置为file')
+                    error('只有微信小程序和H5(HX2.9.9)才支持把accept配置为file')
                 }
                 // #endif
             }
         }
     }
-}
+}

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

@@ -1,45 +1,50 @@
-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: {
     // 接受的文件类型, 可选值为all media image file video
     accept: {
       type: String,
-      default: defprops.upload.accept
+      default: () => defProps.upload.accept
+    },
+    extension: {
+      type: Array,
+      default: () => defProps.upload.extension
     },
     // 	图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头
     capture: {
       type: [String, Array],
-      default: defprops.upload.capture
+      default: () => defProps.upload.capture
     },
     // 当accept为video时生效，是否压缩视频，默认为true
     compressed: {
       type: Boolean,
-      default: defprops.upload.compressed
+      default: () => defProps.upload.compressed
     },
     // 当accept为video时生效，可选值为back或front
     camera: {
       type: String,
-      default: defprops.upload.camera
+      default: () => defProps.upload.camera
     },
     // 当accept为video时生效，拍摄视频最长拍摄时间，单位秒
     maxDuration: {
       type: Number,
-      default: defprops.upload.maxDuration
+      default: () => defProps.upload.maxDuration
     },
     // 上传区域的图标，只能内置图标
     uploadIcon: {
       type: String,
-      default: defprops.upload.uploadIcon
+      default: () => defProps.upload.uploadIcon
     },
     // 上传区域的图标的颜色，默认
     uploadIconColor: {
       type: String,
-      default: defprops.upload.uploadIconColor
+      default: () => defProps.upload.uploadIconColor
     },
     // 是否开启文件读取前事件
     useBeforeRead: {
       type: Boolean,
-      default: defprops.upload.useBeforeRead
+      default: () => defProps.upload.useBeforeRead
     },
     // 读取后的处理函数
     afterRead: {
@@ -51,75 +56,117 @@ export default {
       type: Function,
       default: null
     },
-    // 是否显示组件自带的图片预览功能
+    // 是否显示组件自带的图片&视频预览功能
     previewFullImage: {
       type: Boolean,
-      default: defprops.upload.previewFullImage
+      default: () => defProps.upload.previewFullImage
     },
     // 最大上传数量
     maxCount: {
       type: [String, Number],
-      default: defprops.upload.maxCount
+      default: () => defProps.upload.maxCount
     },
     // 是否启用
     disabled: {
       type: Boolean,
-      default: defprops.upload.disabled
+      default: () => defProps.upload.disabled
     },
     // 预览上传的图片时的裁剪模式，和image组件mode属性一致
     imageMode: {
       type: String,
-      default: defprops.upload.imageMode
+      default: () => defProps.upload.imageMode
     },
     // 标识符，可以在回调函数的第二项参数中获取
     name: {
       type: String,
-      default: defprops.upload.name
+      default: () => defProps.upload.name
     },
     // 所选的图片的尺寸, 可选值为original compressed
     sizeType: {
       type: Array,
-      default: defprops.upload.sizeType
+      default: () => defProps.upload.sizeType
     },
     // 是否开启图片多选，部分安卓机型不支持
     multiple: {
       type: Boolean,
-      default: defprops.upload.multiple
+      default: () => defProps.upload.multiple
     },
     // 是否展示删除按钮
     deletable: {
       type: Boolean,
-      default: defprops.upload.deletable
+      default: () => defProps.upload.deletable
     },
     // 文件大小限制，单位为byte
     maxSize: {
       type: [String, Number],
-      default: defprops.upload.maxSize
+      default: () => defProps.upload.maxSize
     },
     // 显示已上传的文件列表
     fileList: {
       type: Array,
-      default: defprops.upload.fileList
+      default: () => defProps.upload.fileList
     },
     // 上传区域的提示文字
     uploadText: {
       type: String,
-      default: defprops.upload.uploadText
+      default: () => defProps.upload.uploadText
     },
     // 内部预览图片区域和选择图片按钮的区域宽度
     width: {
       type: [String, Number],
-      default: defprops.upload.width
+      default: () => defProps.upload.width
     },
     // 内部预览图片区域和选择图片按钮的区域高度
     height: {
       type: [String, Number],
-      default: defprops.upload.height
+      default: () => defProps.upload.height
     },
     // 是否在上传完成后展示预览图
     previewImage: {
       type: Boolean,
-      default: defprops.upload.previewImage
+      default: () => defProps.upload.previewImage
+    },
+    // 是否自动删除
+    autoDelete: {
+      type: Boolean,
+      default: () => defProps.upload.autoDelete
+    },
+    // 是否自动上传需要传递action指定地址
+    autoUpload: {
+      type: Boolean,
+      default: () => defProps.upload.autoUpload
+    },
+    // 自动上传接口地址
+    autoUploadApi: {
+      type: String,
+      default: () => defProps.upload.autoUploadApi
+    },
+    // 自动上传驱动，local/oss/cos/kodo
+    autoUploadDriver: {
+      type: String,
+      default: () => defProps.upload.autoUploadDriver
+    },
+    // 自动上传授权接口，比如oss的签名接口。
+    autoUploadAuthUrl: {
+      type: String,
+      default: () => defProps.upload.autoUploadAuthUrl
+    },
+    // 自动上传携带的header
+    autoUploadHeader: {
+      type: Object,
+      default: () => {
+        return defProps.upload.autoUploadHeader;
+      }
+    },
+    // 本地计算视频封面
+    getVideoThumb: {
+      type: Boolean,
+      default: () => defProps.upload.getVideoThumb
+    },
+    // 自定义自动上传后处理
+    customAfterAutoUpload: {
+      type: Boolean,
+      default: () => defProps.upload.customAfterAutoUpload
     }
   }
-};
+});