docs: Message添加文档描述

Author: coderyjw

src/components/Doc.vue

@@ -22,6 +22,7 @@ const props = defineProps({
  },
  type: {
  type: String,
+ values: ["prop", "slot", "event", "methods"],
  default: "prop",
  },
  body: {

src/lib/message/src/message-method.ts

@@ -11,7 +11,7 @@ const message = function (options = {}) {
  options = { message: options };
  }
 
- let verticalOffset = 20;
+ let verticalOffset = options.offset || 20;
  instances.forEach(({ vm }) => {
  verticalOffset += (vm.el?.offsetHeight || 0) + 16;
  });
@@ -90,7 +90,6 @@ export function close(id: string, userOnClose?: (vm: VNode) => void): void {
 
  const removedHeight = vm.el!.offsetHeight;
  instances.splice(idx, 1);
- console.log(userOnClose, vm);
 
  // adjust other instances vertical offset
  const len = instances.length;

src/lib/message/src/message.ts

@@ -42,7 +42,7 @@ export const messageProps = {
  },
 };
 
-export const messageEmits = ["destory"];
+export const messageEmits = ["destroy"];
 
 type MessageQueueItem = {
  vm: VNode;

src/views/doc/affix/index.vue

@@ -10,7 +10,7 @@
  <Doc title="事件" type="event" :body="eventDoc" />
  <Doc title="方法" type="methods" :body="methodsDoc" />
  <PrevAndNext
- :prev="{ path: '/doc/dialog', name: '对话框 Dialog' }"
+ :prev="{ path: '/doc/message', name: '信息 Message' }"
  :next="{ path: '/doc/backtop', name: '回到顶部 Backtop' }"
  />
  </div>

src/views/doc/dialog/index.vue

@@ -10,7 +10,7 @@
  <Doc title="事件" type="event" :body="eventDoc" />
  <PrevAndNext
  :prev="{ path: '/doc/alert', name: 'Alert 提示' }"
- :next="{ path: '/doc/Affix', name: '固钉 Affix' }"
+ :next="{ path: '/doc/message', name: '信息 Message' }"
  />
  </div>
 </template>

src/views/doc/message/index.vue

@@ -7,6 +7,12 @@
  <Preview :component="MessagePreview2" />
  <Preview :component="MessagePreview3" />
  <Preview :component="MessagePreview4" />
+ <Doc title="配置项" type="prop" :body="propDoc" />
+ <Doc title="方法" type="methods" :body="methodsDoc" />
+ <PrevAndNext
+ :prev="{ path: '/doc/dialog', name: 'Dialog 对话框' }"
+ :next="{ path: '/doc/Affix', name: '固钉 Affix' }"
+ />
  </div>
  </div>
 </template>
@@ -17,6 +23,39 @@ import MessagePreview1 from "./MessagePreview1.preview.vue";
 import MessagePreview2 from "./MessagePreview2.preview.vue";
 import MessagePreview3 from "./MessagePreview3.preview.vue";
 import MessagePreview4 from "./MessagePreview4.preview.vue";
+import PrevAndNext from "@/components/PrevAndNext.vue";
+import Doc from "@/components/Doc.vue";
+
+const propDoc = [
+ ["message", "消息文字", "string / VNode", "-", "-"],
+ ["type", "消息类型", "string", "success / warning / info / error", "info"],
+ [
+ "duration",
+ "显示时间，单位为毫秒。 设为 0 则不会自动关闭",
+ "number",
+ "-",
+ "3000",
+ ],
+ ["show-close", "是否显示关闭按钮", "boolean", "-", "false"],
+ ["center", "文字是否居中", "boolean", "-", "false"],
+ [
+ "on-close",
+ "关闭时的回调函数, 参数为被关闭的 message 实例",
+ "function",
+ "-",
+ "-",
+ ],
+ ["offset", "Message 距离窗口顶部的偏移量", "number", "-", "20"],
+ [
+ "appendTo",
+ "设置组件的根元素",
+ "string / HTMLElement",
+ "-",
+ "document.body",
+ ],
+];
+
+const methodsDoc = [["close", "关闭当前的 Message", "-"]];
 </script>
 
 <style lang="scss">