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

小咪咪 2024-03-22 14:55 49阅读 0赞

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

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

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

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

##### 17 全局弹出层组件封装【二】 #####

封装一下我们前面实现的那个弹出层：

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

`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 {
    
    			}
    		},
    		methods: {
    			open() {
    				this.$refs.dialog.open()
    			},
    			cancel() {
    				this.$refs.dialog.close()
    			},
    			confirm() {
    				this.cancel()
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

`index.vue` 中引入

<f-dialog ref="dialog">456</f-dialog>

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

没问题，这样就算封装完成了

[b5d350f2897b4c71bdbe5fff3b91e456.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0af789361c75468a8a6ccd2fbe81703b.png
[519d2ec4deab409e97af5f7b8390b15c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/50bdcf491bcc40189671eb6f702cfb6a.png
[bb1cacd02db54a0091dd2f02af61b6bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8feb229f7ae34ac39bcb431bf59654d7.png