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
| /**
| * CAlert - alert 弹窗
| * @author Tevin
| */
|
| <template>
| <AtModal
| class="c-alert"
| :class="mode==='confirm'?'c-alert-confirm':''"
| v-show="isOpened"
| :isOpened="isOpened"
| >
| <AtModalHeader v-if="title">{{title}}</AtModalHeader>
| <AtModalContent>
| {{content}}
| </AtModalContent>
| <AtModalAction>
| <button @tap="evt => handleClose()">{{mode==='alert'?'知道了':'取消'}}</button>
| <button
| @tap="evt => handleConfirm()"
| v-if="mode==='comfirm'"
| >确定</button>
| </AtModalAction>
| </AtModal>
| </template>
|
| <script>
| import Taro from '@tarojs/taro';
| import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui-vue';
| import { Tools } from '@components/common/Tools';
|
| export default {
| name: 'CAlert',
| components: {
| AtModal,
| AtModalHeader,
| AtModalContent,
| AtModalAction,
| },
| props: {
| onConfirm: Function,
| },
| data() {
| return {
| mode: 'alert',
| isOpened: false,
| title: '',
| content: '',
| };
| },
| methods: {
| handleClose() {
| this.isOpened = false;
| },
| handleConfirm() {
| this.isOpened = false;
| this.onConfirm && this.onConfirm();
| },
| $alert(option) {
| if (!option) {
| return;
| }
| this.mode = 'alert';
| if (typeof option === 'string') {
| this.title = '';
| this.content = option;
| } else if (Tools.isObject(option)) {
| this.title = option.title;
| this.content = option.content;
| }
| this.isOpened = true;
| },
| $confirm(option) {
| if (!option) {
| return;
| }
| this.mode = 'comfirm';
| if (typeof option === 'string') {
| this.title = '';
| this.content = option;
| } else if (Tools.isObject(option)) {
| this.title = option.title;
| this.content = option.content;
| }
| this.isOpened = true;
| },
| },
| };
| </script>
|
|
