当前位置：首页 > news >正文

uniapp + Vue3自定义封装弹窗组件

news 来源：原创 2024/9/20 0:39:50

uniapp + Vue3自定义封装弹窗组件

需求背景

在uniapp项目中，有时候需要弹出一个自定义的弹窗组件，比如提示框、确认框、选择框等。

实现方案

1. 创建弹窗组件

首先，我们需要创建一个弹窗组件，比如my-dialog.vue：

<script setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue'// 定义组件名称
const component = {name: "yc-dialog"
}// 定义组件的 props
const props = defineProps({title: { type: String, default: 'Title' },content: { type: String, default: 'Concent' },confirmText: { type: String, default: "Confirm" },cancelText: { type: String, default: 'Cancel' }
})// 定义组件的 emits
const emit = defineEmits(['clickConfirm', 'clickCancel'])// 是否显示弹窗
const isDialog = ref(false)// 弹窗确认
const handleConfirm = () => {emit('clickConfirm')
}// 弹窗取消
const handleCancel = () => {emit('clickCancel')isDialog.value = false
}// 暴露 isDialog 变量
defineExpose({ isDialog })
</script><template><!-- 自定义弹窗组件 --><div class="my-dialog" v-if="isDialog"><div class="dialog-box"><div class="dialog-title"><text>{{ title }}</text></div><div class="dialog-content"><text>{{ content }}</text></div><div class="dialog-btns"><div class="btn-item" @click="handleConfirm"><text>{{ confirmText }}</text></div><div class="btn-item" @click="handleCancel"><text>{{ cancelText }}</text></div></div> </div></div>
</template><style scoped lang="scss">
// 定义弹窗背景颜色
$dialog-bgc: #F8F8F8;.my-dialog {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);.dialog-box {width: 80%;height: 300rpx;margin: auto;background-color: $dialog-bgc;border-radius: 20rpx;position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;justify-content: space-around;line-height: 100rpx;.dialog-title {flex: 1;font-size: 40rpx;font-weight: 600;text-align: center;}.dialog-content {flex: 1;font-size: 35rpx;text-align: center;line-height: 60rpx;}.dialog-btns {flex: 1;display: flex;justify-content: space-around;.btn-item {width: 160rpx;height: 80rpx;line-height: 80rpx;text-align: center;border-radius: 12rpx;background-color: #409eff;color: #F8F8F8;}.btn-item:last-child {background-color: #fff;color: #409eff;}}}
}
</style>

2. 使用弹窗组件

然后，在需要弹出弹窗的页面，比如index.vue中，使用my-dialog.vue组件：

<template><view><button type="primary" @click="showDialog">弹出弹窗</button><yc-dialogref="dialogRef":title="title":content="content":confirmText="confirmText":cancelText="cancelText"@clickConfirm="handleConfirm"@clickCancel="handleCancel"/><view><text>Hello World</text></view></view>
</template><script setup>
import { ref } from 'vue'
import YcDialog from './my-dialog.vue'const dialogRef = ref(null)const title = ref('弹窗标题')
const content = ref('弹窗内容')
const confirmText = ref('确认')
const cancelText = ref('取消')// 显示弹窗
const showDialog = () => {dialogRef.value.isDialog = true
}const handleConfirm = () => {console.log('confirm')// 需要执行的函数// ...
}const handleCancel = () => {console.log('cancel')// 需要执行的函数// ...
}</script>