118 lines
2.6 KiB
Vue
118 lines
2.6 KiB
Vue
<template>
|
|
<uni-popup ref="PopupRef" class="popup" :mask-click="false">
|
|
<view class="popup-content">
|
|
<view class="fl1"></view>
|
|
<view class="popup_div">
|
|
<view class="title_div">
|
|
<!-- 1. 插槽优先 -->
|
|
<slot name="title" v-if="$slots.title"></slot>
|
|
<!-- 2. 有HTML内容且不为空时使用v-html -->
|
|
<view v-else-if="html && html.trim() !== ''" v-html="html"></view>
|
|
<!-- 3. 最后显示默认标题 -->
|
|
<template v-else>{{ title }}</template>
|
|
</view>
|
|
<view v-if="msg">{{ msg }}</view>
|
|
<view class="button_div">
|
|
<view class="button_item" v-for="item in buttonList" :style="item?.style" @click="click_button(item)">
|
|
{{ item?.name || '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fl1"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
dialogConfiguration: {
|
|
type: Object,
|
|
required: false
|
|
}
|
|
});
|
|
const emit = defineEmits(['button_click']);
|
|
|
|
const title = ref('');
|
|
const html = ref('');
|
|
const msg = ref('');
|
|
const buttonList = ref([]);
|
|
const PopupRef = ref(null);
|
|
// 点击按钮
|
|
const click_button = (value) => {
|
|
emit('button_click', value);
|
|
};
|
|
|
|
const close = () => PopupRef.value?.close();
|
|
const open = (dialogConfiguration) => {
|
|
// 解构赋值更清晰
|
|
const { title: t, html: h, msg: m, buttonList: bl = [] } = dialogConfiguration || props.dialogConfiguration || {};
|
|
title.value = t || '';
|
|
html.value = h || '';
|
|
msg.value = m || '';
|
|
buttonList.value = Array.isArray(bl) ? bl : [];
|
|
|
|
// 确保PopupRef存在再调用open
|
|
if (PopupRef.value) {
|
|
PopupRef.value.open('bottom');
|
|
}
|
|
};
|
|
defineExpose({
|
|
open,
|
|
close
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.popup {
|
|
z-index: 1810;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.popup-content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.popup_div {
|
|
width: 80%;
|
|
background-color: #ffffff;
|
|
padding: 20rpx 34rpx 50rpx 34rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 16rpx;
|
|
position: relative;
|
|
margin-top: 6vw;
|
|
margin-bottom: 30vw;
|
|
.title_div {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
font-family: PingFangSC;
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.button_div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.button_item {
|
|
margin-top: 30rpx;
|
|
width: 356rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|