initial commit

src/views/demo/feat/msg/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="p-4">
+    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Message">
+      <a-button @click="infoMsg('Info message')" class="mr-2">Info</a-button>
+      <a-button @click="successMsg('Success message')" class="mr-2" color="success">
+        Success
+      </a-button>
+      <a-button @click="warningMsg('Warning message')" class="mr-2" color="warning">
+        Warning
+      </a-button>
+      <a-button @click="errorMsg('Error message')" class="mr-2" color="error"> Error </a-button>
+      <a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button>
+    </CollapseContainer>
+
+    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm">
+      <a-button @click="handleConfirm('warning')" color="warning" class="mr-2">Warning</a-button>
+      <a-button @click="handleConfirm('success')" color="success" class="mr-2">Success</a-button>
+      <a-button @click="handleConfirm('error')" color="error" class="mr-2">Error</a-button>
+    </CollapseContainer>
+
+    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Modal">
+      <a-button @click="handleInfoModal" class="mr-2">Info</a-button>
+      <a-button @click="handleSuccessModal" color="success" class="mr-2">Success</a-button>
+      <a-button @click="handleErrorModal" color="error" class="mr-2">Error</a-button>
+      <a-button @click="handleWarningModal" color="warning" class="mr-2">Warning</a-button>
+    </CollapseContainer>
+
+    <CollapseContainer
+      class="px-20 bg-white w-full h-32 rounded-md mt-5"
+      title="Notification 用法与上面一致"
+    >
+      <a-button @click="handleNotify" color="success" class="mr-2">Success</a-button>
+    </CollapseContainer>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  export default defineComponent({
+    components: { CollapseContainer },
+    setup() {
+      const {
+        createMessage,
+        createConfirm,
+        createSuccessModal,
+        createInfoModal,
+        createErrorModal,
+        createWarningModal,
+        notification,
+      } = useMessage();
+      const { info, success, warning, error } = createMessage;
+
+      function handleLoading() {
+        createMessage.loading('Loading...');
+      }
+      function handleConfirm(type: 'warning' | 'error' | 'success') {
+        createConfirm({
+          iconType: type,
+          title: 'Tip',
+          content: 'content message...',
+        });
+      }
+      function handleSuccessModal() {
+        createSuccessModal({ title: 'Tip', content: 'content message...' });
+      }
+      function handleErrorModal() {
+        createErrorModal({ title: 'Tip', content: 'content message...' });
+      }
+      function handleWarningModal() {
+        createWarningModal({ title: 'Tip', content: 'content message...' });
+      }
+      function handleInfoModal() {
+        createInfoModal({ title: 'Tip', content: 'content message...' });
+      }
+      function handleNotify() {
+        notification.success({
+          message: 'Tip',
+          description: 'content message...',
+        });
+      }
+      return {
+        infoMsg: info,
+        successMsg: success,
+        warningMsg: warning,
+        errorMsg: error,
+        handleLoading,
+        handleConfirm,
+        handleSuccessModal,
+        handleErrorModal,
+        handleWarningModal,
+        handleInfoModal,
+        handleNotify,
+      };
+    },
+  });
+</script>