87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="center" :mask-click="false">
|
|
<view class="agree-popup">
|
|
<!-- 弹窗头部 -->
|
|
<view class="popup-header">
|
|
<view class="popup-title">{{ title }}</view>
|
|
<view class="close-btn" @click="handleClose">
|
|
<uni-icons type="closeempty" size="24" color="#999" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 弹窗内容 -->
|
|
<view class="popup-content">
|
|
<view class="content-text">
|
|
<zero-markdown-view :markdown="agreement" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 确认按钮 -->
|
|
<view class="button-area">
|
|
<view class="confirm-btn" @click="handleClose"> 我知道了 </view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, defineProps, defineEmits, defineExpose } from "vue";
|
|
|
|
// Props定义
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "温馨提示",
|
|
},
|
|
agreement: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
// Events定义
|
|
const emits = defineEmits(["agree", "close", "cancel"]);
|
|
|
|
// 响应式数据
|
|
const popup = ref(null);
|
|
|
|
// 监听visible变化
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
show();
|
|
} else {
|
|
hide();
|
|
}
|
|
}
|
|
);
|
|
|
|
// 方法定义
|
|
const show = () => {
|
|
popup.value?.open();
|
|
};
|
|
|
|
const hide = () => {
|
|
popup.value?.close();
|
|
};
|
|
|
|
const handleClose = () => {
|
|
hide();
|
|
emits("close");
|
|
};
|
|
|
|
// 暴露方法给父组件
|
|
defineExpose({
|
|
show,
|
|
hide,
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style> |