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

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

@@ -0,0 +1,164 @@
+// 定义一个一定时间后自动成功的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
+            }
+        }
+    }
+}

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

@@ -0,0 +1,86 @@
+<template>
+  <view
+    v-if="inited"
+    class="u-transition"
+    ref="u-transition"
+    @tap="clickHandler"
+    :class="classes"
+    :style="[mergeStyle]"
+    @touchmove="noop"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+// 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
+import transition from './transition.js';
+/**
+ * transition  动画组件
+ * @description
+ * @tutorial
+ * @property {String}			show			是否展示组件 （默认 false ）
+ * @property {String}			mode			使用的动画模式 （默认 'fade' ）
+ * @property {String | Number}	duration		动画的执行时间，单位ms （默认 '300' ）
+ * @property {String}			timingFunction	使用的动画过渡函数 （默认 'ease-out' ）
+ * @property {Object}			customStyle		自定义样式
+ * @event {Function} before-enter	进入前触发
+ * @event {Function} enter			进入中触发
+ * @event {Function} after-enter	进入后触发
+ * @event {Function} before-leave	离开前触发
+ * @event {Function} leave			离开中触发
+ * @event {Function} after-leave	离开后触发
+ * @example
+ */
+export default {
+  name: 'u-transition',
+  data() {
+    return {
+      inited: false, // 是否显示/隐藏组件
+      viewStyle: {}, // 组件内部的样式
+      status: '', // 记录组件动画的状态
+      transitionEnded: false, // 组件是否结束的标记
+      display: false, // 组件是否展示
+      classes: '' // 应用的类名
+    };
+  },
+  emits: ['click', 'beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'],
+  computed: {
+    mergeStyle() {
+      const { viewStyle, customStyle } = this;
+      return {
+        // #ifndef APP-NVUE
+        transitionDuration: `${this.duration}ms`,
+        // display: `${this.display ? '' : 'none'}`,
+        transitionTimingFunction: this.timingFunction,
+        // #endif
+        // 避免自定义样式影响到动画属性，所以写在viewStyle前面
+        ...uni.$u.addStyle(customStyle),
+        ...viewStyle
+      };
+    }
+  },
+  // 将mixin挂在到组件中，uni.$u.mixin实际上为一个vue格式对象
+  mixins: [mpMixin, mixin, transition, props],
+  watch: {
+    show: {
+      handler(newVal) {
+        // vue和nvue分别执行不同的方法
+        // #ifdef APP-NVUE
+        newVal ? this.nvueEnter() : this.nvueLeave();
+        // #endif
+        // #ifndef APP-NVUE
+        newVal ? this.vueEnter() : this.vueLeave();
+        // #endif
+      },
+      // 表示同时监听初始化时的props的show的意思
+      immediate: true
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-transition/vue.ani-style.scss

@@ -0,0 +1,113 @@
+/**
+ * vue版本动画内置的动画模式有如下：
+ * fade：淡入
+ * zoom：缩放
+ * fade-zoom：缩放淡入
+ * fade-up：上滑淡入
+ * fade-down：下滑淡入
+ * fade-left：左滑淡入
+ * fade-right：右滑淡入
+ * slide-up：上滑进入
+ * slide-down：下滑进入
+ * slide-left：左滑进入
+ * slide-right：右滑进入
+ */
+
+$u-zoom-scale: scale(0.95);
+
+.u-fade-enter-active,
+.u-fade-leave-active {
+	transition-property: opacity;
+}
+
+.u-fade-enter,
+.u-fade-leave-to {
+	opacity: 0
+}
+
+.u-fade-zoom-enter,
+.u-fade-zoom-leave-to {
+	transform: $u-zoom-scale;
+	opacity: 0;
+}
+
+.u-fade-zoom-enter-active,
+.u-fade-zoom-leave-active {
+	transition-property: transform, opacity;
+}
+
+.u-fade-down-enter-active,
+.u-fade-down-leave-active,
+.u-fade-left-enter-active,
+.u-fade-left-leave-active,
+.u-fade-right-enter-active,
+.u-fade-right-leave-active,
+.u-fade-up-enter-active,
+.u-fade-up-leave-active {
+	transition-property: opacity, transform;
+}
+
+.u-fade-up-enter,
+.u-fade-up-leave-to {
+	transform: translate3d(0, 100%, 0);
+	opacity: 0
+}
+
+.u-fade-down-enter,
+.u-fade-down-leave-to {
+	transform: translate3d(0, -100%, 0);
+	opacity: 0
+}
+
+.u-fade-left-enter,
+.u-fade-left-leave-to {
+	transform: translate3d(-100%, 0, 0);
+	opacity: 0
+}
+
+.u-fade-right-enter,
+.u-fade-right-leave-to {
+	transform: translate3d(100%, 0, 0);
+	opacity: 0
+}
+
+.u-slide-down-enter-active,
+.u-slide-down-leave-active,
+.u-slide-left-enter-active,
+.u-slide-left-leave-active,
+.u-slide-right-enter-active,
+.u-slide-right-leave-active,
+.u-slide-up-enter-active,
+.u-slide-up-leave-active {
+	transition-property: transform;
+}
+
+.u-slide-up-enter,
+.u-slide-up-leave-to {
+	transform: translate3d(0, 100%, 0)
+}
+
+.u-slide-down-enter,
+.u-slide-down-leave-to {
+	transform: translate3d(0, -100%, 0)
+}
+
+.u-slide-left-enter,
+.u-slide-left-leave-to {
+	transform: translate3d(-100%, 0, 0)
+}
+
+.u-slide-right-enter,
+.u-slide-right-leave-to {
+	transform: translate3d(100%, 0, 0)
+}
+
+.u-zoom-enter-active,
+.u-zoom-leave-active {
+	transition-property: transform
+}
+
+.u-zoom-enter,
+.u-zoom-leave-to {
+	transform: $u-zoom-scale
+}

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

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

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

@@ -0,0 +1,125 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 接受的文件类型, 可选值为all media image file video
+    accept: {
+      type: String,
+      default: defprops.upload.accept
+    },
+    // 	图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头
+    capture: {
+      type: [String, Array],
+      default: defprops.upload.capture
+    },
+    // 当accept为video时生效，是否压缩视频，默认为true
+    compressed: {
+      type: Boolean,
+      default: defprops.upload.compressed
+    },
+    // 当accept为video时生效，可选值为back或front
+    camera: {
+      type: String,
+      default: defprops.upload.camera
+    },
+    // 当accept为video时生效，拍摄视频最长拍摄时间，单位秒
+    maxDuration: {
+      type: Number,
+      default: defprops.upload.maxDuration
+    },
+    // 上传区域的图标，只能内置图标
+    uploadIcon: {
+      type: String,
+      default: defprops.upload.uploadIcon
+    },
+    // 上传区域的图标的颜色，默认
+    uploadIconColor: {
+      type: String,
+      default: defprops.upload.uploadIconColor
+    },
+    // 是否开启文件读取前事件
+    useBeforeRead: {
+      type: Boolean,
+      default: defprops.upload.useBeforeRead
+    },
+    // 读取后的处理函数
+    afterRead: {
+      type: Function,
+      default: null
+    },
+    // 读取前的处理函数
+    beforeRead: {
+      type: Function,
+      default: null
+    },
+    // 是否显示组件自带的图片预览功能
+    previewFullImage: {
+      type: Boolean,
+      default: defprops.upload.previewFullImage
+    },
+    // 最大上传数量
+    maxCount: {
+      type: [String, Number],
+      default: defprops.upload.maxCount
+    },
+    // 是否启用
+    disabled: {
+      type: Boolean,
+      default: defprops.upload.disabled
+    },
+    // 预览上传的图片时的裁剪模式，和image组件mode属性一致
+    imageMode: {
+      type: String,
+      default: defprops.upload.imageMode
+    },
+    // 标识符，可以在回调函数的第二项参数中获取
+    name: {
+      type: String,
+      default: defprops.upload.name
+    },
+    // 所选的图片的尺寸, 可选值为original compressed
+    sizeType: {
+      type: Array,
+      default: defprops.upload.sizeType
+    },
+    // 是否开启图片多选，部分安卓机型不支持
+    multiple: {
+      type: Boolean,
+      default: defprops.upload.multiple
+    },
+    // 是否展示删除按钮
+    deletable: {
+      type: Boolean,
+      default: defprops.upload.deletable
+    },
+    // 文件大小限制，单位为byte
+    maxSize: {
+      type: [String, Number],
+      default: defprops.upload.maxSize
+    },
+    // 显示已上传的文件列表
+    fileList: {
+      type: Array,
+      default: defprops.upload.fileList
+    },
+    // 上传区域的提示文字
+    uploadText: {
+      type: String,
+      default: defprops.upload.uploadText
+    },
+    // 内部预览图片区域和选择图片按钮的区域宽度
+    width: {
+      type: [String, Number],
+      default: defprops.upload.width
+    },
+    // 内部预览图片区域和选择图片按钮的区域高度
+    height: {
+      type: [String, Number],
+      default: defprops.upload.height
+    },
+    // 是否在上传完成后展示预览图
+    previewImage: {
+      type: Boolean,
+      default: defprops.upload.previewImage
+    }
+  }
+};

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

@@ -0,0 +1,164 @@
+/* #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-upload {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  flex: 1;
+}
+.u-upload__wrap {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.u-upload__wrap__preview {
+  border-radius: 2px;
+  margin: 0 8px 8px 0;
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.u-upload__wrap__preview__image {
+  width: 80px;
+  height: 80px;
+}
+.u-upload__wrap__preview__other {
+  width: 80px;
+  height: 80px;
+  background-color: #f2f2f2;
+  flex: 1;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.u-upload__wrap__preview__other__text {
+  font-size: 11px;
+  color: var(--u-tips-color);
+  margin-top: 2px;
+}
+.u-upload__deletable {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #373737;
+  height: 14px;
+  width: 14px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  border-bottom-left-radius: 100px;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+.u-upload__deletable__icon {
+  position: absolute;
+  transform: scale(0.7);
+  top: 0px;
+  right: 0px;
+  /* #ifdef H5 */
+  top: 1px;
+  right: 0;
+  /* #endif */
+}
+.u-upload__success {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  /* #ifndef APP-NVUE */
+  border-style: solid;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: var(--u-success);
+  border-right-color: var(--u-success);
+  border-width: 9px;
+  align-items: center;
+  justify-content: center;
+  /* #endif */
+}
+.u-upload__success__icon {
+  /* #ifndef APP-NVUE */
+  position: absolute;
+  transform: scale(0.7);
+  bottom: -10px;
+  right: -10px;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  width: 16px;
+  height: 16px;
+  /* #endif */
+}
+.u-upload__status {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.u-upload__status__icon {
+  position: relative;
+  z-index: 1;
+}
+.u-upload__status__message {
+  font-size: 12px;
+  color: #ffffff;
+  margin-top: 5px;
+}
+.u-upload__button {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  background-color: #f4f5f7;
+  border-radius: 2px;
+  margin: 0 8px 8px 0;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+.u-upload__button__text {
+  font-size: 11px;
+  color: var(--u-tips-color);
+  margin-top: 2px;
+}
+.u-upload__button--hover {
+  background-color: #e6e7e9;
+}
+.u-upload__button--disabled {
+  opacity: 0.5;
+}