info

components/thorui/tui-popup/tui-popup.vue

@@ -0,0 +1,266 @@
+<template>
+	<view class="tui-popup__transition" :class="[ani.in]" :style="'transform:' + transform + ';' + stylesObject" @click="change" v-if="isShow" ref="ani"><slot></slot></view>
+</template>
+
+<script>
+// #ifdef APP-NVUE
+const animation = uni.requireNativePlugin('animation');
+// #endif
+
+export default {
+	name: 'tuiPopup',
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		/*
+		  [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out]
+		  过渡动画类型
+		*/
+		
+		modeClass: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		//styles 组件样式，同 css 样式
+		styles: {
+			type: Object,
+			default() {
+				return {
+					position: 'fixed',
+					bottom: 0,
+					top: 0,
+					left: 0,
+					right: 0,
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					/* #endif */
+					'justify-content': 'center',
+					'align-items': 'center'
+				};
+			}
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			ani: {
+				in: '',
+				active: ''
+			}
+		};
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open();
+				} else {
+					this.close();
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			};
+			let transfrom = '';
+			for (let i in styles) {
+				let line = this.toLine(i);
+				transfrom += line + ':' + styles[i] + ';';
+			}
+			return transfrom;
+		}
+	},
+	methods: {
+		change() {
+			this.$emit('click', {
+				detail: this.isShow
+			});
+		},
+		open() {
+			clearTimeout(this.timer);
+			this.isShow = true;
+			this.transform = '';
+			this.ani.in = '';
+			for (let i in this.getTranfrom(false)) {
+				if (i === 'opacity') {
+					this.ani.in = 'fade-in';
+				} else {
+					this.transform += `${this.getTranfrom(false)[i]} `;
+				}
+			}
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this._animation(true);
+				}, 50);
+			});
+		},
+		close(type) {
+			clearTimeout(this.timer);
+			this._animation(false);
+		},
+		_animation(type) {
+			let styles = this.getTranfrom(type);
+			// #ifdef APP-NVUE
+			if (!this.$refs['ani']) return;
+			animation.transition(
+				this.$refs['ani'].ref,
+				{
+					styles,
+					duration: this.duration, //ms
+					timingFunction: 'ease',
+					needLayout: false,
+					delay: 0 //ms
+				},
+				() => {
+					if (!type) {
+						this.isShow = false;
+					}
+					this.$emit('change', {
+						detail: this.isShow
+					});
+				}
+			);
+			// #endif
+			// #ifndef APP-NVUE
+			this.transform = '';
+			for (let i in styles) {
+				if (i === 'opacity') {
+					this.ani.in = `fade-${type ? 'out' : 'in'}`;
+				} else {
+					this.transform += `${styles[i]} `;
+				}
+			}
+			this.timer = setTimeout(() => {
+				if (!type) {
+					this.isShow = false;
+				}
+				this.$emit('change', {
+					detail: this.isShow
+				});
+			}, this.duration);
+			// #endif
+		},
+		getTranfrom(type) {
+			let styles = {
+				transform: ''
+			};
+			this.modeClass.forEach(mode => {
+				switch (mode) {
+					case 'fade':
+						styles.opacity = type ? 1 : 0;
+						break;
+					case 'slide-top':
+						styles.transform += `translateY(${type ? '0' : '-100%'}) `;
+						break;
+					case 'slide-right':
+						styles.transform += `translateX(${type ? '0' : '100%'}) `;
+						break;
+					case 'slide-bottom':
+						styles.transform += `translateY(${type ? '0' : '100%'}) `;
+						break;
+					case 'slide-left':
+						styles.transform += `translateX(${type ? '0' : '-100%'}) `;
+						break;
+					case 'zoom-in':
+						styles.transform += `scale(${type ? 1 : 0.8}) `;
+						break;
+					case 'zoom-out':
+						styles.transform += `scale(${type ? 1 : 1.2}) `;
+						break;
+				}
+			});
+			return styles;
+		},
+		_modeClassArr(type) {
+			let mode = this.modeClass;
+			if (typeof mode !== 'string') {
+				let modestr = '';
+				mode.forEach(item => {
+					modestr += item + '-' + type + ',';
+				});
+				return modestr.substr(0, modestr.length - 1);
+			} else {
+				return mode + '-' + type;
+			}
+		},
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-popup__transition {
+	transition-timing-function: ease;
+	transition-duration: 0.3s;
+	transition-property: transform, opacity;
+}
+
+.fade-in {
+	opacity: 0;
+}
+
+.fade-active {
+	opacity: 1;
+}
+
+.slide-top-in {
+	transform: translateY(-100%);
+}
+
+.slide-top-active {
+	transform: translateY(0);
+}
+
+.slide-right-in {
+	transform: translateX(100%);
+}
+
+.slide-right-active {
+	transform: translateX(0);
+}
+
+.slide-bottom-in {
+	transform: translateY(100%);
+}
+
+.slide-bottom-active {
+	transform: translateY(0);
+}
+
+.slide-left-in {
+	transform: translateX(-100%);
+}
+
+.slide-left-active {
+	transform: translateX(0);
+	opacity: 1;
+}
+
+.zoom-in-in {
+	transform: scale(0.8);
+}
+
+.zoom-out-active {
+	transform: scale(1);
+}
+
+.zoom-out-in {
+	transform: scale(1.2);
+}
+</style>