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

野性酷女 2024-03-22 14:55 64阅读 0赞

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

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

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

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

##### 18 全局弹出层组件封装【三】 #####

上次封装那个其实还不算完整，比如点击`确定` 按钮后，只是关闭了对话框，再进一步优化一下

`f-dialog.vue`

<template>
    	<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;">{
       {title}}</view>
    			<view class="flex align-center justify-center p-3">
    				<slot></slot>
    			</view>
    			<view class="flex border-top border-light-secondary" style="height: 100rpx;">
    				<view class="flex-1 text-muted flex align-center justify-center" @tap="cancel">{
       {cancelText}}</view>
    				<view class="flex-1 text-main flex align-center justify-center" @tap="confirm">{
       {confirmText}}</view>
    			</view>
    		</view>
    	</uni-popup>
    </template>
    
    <script>
    	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
    	export default {
    		components: {
    			uniPopup
    		},
    		props: {
    			title: {
    				type: String,
    				default: "提示"
    			},
    			cancelText: {
    				type: String,
    				default: "取消"
    			},
    			confirmText: {
    				type: String,
    				default: "确定"
    			}
    		},
    		data() {
    			return {
    				callback: false
    			}
    		},
    		methods: {
    			open(callback = false) {
    				this.callback = callback
    				this.$refs.dialog.open()
    			},
    			cancel() {
    				this.$emit('cancel')
    				this.$refs.dialog.close()
    			},
    			confirm() {
    				if (typeof this.callback === 'function') {
    					this.callback(() => {
    						this.cancel()
    					})
    				} else {
    					this.$emit('confirm')
    					this.cancel()
    				}
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

在`index.vue` 中使用

<f-dialog ref="dialog">
    			是否删除选中？
    		</f-dialog>

// 处理底部操作条事件
    			handleBottomEvent(item) {
        
    				switch (item.name) {
        
    					case "删除":
    						this.$refs.dialog.open((close) => {
        
    							console.log("点击了确认");
    						});
    						break;
    					default:
    						break;
    				}
    			}

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

现在就不会直接关闭了，因为我们后面还要执行操作，取决于close 的值

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

这样就会关闭了

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

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

当然日志打印就可以不要了

[3f317b6bcdba4b64913b3023185b3c89.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cef088ef62f64c7688fb7b9e2c675d06.png
[8faa41675b294610a665795205af1599.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9609bed769b44eccbbb095a0dac2ef89.png
[28b51d77b97d4893ae8d8169eeba6b84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2548ed78faef43618eae557645a5004e.png
[28b73f86d971416685c75b653e30bf6f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/92221e4449c449d3a8a55ad092218c26.png
[631f1b3fded34644a2fcaaffb6e286f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/665eceabb5a54e79a159a569e80ff76e.png