fusions-ui 1.2.7 → 1.2.8

package/components/fu-popup/fu-popup.vue

@@ -1,475 +0,0 @@
-<template>
-	<view v-if="showPopup" class="fu-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" :style="{zIndex: zIndex}">
-		<view @touchstart="touchstart">
-			<fu-transition key="1" v-if="maskShow" name="mask" mode="fade" :customStyle="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
-			<fu-transition key="2" :mode="ani" name="content" :customStyle="transClass" :duration="duration" :show="showTrans" @click="onTap">
-				<view class="fu-popup__wrapper" :style="[getStyle]" :class="[popupstyle]" @click="clear">
-					<slot />
-					<fu-safe-area mode="bottom" v-if="safeArea && direction == 'bottom'"></fu-safe-area>
-					<view class="fu-popup__wrapper__close" :class="['fu-popup__wrapper__close--' + closeIconPosition]" hover-class="fu-popup__wrapper__close--hover" hover-stay-time="150" @tap.stop="close" v-if="showClose">
-						<fu-icon name="cancel" color="#909399" size="18" bold></fu-icon>
-					</view>
-				</view>
-			</fu-transition>
-		</view>
-		<!-- #ifdef H5 -->
-		<keypress v-if="maskShow" @esc="onTap" />
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	// #ifdef H5
-	import keypress from './keypress.js'
-	// #endif
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * PopUp 弹出层
-	 * @description 此组件弹出层，为了解决遮罩弹层的问题
-	 * @property {String} mode = [top|center|bottom|left|right] 弹出层方向
-	 * 	@value top 顶部弹出
-	 * 	@value center 中间弹出
-	 * 	@value bottom 底部弹出
-	 * 	@value left 左侧弹出
-	 * 	@value right 右侧弹出
-	 * @property {Boolean} animation = [true|false] 是否开启动画
-	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
-	 * @property {String}  bgColor 主窗口背景色
-	 * @property {String}  maskBgColor 蒙版颜色
-	 * @property {Boolean} safeArea 是否适配底部安全区（默认 true）
-	 * @property {String,Number} zIndex 弹出层的层级 
-	 * @property {Boolean} showClose 是否显示关闭图标，默认false
-	 * @property {String} closeIconPos = [top-left|top-right|bottom-left|bottom-right] 自定义关闭图标位置
-	 * 	@value top-left 左上角
-	 * 	@value top-right 右上角
-	 * 	@value bottom-left 左下角
-	 * 	@value bottom-right 右下角
-	 * @property {String,Number} radius 自定义圆角
-	 * 
-	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
-	 * @event {Function} maskClick 点击遮罩触发
-	 * @example <fu-popup>弹窗内容</fu-popup>
-	 */
-	export default {
-		name: 'FuPopup',
-		components: {
-			// #ifdef H5
-			keypress
-			// #endif
-		},
-		emits: ['change', 'maskClick'],
-		mixins: [mixin, mpMixin, props],
-		data() {
-			return {
-				duration: 300,
-				ani: [],
-				showPopup: false,
-				showTrans: false,
-				popupWidth: 0,
-				popupHeight: 0,
-				config: {
-					top: 'top',
-					bottom: 'bottom',
-					center: 'center',
-					left: 'left',
-					right: 'right',
-					message: 'top',
-					dialog: 'center',
-					share: 'bottom'
-				},
-				maskClass: {
-					position: 'fixed',
-					bottom: 0,
-					top: 0,
-					left: 0,
-					right: 0,
-					backgroundColor: 'rgba(0, 0, 0, 0.4)'
-				},
-				transClass: {
-					position: 'fixed',
-					left: 0,
-					right: 0
-				},
-				maskShow: true,
-				popupstyle: this.isDesktop ? 'fixforpc-top' : 'top',
-				direction: '',
-				mkclick: true,
-				closeIconPosition: this.closeIconPo
-			}
-		},
-		computed: {
-			isDesktop() {
-				return this.popupWidth >= 500 && this.popupHeight >= 500
-			},
-			bg() {
-				if (this.bgColor === '' || this.bgColor === 'none') {
-					return 'transparent'
-				}
-				return this.bgColor
-			},
-			getStyle() {
-				let style = {};
-				if (this.bgColor) {
-					style.backgroundColor = this.bg
-				}
-				if(this.radius) {
-					const value = this.$fu.addUnit(this.radius);
-					const mode = this.direction? this.direction: this.mode;
-					style.backgroundColor = this.bgColor;
-					if(mode === 'top') {
-						style.borderBottomLeftRadius = value;
-						style.borderBottomRightRadius = value;
-					} else if(mode === 'bottom') {
-						style.borderTopLeftRadius = value;
-						style.borderTopRightRadius = value;
-					} else if(mode === 'center') {
-						style.borderRadius = value;
-					}
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle))
-			},
-			closeIconPo() {
-				return this.closeIconPos
-			}
-		},
-		// #ifndef VUE3
-		destroyed() {
-			this.setH5Visible()
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			this.setH5Visible()
-		},
-		// #endif
-		activated() {
-		  this.setH5Visible(!this.showPopup);
-		},
-		deactivated() {
-		  this.setH5Visible(true);
-		},
-		created() {
-			this.mkclick = this.isMaskClick || false;
-			if (this.animation) {
-				this.duration = this.duration
-			} else {
-				this.duration = 0
-			}
-			// 处理 message 组件生命周期异常的问题
-			this.messageChild = null
-			// 解决头条冒泡的问题
-			this.clearPropagation = false
-			this.maskClass.backgroundColor = this.maskBgColor;
-		},
-		methods: {
-			setH5Visible() {
-				// #ifdef H5
-				// 处理 h5 滚动穿透的问题
-				document.getElementsByTagName('body')[0].style.overflow = 'visible'
-				// #endif
-			},
-			/**
-			 * 公用方法，不显示遮罩层
-			 */
-			closeMask() {
-				this.mkclick = false
-			},
-			
-			// Nvue 取消冒泡
-			clear(e) {
-				// #ifndef APP-NVUE
-				e.stopPropagation()
-				// #endif
-				this.clearPropagation = true
-			},
-			
-			// 打开
-			open(direction) {
-				// 处理快速打开关闭的情况
-				if (this.showPopup) {
-					return
-				}
-				let innerMode = ['top', 'center', 'bottom', 'left', 'right'];
-				if (!(direction && innerMode.indexOf(direction) !== -1)) {
-					direction = this.mode
-				} else {
-					this.direction = direction;
-				}
-				if(!this.closeIconPos) {
-					this.closeIconPosition = direction === 'top'? 'bottom-right': (direction === 'center' || direction === 'bottom' || direction === 'left')? 'top-right': direction === 'right'? 'top-left': ''
-				}
-				if (!this.config[direction]) {
-					console.error('缺少类型：', direction)
-					return
-				}
-				this[this.config[direction]]()
-				this.$emit('change', {
-					show: true,
-					mode: direction
-				})
-			},
-			
-			// 关闭
-			close(mode) {
-				this.showTrans = false;
-				this.$emit('change', {
-					show: false,
-					mode: this.mode
-				})
-				clearTimeout(this.timer)
-				this.timer = setTimeout(() => {
-					this.showPopup = false;
-				}, 300)
-			},
-			
-			// 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
-			touchstart() {
-				this.clearPropagation = false;
-			},
-			
-			// 点击遮罩触发
-			onTap() {
-				if (this.clearPropagation) {
-					// fix by mehaotian 兼容 nvue
-					this.clearPropagation = false;
-					return
-				}
-				this.$emit('maskClick')
-				if (!this.mkclick) return
-				this.close()
-			},
-			
-			/**
-			 * 顶部弹出样式处理
-			 */
-			top(mode) {
-				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
-				this.ani = ['slide-top'];
-				this.transClass = {
-					position: 'fixed',
-					left: 0,
-					right: 0,
-					...this.getStyle
-				};
-				if (mode) return
-				this.showPopup = true;
-				this.showTrans = true;
-				this.$nextTick(() => {
-					if (this.messageChild && this.mode === 'message') {
-						this.messageChild.timerClose()
-					}
-				})
-			},
-			
-			/**
-			 * 底部弹出样式处理
-			 */
-			bottom(mode) {
-				this.popupstyle = 'bottom';
-				this.ani = ['slide-bottom'];
-				this.transClass = {
-					position: 'fixed',
-					left: 0,
-					right: 0,
-					bottom: 0,
-					...this.getStyle
-				};
-				if (mode) return
-				this.showPopup = true;
-				this.showTrans = true;
-			},
-			
-			/**
-			 * 中间弹出样式处理
-			 */
-			center(mode) {
-				this.popupstyle = 'center';
-				this.ani = ['zoom-out', 'fade'];
-				this.transClass = {
-					position: 'fixed',
-					/* #ifndef APP-NVUE */
-					display: 'flex',
-					flexDirection: 'column',
-					/* #endif */
-					bottom: 0,
-					left: 0,
-					right: 0,
-					top: 0,
-					justifyContent: 'center',
-					alignItems: 'center'
-				};
-				if (mode) return
-				this.showPopup = true;
-				this.showTrans = true;
-			},
-			
-			/**
-			 * 左侧弹出样式处理
-			 */
-			left(mode) {
-				this.popupstyle = 'left';
-				this.ani = ['slide-left'];
-				this.transClass = {
-					position: 'fixed',
-					left: 0,
-					bottom: 0,
-					top: 0,
-					...this.getStyle,
-					/* #ifndef APP-NVUE */
-					display: 'flex',
-					flexDirection: 'column'
-					/* #endif */
-				};
-				if (mode) return
-				this.showPopup = true;
-				this.showTrans = true;
-			},
-			
-			/**
-			 * 右侧弹出样式处理
-			 */
-			right(mode) {
-				this.popupstyle = 'right';
-				this.ani = ['slide-right']
-				this.transClass = {
-					position: 'fixed',
-					bottom: 0,
-					right: 0,
-					top: 0,
-					...this.getStyle,
-					/* #ifndef APP-NVUE */
-					display: 'flex',
-					flexDirection: 'column'
-					/* #endif */
-				};
-				if (mode) return
-				this.showPopup = true;
-				this.showTrans = true;
-			}
-		},
-		watch: {
-			/**
-			 * 监听mode类型
-			 */
-			mode: {
-				immediate: true,
-				handler: function(mode) {
-					if (!this.config[mode]) return
-					this[this.config[mode]](true)
-				}
-			},
-			isDesktop: {
-				immediate: true,
-				handler: function(newVal) {
-					if (!this.config[newVal]) return
-					this[this.config[this.mode]](true)
-				}
-			},
-			/**
-			 * 监听遮罩是否可点击
-			 * @param {Object} val
-			 */
-			isMaskClick: {
-				handler: function(val) {
-					this.mkclick = val
-				},
-				immediate: true
-			},
-			// H5 下禁止底部滚动
-			showPopup(show) {
-				// #ifdef H5
-				// fix by mehaotian 处理 h5 滚动穿透的问题
-				document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
-				// #endif
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-	.fu-popup {
-		position: fixed;
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-		
-		&.top,
-		&.left,
-		&.right {
-			/* #ifdef H5 */
-			top: var(--window-top);
-			/* #endif */
-			/* #ifndef H5 */
-			top: 0;
-			/* #endif */
-		}
-
-		.fu-popup__wrapper {
-			/* #ifndef APP-NVUE */
-			display: block;
-			/* #endif */
-			position: relative;
-
-			/* iphonex 等安全区设置，底部安全区适配 */
-			/* #ifndef APP-NVUE */
-			// padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS 设备 */
-			// padding-bottom: env(safe-area-inset-bottom); /* 兼容IPhone X 及以上设备 */
-			/* #endif */
-			&.left,
-			&.right {
-				/* #ifdef H5 */
-				padding-top: var(--window-top);
-				/* #endif */
-				/* #ifndef H5 */
-				padding-top: 0;
-				/* #endif */
-				flex: 1;
-			}
-			
-			&.bottom {
-				/* #ifdef H5 */
-				padding-bottom: var(--window-bottom);
-				/* #endif */
-			}
-			
-			&__close {
-				position: absolute;
-			
-				&--hover {
-					opacity: 0.4;
-				}
-			}
-			
-			&__close--top-left {
-				top: 15px;
-				left: 15px;
-			}
-			
-			&__close--top-right {
-				top: 15px;
-				right: 15px;
-			}
-			
-			&__close--bottom-left {
-				bottom: 15px;
-				left: 15px;
-			}
-			
-			&__close--bottom-right {
-				right: 15px;
-				bottom: 15px;
-			}
-		}
-	}
-
-	.fixforpc-z-index {
-		/* #ifndef APP-NVUE */
-		z-index: 999;
-		/* #endif */
-	}
-
-	.fixforpc-top {
-		top: 0;
-	}
-</style>

package/components/fu-popup/keypress.js

@@ -1,45 +0,0 @@
-// #ifdef H5
-export default {
-  name: 'Keypress',
-  props: {
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    const keyNames = {
-      esc: ['Esc', 'Escape'],
-      tab: 'Tab',
-      enter: 'Enter',
-      space: [' ', 'Spacebar'],
-      up: ['Up', 'ArrowUp'],
-      left: ['Left', 'ArrowLeft'],
-      right: ['Right', 'ArrowRight'],
-      down: ['Down', 'ArrowDown'],
-      delete: ['Backspace', 'Delete', 'Del']
-    }
-    const listener = ($event) => {
-      if (this.disable) {
-        return
-      }
-      const keyName = Object.keys(keyNames).find(key => {
-        const keyName = $event.key
-        const value = keyNames[key]
-        return value === keyName || (Array.isArray(value) && value.includes(keyName))
-      })
-      if (keyName) {
-        // 避免和其他按键事件冲突
-        setTimeout(() => {
-          this.$emit(keyName, {})
-        }, 0)
-      }
-    }
-    document.addEventListener('keyup', listener)
-    // this.$once('hook:beforeDestroy', () => {
-    //   document.removeEventListener('keyup', listener)
-    // })
-  },
-	render: () => {}
-}
-// #endif

package/components/fu-popup/props.js

@@ -1,83 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 是否开启动画
-		 * @default true
-		 */
-		animation: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 弹出层方向
-		 * @values 'top' - 顶部弹出, 'center' - 中间弹出, 'bottom' - 底部弹出, 'left' - 左侧弹出, 'right' - 右侧弹出
-		 * @default 'center'
-		 */
-		mode: {
-			type: String,
-			default: 'center'
-		},
-		/**
-		 * @description 蒙版点击是否关闭弹窗
-		 */
-		isMaskClick: {
-			type: Boolean,
-			default: null
-		},
-		/**
-		 * @description 主窗口背景色
-		 */
-		bgColor: {
-			type: String,
-			default: '#FFFFFF'
-		},
-		/**
-		 * @description 是否适配底部安全区（默认 true）
-		 * @default true
-		 */
-		safeArea: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 蒙版颜色
-		 */
-		maskBgColor: {
-			type: String,
-			default: 'rgba(0, 0, 0, 0.4)'
-		},
-		/**
-		 * @description 弹出层的层级
-		 */
-		zIndex: {
-			type: [String,Number],
-			// #ifdef H5
-			default: 997
-			// #endif
-			// #ifndef H5
-			default: 10075
-			// #endif
-		},
-		/**
-		 * @description 是否显示关闭图标，默认false
-		 */
-		showClose: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 设置关闭图标位置
-		 */
-		closeIconPos: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 设置圆角
-		 */
-		radius: {
-			type: [String,Number],
-			default: 0
-		}
-	}
-}