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

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

@@ -1,6 +1,21 @@
 @charset "UTF-8";
 /* #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;
@@ -106,4 +121,4 @@ view, scroll-view, swiper-item {
 .u-zoom-leave-to {
   transform: scale(0.95);
 }
-/* #endif */
+/* #endif */

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

@@ -1,164 +1,18 @@
-// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
-const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
-// nvue动画模块实现细节抽离在外部文件
-// #ifdef APP-NVUE
-import animationMap from './nvue-ani-map.js'
-// #endif
-
-// #ifndef APP-NVUE
-// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
-const getClassNames = (name) => ({
-    enter: `u-${name}-enter u-${name}-enter-active`,
-    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
-    leave: `u-${name}-leave u-${name}-leave-active`,
-    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
-})
-// #endif
-
-// #ifdef APP-NVUE
-// 引入nvue(weex)的animation动画模块，文档见：
-// https://weex.apache.org/zh/docs/modules/animation.html#transition
-const animation = uni.requireNativePlugin('animation')
-const getStyle = (name) => animationMap[name]
-// #endif
-
-import { nextTick } from 'vue'
-
-export default {
-    methods: {
-        // 组件被点击发出事件
-        clickHandler() {
-            this.$emit('click')
-        },
-        // #ifndef APP-NVUE
-        // vue版本的组件进场处理
-        async vueEnter() {
-            // 动画进入时的类名
-            const classNames = getClassNames(this.mode)
-            // 定义状态和发出动画进入前事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            this.inited = true
-            this.display = true
-            this.classes = classNames.enter
-			await nextTick();
-			{
-				// #ifdef H5
-				await uni.$u.sleep(20)
-				// #endif
-                // 标识动画尚未结束
-                this.$emit('enter')
-                this.transitionEnded = false
-				// 组件动画进入后触发的事件
-                this.$emit('afterEnter')
-                // 赋予组件enter-to类名
-                this.classes = classNames['enter-to']
-            }
-        },
-        // 动画离场处理
-        async vueLeave() {
-            // 如果不是展示状态，无需执行逻辑
-            if (!this.display) return
-            const classNames = getClassNames(this.mode)
-            // 标记离开状态和发出事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 获得类名
-            this.classes = classNames.leave
-
-            await nextTick();
-			{
-               // 动画正在离场的状态
-               this.transitionEnded = false
-               this.$emit('leave')
-                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-                setTimeout(this.onTransitionEnd, this.duration)
-                this.classes = classNames['leave-to']
-            }
-        },
-        // #endif
-        // #ifdef APP-NVUE
-        // nvue版本动画进场
-        async nvueEnter() {
-            // 获得样式的名称
-            const currentStyle = getStyle(this.mode)
-            // 组件动画状态和发出事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            // 展示生成组件元素
-            this.inited = true
-            this.display = true
-            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
-            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
-            this.viewStyle = {
-                opacity: 0
-            }
-            // 等待弹窗内容渲染完成
-            await nextTick();
-			{
-                // 合并样式
-                this.viewStyle = currentStyle.enter
-                Promise.resolve()
-                    .then(waitTick)
-                    .then(() => {
-                        // 组件开始进入前的事件
-                        this.$emit('enter')
-                        // nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
-                        animation.transition(this.$refs['u-transition'].ref, {
-                            styles: currentStyle['enter-to'],
-                            duration: this.duration,
-                            timingFunction: this.timingFunction,
-                            needLayout: false,
-                            delay: 0
-                        }, () => {
-                            // 动画执行完毕，发出事件
-                            this.$emit('afterEnter')
-                        })
-                    })
-                    .catch(() => {})
-            }
-        },
-        nvueLeave() {
-            if (!this.display) {
-                return
-            }
-            const currentStyle = getStyle(this.mode)
-            // 定义状态和事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 合并样式
-            this.viewStyle = currentStyle.leave
-            // 放到promise中处理执行过程
-            Promise.resolve()
-                .then(waitTick) // 等待几十ms
-                .then(() => {
-                    this.transitionEnded = false
-                    // 动画正在离场的状态
-                    this.$emit('leave')
-                    animation.transition(this.$refs['u-transition'].ref, {
-                        styles: currentStyle['leave-to'],
-                        duration: this.duration,
-                        timingFunction: this.timingFunction,
-                        needLayout: false,
-                        delay: 0
-                    }, () => {
-                        this.onTransitionEnd()
-                    })
-                })
-                .catch(() => {})
-        },
-        // #endif
-        // 完成过渡后触发
-        onTransitionEnd() {
-            // 如果已经是结束的状态，无需再处理
-            if (this.transitionEnded) return
-            this.transitionEnded = true
-            // 发出组件动画执行后的事件
-            this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
-            if (!this.show && this.display) {
-                this.display = false
-                this.inited = false
-            }
-        }
-    }
-}
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:59:00
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/transition.js
+ */
+export default {
+    // transition动画组件的props
+    transition: {
+        show: false,
+        mode: 'fade',
+        duration: '300',
+        timingFunction: 'ease-out'
+    }
+}

package/uview-plus/components/u-transition/transitionMixin.js

@@ -0,0 +1,163 @@
+// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
+const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+// nvue动画模块实现细节抽离在外部文件
+// #ifdef APP-NVUE
+import animationMap from './nvue-ani-map.js'
+// #endif
+
+// #ifndef APP-NVUE
+// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
+const getClassNames = (name) => ({
+    enter: `u-${name}-enter u-${name}-enter-active`,
+    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
+    leave: `u-${name}-leave u-${name}-leave-active`,
+    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
+})
+// #endif
+
+// #ifdef APP-NVUE
+// 引入nvue(weex)的animation动画模块，文档见：
+// https://weex.apache.org/zh/docs/modules/animation.html#transition
+const animation = uni.requireNativePlugin('animation')
+const getStyle = (name) => animationMap[name]
+// #endif
+
+import { nextTick } from 'vue'
+import { sleep } from '../../libs/function/index';
+export default {
+    methods: {
+        // 组件被点击发出事件
+        clickHandler() {
+            this.$emit('click')
+        },
+        // #ifndef APP-NVUE
+        // vue版本的组件进场处理
+        async vueEnter() {
+            // 动画进入时的类名
+            const classNames = getClassNames(this.mode)
+            // 定义状态和发出动画进入前事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            this.inited = true
+            this.display = true
+            this.classes = classNames.enter
+			await nextTick();
+			{
+                // https://github.com/umicro/uView2.0/issues/545
+				await sleep(20)
+                // 标识动画尚未结束
+                this.$emit('enter')
+                this.transitionEnded = false
+				// 组件动画进入后触发的事件
+                this.$emit('afterEnter')
+                // 赋予组件enter-to类名
+                this.classes = classNames['enter-to']
+            }
+        },
+        // 动画离场处理
+        async vueLeave() {
+            // 如果不是展示状态，无需执行逻辑
+            if (!this.display) return
+            const classNames = getClassNames(this.mode)
+            // 标记离开状态和发出事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 获得类名
+            this.classes = classNames.leave
+
+            await nextTick();
+			{
+               // 动画正在离场的状态
+               this.transitionEnded = false
+               this.$emit('leave')
+                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+                setTimeout(this.onTransitionEnd, this.duration)
+                this.classes = classNames['leave-to']
+            }
+        },
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue版本动画进场
+        async nvueEnter() {
+            // 获得样式的名称
+            const currentStyle = getStyle(this.mode)
+            // 组件动画状态和发出事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            // 展示生成组件元素
+            this.inited = true
+            this.display = true
+            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
+            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
+            this.viewStyle = {
+                opacity: 0
+            }
+            // 等待弹窗内容渲染完成
+            await nextTick();
+			{
+                // 合并样式
+                this.viewStyle = currentStyle.enter
+                Promise.resolve()
+                    .then(waitTick)
+                    .then(() => {
+                        // 组件开始进入前的事件
+                        this.$emit('enter')
+                        // nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
+                        animation.transition(this.$refs['u-transition'].ref, {
+                            styles: currentStyle['enter-to'],
+                            duration: this.duration,
+                            timingFunction: this.timingFunction,
+                            needLayout: false,
+                            delay: 0
+                        }, () => {
+                            // 动画执行完毕，发出事件
+                            this.$emit('afterEnter')
+                        })
+                    })
+                    .catch(() => {})
+            }
+        },
+        nvueLeave() {
+            if (!this.display) {
+                return
+            }
+            const currentStyle = getStyle(this.mode)
+            // 定义状态和事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 合并样式
+            this.viewStyle = currentStyle.leave
+            // 放到promise中处理执行过程
+            Promise.resolve()
+                .then(waitTick) // 等待几十ms
+                .then(() => {
+                    this.transitionEnded = false
+                    // 动画正在离场的状态
+                    this.$emit('leave')
+                    animation.transition(this.$refs['u-transition'].ref, {
+                        styles: currentStyle['leave-to'],
+                        duration: this.duration,
+                        timingFunction: this.timingFunction,
+                        needLayout: false,
+                        delay: 0
+                    }, () => {
+                        this.onTransitionEnd()
+                    })
+                })
+                .catch(() => {})
+        },
+        // #endif
+        // 完成过渡后触发
+        onTransitionEnd() {
+            // 如果已经是结束的状态，无需再处理
+            if (this.transitionEnded) return
+            this.transitionEnded = true
+            // 发出组件动画执行后的事件
+            this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
+            if (!this.show && this.display) {
+                this.display = false
+                this.inited = false
+            }
+        }
+    }
+}

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

@@ -12,11 +12,12 @@
   </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 { addStyle } from '../../libs/function/index';
 // 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
-import transition from './transition.js';
+import transitionMixin from './transitionMixin.js';
 /**
  * transition  动画组件
  * @description
@@ -57,13 +58,13 @@ export default {
         transitionTimingFunction: this.timingFunction,
         // #endif
         // 避免自定义样式影响到动画属性，所以写在viewStyle前面
-        ...uni.$u.addStyle(customStyle),
+        ...addStyle(customStyle),
         ...viewStyle
       };
     }
   },
-  // 将mixin挂在到组件中，uni.$u.mixin实际上为一个vue格式对象
-  mixins: [mpMixin, mixin, transition, props],
+  // 将mixin挂在到组件中，实际上为一个vue格式对象。
+  mixins: [mpMixin, mixin, transitionMixin, props],
   watch: {
     show: {
       handler(newVal) {

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
     }
   }
-};
+});