feat: Alert添加文档描述

Author: coderyjw

src/lib/alert/index.vue

@@ -48,9 +48,13 @@
  </slot>
 
  <div class="jw-alert-body">
- <div class="jw-alert-body-title">{{ title }}</div>
+ <div class="jw-alert-body-title">
+ <slot name="title">
+ {{ title }}
+ </slot>
+ </div>
  <div class="jw-alert-body-content" v-if="description">
- {{ description }}
+ <slot>{{ description }}</slot>
  </div>
  </div>
  </div>
@@ -84,6 +88,7 @@ const props = defineProps({
  center: Boolean,
 });
 
+const emits = defineEmits(['close'])
 const classes = computed(() => ({
  [`jw-alert-${props.type}`]: props.type,
  "is-center": props.center,
@@ -94,6 +99,7 @@ const visible = ref(true);
 
 const close = () => {
  visible.value = false;
+ emits('close')
 };
 </script>
 <script lang="ts">

src/views/doc/alert/index.vue

@@ -8,6 +8,13 @@
  <Preview :component="AlertPreview3" />
  <Preview :component="AlertPreview4" />
  <Preview :component="AlertPreview5" />
+ <Doc title="属性" type="prop" :body="propsDoc" />
+ <Doc title="事件" type="event" :body="eventDoc" />
+ <Doc title="插槽" type="slot" :body="slotDoc" />
+ <PrevAndNext
+ :prev="{ path: '/doc/switch', name: '开关 Switch' }"
+ :next="{ path: '/doc/dialog', name: '对话框 Dialog' }"
+ />
  </div>
  </div>
 </template>
@@ -19,6 +26,29 @@ import AlertPreview2 from "./AlertPreview2.preview.vue";
 import AlertPreview3 from "./AlertPreview3.preview.vue";
 import AlertPreview4 from "./AlertPreview4.preview.vue";
 import AlertPreview5 from "./AlertPreview5.preview.vue";
+import PrevAndNext from "@/components/PrevAndNext.vue";
+import Doc from "@/components/Doc.vue";
+
+const propsDoc = [
+ ["title", "标题", "string", "-", "-"],
+ [
+ "type",
+ "类型",
+ "string",
+ "default / info / success / warning / error",
+ "default",
+ ],
+ ["content", "辅助性文字", "string", "-", "-"],
+ ["closable", "是否可关闭", "boolean", "-", "false"],
+ ["center", "文字是否居中", "boolean", "-", "false"],
+ ["show-icon", "是否显示图标", "boolean", "-", "false"],
+];
+const eventDoc = [["close", "关闭 Alert 时触发的事件", "-"]];
+const slotDoc = [
+ ["default", "辅助性文字"],
+ ["icon", "图标"],
+ ["title", "标题"],
+];
 </script>
 
 <style lang="scss">

src/views/doc/dialog/index.vue

@@ -9,7 +9,7 @@
  <Doc title="插槽" type="slot" :body="slotDoc" />
  <Doc title="事件" type="event" :body="eventDoc" />
  <PrevAndNext
- :prev="{ path: '/doc/switch', name: 'Switch 开关 ' }"
+ :prev="{ path: '/doc/alert', name: 'Alert 提示' }"
  :next="{ path: '/doc/Affix', name: '固钉 Affix' }"
  />
  </div>

src/views/doc/switch/index.vue

@@ -8,7 +8,7 @@
  <Doc title="属性" type="prop" :body="propDoc" />
  <PrevAndNext
  :prev="{ path: '/doc/select', name: 'Select 选择器' }"
- :next="{ path: '/doc/dialog', name: '对话框 Dialog' }"
+ :next="{ path: '/doc/alert', name: '提示 Alert' }"
  />
  </div>
 </template>