提交 | 用户 | age
|
2f6253
|
1 |
<template> |
31ff05
|
2 |
<PageWrapper title="消息示例"> |
2f6253
|
3 |
<CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Message"> |
8f5016
|
4 |
<a-button @click="infoMsg('Info message')" class="mr-2"> Info </a-button> |
2f6253
|
5 |
<a-button @click="successMsg('Success message')" class="mr-2" color="success"> |
陈 |
6 |
Success |
|
7 |
</a-button> |
|
8 |
<a-button @click="warningMsg('Warning message')" class="mr-2" color="warning"> |
|
9 |
Warning |
|
10 |
</a-button> |
|
11 |
<a-button @click="errorMsg('Error message')" class="mr-2" color="error"> Error </a-button> |
|
12 |
<a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button> |
|
13 |
</CollapseContainer> |
|
14 |
|
|
15 |
<CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm"> |
a2c413
|
16 |
<a-button @click="handleConfirm('info')" class="mr-2">Info</a-button> |
2f6253
|
17 |
<a-button @click="handleConfirm('warning')" color="warning" class="mr-2">Warning</a-button> |
陈 |
18 |
<a-button @click="handleConfirm('success')" color="success" class="mr-2">Success</a-button> |
|
19 |
<a-button @click="handleConfirm('error')" color="error" class="mr-2">Error</a-button> |
|
20 |
</CollapseContainer> |
|
21 |
|
|
22 |
<CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Modal"> |
|
23 |
<a-button @click="handleInfoModal" class="mr-2">Info</a-button> |
|
24 |
<a-button @click="handleSuccessModal" color="success" class="mr-2">Success</a-button> |
|
25 |
<a-button @click="handleErrorModal" color="error" class="mr-2">Error</a-button> |
|
26 |
<a-button @click="handleWarningModal" color="warning" class="mr-2">Warning</a-button> |
|
27 |
</CollapseContainer> |
|
28 |
|
|
29 |
<CollapseContainer |
|
30 |
class="px-20 bg-white w-full h-32 rounded-md mt-5" |
|
31 |
title="Notification 用法与上面一致" |
|
32 |
> |
|
33 |
<a-button @click="handleNotify" color="success" class="mr-2">Success</a-button> |
|
34 |
</CollapseContainer> |
31ff05
|
35 |
</PageWrapper> |
2f6253
|
36 |
</template> |
陈 |
37 |
<script lang="ts"> |
|
38 |
import { defineComponent } from 'vue'; |
|
39 |
import { CollapseContainer } from '/@/components/Container/index'; |
|
40 |
import { useMessage } from '/@/hooks/web/useMessage'; |
31ff05
|
41 |
import { PageWrapper } from '/@/components/Page'; |
V |
42 |
|
2f6253
|
43 |
export default defineComponent({ |
31ff05
|
44 |
components: { CollapseContainer, PageWrapper }, |
2f6253
|
45 |
setup() { |
陈 |
46 |
const { |
|
47 |
createMessage, |
|
48 |
createConfirm, |
|
49 |
createSuccessModal, |
|
50 |
createInfoModal, |
|
51 |
createErrorModal, |
|
52 |
createWarningModal, |
|
53 |
notification, |
|
54 |
} = useMessage(); |
|
55 |
const { info, success, warning, error } = createMessage; |
|
56 |
|
|
57 |
function handleLoading() { |
|
58 |
createMessage.loading('Loading...'); |
|
59 |
} |
96021f
|
60 |
function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') { |
2f6253
|
61 |
createConfirm({ |
陈 |
62 |
iconType: type, |
|
63 |
title: 'Tip', |
|
64 |
content: 'content message...', |
|
65 |
}); |
|
66 |
} |
|
67 |
function handleSuccessModal() { |
|
68 |
createSuccessModal({ title: 'Tip', content: 'content message...' }); |
|
69 |
} |
|
70 |
function handleErrorModal() { |
|
71 |
createErrorModal({ title: 'Tip', content: 'content message...' }); |
|
72 |
} |
|
73 |
function handleWarningModal() { |
|
74 |
createWarningModal({ title: 'Tip', content: 'content message...' }); |
|
75 |
} |
|
76 |
function handleInfoModal() { |
|
77 |
createInfoModal({ title: 'Tip', content: 'content message...' }); |
|
78 |
} |
|
79 |
function handleNotify() { |
|
80 |
notification.success({ |
|
81 |
message: 'Tip', |
|
82 |
description: 'content message...', |
|
83 |
}); |
|
84 |
} |
|
85 |
return { |
|
86 |
infoMsg: info, |
|
87 |
successMsg: success, |
|
88 |
warningMsg: warning, |
|
89 |
errorMsg: error, |
|
90 |
handleLoading, |
|
91 |
handleConfirm, |
|
92 |
handleSuccessModal, |
|
93 |
handleErrorModal, |
|
94 |
handleWarningModal, |
|
95 |
handleInfoModal, |
|
96 |
handleNotify, |
|
97 |
}; |
|
98 |
}, |
|
99 |
}); |
|
100 |
</script> |