uni-app弹窗组件

uni-app提供的扩展组件基本上都能适应需求，有些时候需要一个简单的弹窗组件，就自己写了一个。 效果图在最后面。先放vue代码（仅供学习参考）

template

<template>
	<view class="myDialog-box" v-if="isOpen">
		<view class="myDialog">
			<text class="head-text">{{title}}</text>
			<slot></slot>
			<view class="btn-group">
				<button type="default" @click="handleCancel">{{cancelText}}</button>
				<button type="primary" @click="handleConfirm">{{confirmText}}</button>
			</view>
		</view>
		<view class="mask"></view>
	</view>
</template>

JS

export default {
		name: "MyDialog",
		props: {
			title: {
				type: String,
				default: '确定交卷？'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			}
		},
		data() {
			return {
				isOpen: false
			};
		},
		methods: {
			open() {
				this.isOpen = !this.isOpen
			},
			close() {
				this.isOpen = !this.isOpen
			},
			// 点击取消
			handleCancel() {
				this.$emit("cancel")
			},
			// 点击确定
			handleConfirm() {
				this.$emit("confirm")
			}
		}
	}

CSS

    .myDialog-box {
		width: 100vw;
		position: fixed;
	      }

	.myDialog {
		width: 60%;
		padding: 10px;
		border: 1rpx solid black;
		border-radius: 16px;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10000;

		.head-text {
			font-weight: 600;
                        margin-bottom: 20px;
		}

		.btn-group {
			min-width: 200px;
			margin-top: 20px;
			display: flex;

			button {
				min-width: 84px;
				border-radius: 14px;
				height: 40px;
				font-size: 16px;
			}
		}
	}

	.mask{
		width: 100vw;
		height: 100vh;
		background-color: rgba(104,101,104,.4);
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 1000;
	}

**组件使用

1. 接收参数：title标题文本，cancelText取消按钮文本，confirmText确定按钮文本
   
2. 自定义事件：@cancel点击取消按钮触发 @confirm点击确认按钮触发。
   
3. 中间文本区域接收插槽可以传dom节点
   
4. 提供open() close()方法显示隐藏,this.$refs.myDialog.open()使用

使用实例

<MyDialog ref="myDialog" cancelText="离开" confirmText="再来一次"  title="我的成绩"
   @cancel="handleClose" @confirm="handleConfirm">
    <text class="score">{{score}}</text>
    <text class="content-text">分</text>
    <navigator>查看排行榜</navigator>
</MyDialog>

效果图