feat: add message

packages/message/index.ts

@@ -0,0 +1,49 @@
+import { h, render } from 'vue' //h() 更准确的名称是 createVnode()
+import rMessage from './index.vue'
+
+const Message = (options: {
+  message?: string
+  type?: 'info' | 'success' | 'error' | 'warn'
+  icon?: string
+  timeout?: number
+}) => {
+  if (!options) return
+
+  //message 是弹窗消息内容
+  //type 是消息类型
+  //timeout 是弹窗存在时间
+  //icon 是自定义图标
+  const message = options.message || ''
+  const type = options.type || 'info'
+  const timeout = options.timeout || 3000
+  const icon = options.icon
+
+  //动态创建一个DOM容器
+  const container: HTMLDivElement | string =
+    typeof document !== 'undefined'
+      ? typeof document.createElement !== 'undefined'
+        ? document.createElement('div')
+        : ''
+      : ''
+
+  if (container instanceof HTMLDivElement) {
+    document.body.appendChild(container)
+
+    //传递给组件的选项
+    const vnode = h(rMessage, { message, type, icon, timeout })
+    render(vnode, container)
+
+    //定时销毁
+    let timer: any = null
+
+    clearTimeout(timer)
+
+    timer = setTimeout(() => {
+      render(null, container)
+      if (typeof document !== 'undefined') document.body.removeChild(container)
+      clearTimeout(timer)
+    }, timeout)
+  }
+}
+
+export default Message

packages/message/index.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { defineProps, ref, onMounted } from 'vue'
+import type { messageProps } from './type'
+
+defineOptions({
+  name: 'rMessage'
+})
+
+const props = withDefaults(defineProps<messageProps>(), {
+  type: 'info'
+})
+
+const iconStyle = ref({
+  info: {
+    icon: props.icon || 'm-icon-prompt-filling'
+  },
+  error: {
+    icon: props.icon || 'm-icon-delete-filling'
+  },
+  success: {
+    icon: props.icon || 'm-icon-success'
+  },
+  warn: {
+    icon: props.icon || 'm-icon-warning'
+  }
+})
+
+const showValue = ref(false)
+onMounted(() => {
+  showValue.value = true
+})
+</script>
+
+<template>
+  <Transition name="slide-fade">
+    <div
+      class="message"
+      v-show="showValue"
+      :class="[
+        type === 'info' ? 'color-info' : '',
+        type === 'error' ? 'color-error' : '',
+        type === 'success' ? 'color-success' : '',
+        type === 'warn' ? 'color-warn' : ''
+      ]"
+    >
+      <i :class="iconStyle[type].icon"></i>
+      <span class="message-slot">{{ message }}</span>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+div.slide-fade-enter-from,
+div.slide-fade-leave-to {
+  transform: translate(-50%, -65px);
+  opacity: 0;
+}
+
+.message {
+  display: flex;
+  position: fixed;
+  left: 50%;
+  top: 25px;
+  transform: translateX(-50%);
+  padding: 5px 20px;
+  min-height: 45px;
+  border-radius: 5px;
+  font-size: 14px;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.message.color-info {
+  background-color: #f4f4f5;
+  color: #909399;
+}
+
+.message.color-error {
+  background-color: #fef0f0;
+  color: #f56f6f;
+}
+
+.message.color-success {
+  background-color: #f0f9eb;
+  color: #68c23b;
+}
+
+.message.color-warn {
+  background-color: #fdf6ec;
+  color: #e6a33e;
+}
+
+.message i {
+  margin-right: 8px;
+  vertical-align: middle;
+  font-size: 16px;
+}
+
+</style>

packages/message/type.ts

@@ -0,0 +1,5 @@
+export interface messageProps {
+  message?: string
+  type: 'info' | 'success' | 'error' | 'warn'
+  icon?: string
+}