@10yun/cv-mobile-ui 0.4.2 → 0.4.3

package/ui-uni/uni-transition/uni-transition.vue

@@ -0,0 +1,287 @@
+<template>
+	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import {
+		createAnimation
+	} from './createAnimation'
+
+	/**
+	 * Transition 过渡动画
+	 * @description 简单过渡动画组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+	 * @property {Array|String} modeClass = [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 过渡动画持续时间
+	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+	 */
+	export default {
+		name: 'uniTransition',
+		emits: ['click', 'change'],
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			modeClass: {
+				type: [Array, String],
+				default () {
+					return 'fade'
+				}
+			},
+			duration: {
+				type: Number,
+				default: 300
+			},
+			styles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			customClass: {
+				type: String,
+				default: ''
+			}
+		},
+		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.styles,
+					'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))
+			},
+			/**
+			 * 点击组件触发回调
+			 */
+			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.modeClass === 'string') {
+					buildStyle(type, this.modeClass)
+				} else {
+					this.modeClass.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.modeClass === 'string') {
+					buildTranfrom(type, this.modeClass)
+				} else {
+					this.modeClass.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 scoped></style>

package/ui-cv/cv-badge/cv-badge.vue

@@ -1,249 +0,0 @@
-<template>
-  <view class="uni-badge--x">
-    <slot />
-    <text
-      v-if="text"
-      :class="classNames"
-      :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
-      class="uni-badge"
-      @click="onClick()"
-    >
-      {{ displayValue }}
-    </text>
-  </view>
-</template>
-
-<script>
-/**
- * Badge 数字角标
- * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
- * @tutorial https://ext.dcloud.net.cn/plugin?id=21
- * @property {String} text 角标内容
- * @property {String} type = [default|primary|success|warning|error] 颜色类型
- * 	@value default 灰色
- * 	@value primary 蓝色
- * 	@value success 绿色
- * 	@value warning 黄色
- * 	@value error 红色
- * @property {String} size = [normal|small] Badge 大小
- * 	@value normal 一般尺寸
- * 	@value small 小尺寸
- * @property {String} inverted = [true|false] 是否无需背景颜色
- * @event {Function} click 点击 Badge 触发事件
- * @example <cv-badge text="1"></cv-badge>
- */
-export default {
-  name: 'cvBadge',
-  emits: ['click'],
-  props: {
-    type: {
-      type: String,
-      default: 'default'
-    },
-    inverted: {
-      type: Boolean,
-      default: false
-    },
-    isDot: {
-      type: Boolean,
-      default: false
-    },
-    maxNum: {
-      type: Number,
-      default: 99
-    },
-    absolute: {
-      type: String,
-      default: ''
-    },
-    offset: {
-      type: Array,
-      default() {
-        return [0, 0];
-      }
-    },
-    text: {
-      type: [String, Number],
-      default: ''
-    },
-    size: {
-      type: String,
-      default: 'normal'
-    },
-    customStyle: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    width() {
-      return String(this.text).length * 8 + 12;
-    },
-    classNames() {
-      const { inverted, type, size, absolute } = this;
-      return [
-        inverted ? 'uni-badge--' + type + '-inverted' : '',
-        'uni-badge--' + type,
-        'uni-badge--' + size,
-        absolute ? 'uni-badge--absolute' : ''
-      ];
-    },
-    positionStyle() {
-      if (!this.absolute) return {};
-      let w = this.width / 2,
-        h = 10;
-      if (this.isDot) {
-        w = 5;
-        h = 5;
-      }
-      const x = `${-w + this.offset[0]}px`;
-      const y = `${-h + this.offset[1]}px`;
-
-      const whiteList = {
-        rightTop: {
-          right: x,
-          top: y
-        },
-        rightBottom: {
-          right: x,
-          bottom: y
-        },
-        leftBottom: {
-          left: x,
-          bottom: y
-        },
-        leftTop: {
-          left: x,
-          top: y
-        }
-      };
-      const match = whiteList[this.absolute];
-      return match ? match : whiteList['rightTop'];
-    },
-    badgeWidth() {
-      return {
-        width: `${this.width}px`
-      };
-    },
-    dotStyle() {
-      if (!this.isDot) return {};
-      return {
-        width: '10px',
-        height: '10px',
-        borderRadius: '10px'
-      };
-    },
-    displayValue() {
-      const { isDot, text, maxNum } = this;
-      return isDot ? '' : Number(text) > maxNum ? `${maxNum}+` : text;
-    }
-  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-badge--x {
-  /* #ifdef APP-NVUE */
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  display: inline-block;
-  /* #endif */
-  position: relative;
-}
-
-.uni-badge--absolute {
-  position: absolute;
-}
-
-.uni-badge {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  overflow: hidden;
-  box-sizing: border-box;
-  /* #endif */
-  justify-content: center;
-  flex-direction: row;
-  height: 20px;
-  line-height: 20px;
-  color: #333;
-  border-radius: 100px;
-  background-color: #f1f1f1;
-  background-color: transparent;
-  text-align: center;
-  font-family: 'Helvetica Neue', Helvetica, sans-serif;
-  font-size: 12px;
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.uni-badge--inverted {
-  padding: 0 5px 0 0;
-  color: #f1f1f1;
-}
-
-.uni-badge--default {
-  color: #333;
-  background-color: #f1f1f1;
-}
-
-.uni-badge--default-inverted {
-  color: #999;
-  background-color: transparent;
-}
-
-.uni-badge--primary {
-  color: #fff;
-  background-color: #007aff;
-}
-
-.uni-badge--primary-inverted {
-  color: #007aff;
-  background-color: transparent;
-}
-
-.uni-badge--success {
-  color: #fff;
-  background-color: #4cd964;
-}
-
-.uni-badge--success-inverted {
-  color: #4cd964;
-  background-color: transparent;
-}
-
-.uni-badge--warning {
-  color: #fff;
-  background-color: #f0ad4e;
-}
-
-.uni-badge--warning-inverted {
-  color: #f0ad4e;
-  background-color: transparent;
-}
-
-.uni-badge--error {
-  color: #fff;
-  background-color: #dd524d;
-}
-
-.uni-badge--error-inverted {
-  color: #dd524d;
-  background-color: transparent;
-}
-
-.uni-badge--small {
-  transform: scale(0.8);
-  transform-origin: center center;
-}
-</style>