CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2021-01-05 31ff0559fe3b635fc2091aac0e2f5e340629134c
提交 | 用户 | 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>