【项目】UniApp实战多端企业网盘全栈开发 16 全局弹出层组件封装【一】

痛定思痛。 2024-03-22 14:55 57阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  16 全局弹出层组件封装【一】

![在这里插入图片描述][d64728646b0d4b718d027c49111e2d06.png_pic_center]

##### 16 全局弹出层组件封装【一】 #####

![在这里插入图片描述][ed5788b557114e5a9defc19855e192d2.png_pic_center]

下载和分享先不管，先看删除和重命名

同样是复用hello-uniapp 项目中的uni 组件

`uni-popup.vue`

<template>
    	<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
    		<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
    			@click="onTap" />
    		<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
    			<view class="uni-popup__wrapper-box" @click.stop="clear">
    				<slot />
    			</view>
    		</uni-transition>
    	</view>
    </template>
    
    <script>
    	import uniTransition from '../uni-transition/uni-transition.vue'
    
    	/**
    	 * PopUp 弹出层
    	 * @description 弹出层组件，为了解决遮罩弹层的问题
    	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
    	 * @property {String} type = [top|center|bottom] 弹出方式
    	 * 	@value top 顶部弹出
    	 * 	@value center 中间弹出
    	 * 	@value bottom 底部弹出
    	 * @property {Boolean} animation = [ture|false] 是否开启动画
    	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
    	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
    	 */
    
    	export default {
    		name: 'UniPopup',
    		components: {
    			uniTransition
    		},
    		props: {
    			// 开启动画
    			animation: {
    				type: Boolean,
    				default: true
    			},
    			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
    			type: {
    				type: String,
    				default: 'center'
    			},
    			// maskClick
    			maskClick: {
    				type: Boolean,
    				default: true
    			}
    		},
    		data() {
    			return {
    				duration: 300,
    				ani: [],
    				showPopup: false,
    				showTrans: false,
    				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,
    				}
    			}
    		},
    		watch: {
    			type: {
    				handler: function(newVal) {
    					switch (this.type) {
    						case 'top':
    							this.ani = ['slide-top']
    							this.transClass = {
    								'position': 'fixed',
    								'left': 0,
    								'right': 0,
    							}
    							break
    						case 'bottom':
    							this.ani = ['slide-bottom']
    							this.transClass = {
    								'position': 'fixed',
    								'left': 0,
    								'right': 0,
    								'bottom': 0
    							}
    							break
    						case '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'
    							}
    
    							break
    					}
    				},
    				immediate: true
    			}
    		},
    		created() {
    			if (this.animation) {
    				this.duration = 300
    			} else {
    				this.duration = 0
    			}
    		},
    		methods: {
    			clear(e) {
    				// TODO nvue 取消冒泡
    				e.stopPropagation()
    			},
    			open() {
    				this.showPopup = true
    				this.$nextTick(() => {
    					clearTimeout(this.timer)
    					this.timer = setTimeout(() => {
    						this.showTrans = true
    					}, 50);
    				})
    				this.$emit('change', {
    					show: true
    				})
    			},
    			close(type = false) {
    				this.showTrans = false
    				this.$nextTick(() => {
    					clearTimeout(this.timer)
    					this.timer = setTimeout(() => {
    						this.$emit('change', {
    							show: false
    						})
    						this.showPopup = false
    					}, 300)
    				})
    			},
    			onTap() {
    				if (!this.maskClick) return
    				this.close()
    			}
    		}
    	}
    </script>
    <style scoped>
    	.uni-popup {
    		position: fixed;
    		/* #ifdef H5 */
    		top: var(--window-top);
    		/* #endif */
    		/* #ifndef H5 */
    		top: 0;
    		/* #endif */
    		bottom: 0;
    		left: 0;
    		right: 0;
    		/* #ifndef APP-NVUE */
    		z-index: 9999;
    		/* #endif */
    	}
    
    	.uni-popup__mask {
    		position: absolute;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		background-color: rgba(0, 0, 0, 0.4);
    		opacity: 0;
    	}
    
    	.mask-ani {
    		transition-property: opacity;
    		transition-duration: 0.2s;
    	}
    
    	.uni-top-mask {
    		opacity: 1;
    	}
    
    	.uni-bottom-mask {
    		opacity: 1;
    	}
    
    	.uni-center-mask {
    		opacity: 1;
    	}
    
    	.uni-popup__wrapper {
    		/* #ifndef APP-NVUE */
    		display: block;
    		/* #endif */
    		position: absolute;
    	}
    
    	.top {
    		top: 0;
    		left: 0;
    		right: 0;
    		transform: translateY(-500px);
    	}
    
    	.bottom {
    		bottom: 0;
    		left: 0;
    		right: 0;
    		transform: translateY(500px);
    	}
    
    	.center {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		flex-direction: column;
    		/* #endif */
    		bottom: 0;
    		left: 0;
    		right: 0;
    		top: 0;
    		justify-content: center;
    		align-items: center;
    		transform: scale(1.2);
    		opacity: 0;
    	}
    
    	.uni-popup__wrapper-box {
    		/* #ifndef APP-NVUE */
    		display: block;
    		/* #endif */
    		position: relative;
    	}
    
    	.content-ani {
    		/* transition: transform 0.3s;
     */
    		transition-property: transform, opacity;
    		transition-duration: 0.2s;
    	}
    
    
    	.uni-top-content {
    		transform: translateY(0);
    	}
    
    	.uni-bottom-content {
    		transform: translateY(0);
    	}
    
    	.uni-center-content {
    		transform: scale(1);
    		opacity: 1;
    	}
    </style>

![在这里插入图片描述][324ed12e9ff44d0b8b192f46397f15d1.png_pic_center]

把它引入的组件也拿过来

`uni-transition.vue`

<template>
    	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]"
    		:style="'transform:' +transform+';'+stylesObject" @click="change">
    		<slot></slot>
    	</view>
    </template>
    
    <script>
    	// #ifdef APP-NVUE
    	const animation = uni.requireNativePlugin('animation');
    	// #endif
    	/**
    	 * Transition 过渡动画
    	 * @description 简单过渡动画组件
    	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
    	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
    	 * @property {Array} 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',
    		props: {
    			show: {
    				type: Boolean,
    				default: false
    			},
    			modeClass: {
    				type: Array,
    				default () {
    					return []
    				}
    			},
    			duration: {
    				type: Number,
    				default: 300
    			},
    			styles: {
    				type: Object,
    				default () {
    					return {}
    				}
    			}
    		},
    		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
    			}
    		},
    		created() {
    			// this.timer = null
    			// this.nextTick = (time = 50) => new Promise(resolve => {
    			// 	clearTimeout(this.timer)
    			// 	this.timer = setTimeout(resolve, time)
    			// 	return this.timer
    			// });
    		},
    		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
    				}
    			},
    			// getEl(el) {
    			// 	console.log(el || el.ref || null);
    			// 	return el || el.ref || null
    			// },
    			toLine(name) {
    				return name.replace(/([A-Z])/g, "-$1").toLowerCase();
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	.uni-transition {
    		transition-timing-function: ease;
    		transition-duration: 0.3s;
    		transition-property: transform, opacity;
    	}
    
    	.fade-in {
    		opacity: 0;
    	}
    
    	.fade-active {
    		opacity: 1;
    	}
    
    	.slide-top-in {
    		/* transition-property: transform, opacity; */
    		transform: translateY(-100%);
    	}
    
    	.slide-top-active {
    		transform: translateY(0);
    		/* opacity: 1; */
    	}
    
    	.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>

![在这里插入图片描述][b5292848615b4448bbbffea33c13446d.png_pic_center]

`index.vue`

![在这里插入图片描述][8fea7a2f0c9840ff8c0d4ec97d9f2eff.png_pic_center]

<uni-popup ref="dialog">123</uni-popup>

![在这里插入图片描述][f3695a0502104a6392c276e4b2da9266.png_pic_center]

![在这里插入图片描述][3c21750f58e840cbb1b5dd8d35ebb642.png_pic_center]

给底部操作条添加点击事件

// 处理底部操作条事件
    			handleBottomEvent(item) {
        
    				switch (item.name) {
        
    					case "删除":
    						this.$refs.dialog.open();
    						break;
    					default:
    						break;
    				}
    			}

试试

![在这里插入图片描述][03ac57238e9a43fb88e863420f3e63a1.png_pic_center]

选中后点击删除按钮，弹出层出来了，没问题。

这里在真机的效果是下面这样的：

![在这里插入图片描述][0234790d7e8441df98b8e7887e8525c2.png_pic_center]

> ![在这里插入图片描述][96a1c146c1324f649efa1048d50c4db4.png_pic_center]
> 
> 注意这个地方，这样才能把顶部状态栏给一并遮住。

<uni-popup ref="dialog">
    			<view style="width: 600rpx;" class="bg-white rounded">
    				<view class="flex align-center justify-center font-weight-bold border-bottom border-light-secondary" style="height: 100rpx;">
    					标题
    				</view>
    				<view class="flex align-center justify-center p-3">123</view>
    				<view class="flex border-top border-light-secondary" style="height: 100rpx;">
    					<view class="flex-1 text-muted flex align-center justify-center">取消</view>
    					<view class="flex-1 text-main flex align-center justify-center">确定</view>
    				</view>
    			</view>
    		</uni-popup>

看看效果

![在这里插入图片描述][218c518841c849cca4872165e350a068.png_pic_center]

可以。

[d64728646b0d4b718d027c49111e2d06.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/182b1b74f7cf483ea97b681e9b3fc47e.png
[ed5788b557114e5a9defc19855e192d2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/5413fd81d5bd44519b028001ae8e0c17.png
[324ed12e9ff44d0b8b192f46397f15d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f8142608d149427bb247236fd74e9d29.png
[b5292848615b4448bbbffea33c13446d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4da55d6734314ffeb56ee94ebc390a86.png
[8fea7a2f0c9840ff8c0d4ec97d9f2eff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/28c01aa7390942deb352fb5d63163d09.png
[f3695a0502104a6392c276e4b2da9266.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c963cebe74254adc9e919285d3b5ea7d.png
[3c21750f58e840cbb1b5dd8d35ebb642.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/57d79c9e2c88431ebb8970313697fd5f.png
[03ac57238e9a43fb88e863420f3e63a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4cfb2fdb181045f68068d38c3ff7e1c8.png
[0234790d7e8441df98b8e7887e8525c2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3c0422a9fe9f43319d62f299fdd88600.png
[96a1c146c1324f649efa1048d50c4db4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/520e6283723e43a8acd3bab4023fd1f8.png
[218c518841c849cca4872165e350a068.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/61b9a0fb92034bb1a4f2a10b0ed03178.png