1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
| <template>
| <view class="cl-dialog__wrapper">
| <cl-popup
| v-model="visible"
| direction="center"
| :close-on-click-modal="closeOnClickModal"
| :size="width"
| :border-radius="16"
| :padding="0"
| @close="onClose"
| @closed="onClosed"
| >
| <view class="cl-dialog">
| <!-- 顶部 -->
| <view class="cl-dialog__header" v-if="title">
| <slot name="header">
| {{ title }}
| </slot>
| </view>
|
| <!-- 内容 -->
| <view class="cl-dialog__container" :style="{ textAlign }">
| <slot> </slot>
| </view>
|
| <!-- 底部 -->
| <view class="cl-dialog__footer" v-if="$slots.footer">
| <slot name="footer"> </slot>
| </view>
|
| <!-- 关闭按钮 -->
| <view class="cl-dialog__close" v-if="showCloseBtn" @tap="close">
| <text class="cl-icon-close"></text>
| </view>
| </view>
| </cl-popup>
| </view>
| </template>
|
| <script lang="ts">
| import { defineComponent, ref, watch } from "vue";
| import type { PropType } from "vue";
|
| export default defineComponent({
| name: "cl-dialog",
|
| props: {
| // 是否可见
| modelValue: Boolean,
| // 标题
| title: String,
| // 文字对齐
| textAlign: {
| type: String as PropType<"left" | "center" | "right">,
| default: "left",
| },
| // 宽度
| width: {
| type: String,
| default: "80%",
| },
| // 点击遮罩层是否关闭
| closeOnClickModal: {
| type: Boolean,
| default: true,
| },
| // 显示关闭按钮
| showCloseBtn: Boolean,
| },
|
| setup(props, { emit }) {
| const visible = ref(false);
|
| watch(
| () => props.modelValue,
| (val) => {
| visible.value = val;
| },
| {
| immediate: true,
| },
| );
|
| function open() {
| visible.value = true;
| }
|
| function close() {
| visible.value = false;
| }
|
| function onClose() {
| emit("update:modelValue", false);
| emit("close");
| }
|
| function onClosed() {
| emit("closed");
| }
|
| return {
| visible,
| open,
| close,
| onClose,
| onClosed,
| };
| },
| });
| </script>
|
|
