feat: Alert 自定义文案描述

Author: coderyjw

src/lib/alert/index.vue

@@ -39,7 +39,9 @@
 
  <div class="jw-alert-body">
  <div class="jw-alert-body-title">{{ title }}</div>
- <div class="jw-alert-body-content"></div>
+ <div class="jw-alert-body-content" v-if="description">
+ {{ description }}
+ </div>
  </div>
  </div>
 </template>
@@ -53,7 +55,7 @@ import { CloseCircle } from "@vicons/ionicons5";
 const props = defineProps({
  title: {
  type: String,
- default: "",
+ default: "Title",
  },
  description: {
  type: String,
@@ -93,6 +95,7 @@ export default {
  opacity: 1;
  display: flex;
  align-items: center;
+ align-items: flex-start;
  transition: opacity 0.2s;
 
  &.is-center {
@@ -101,6 +104,8 @@ export default {
 
  .jw-alert-icon {
  margin-right: 10px;
+ height: 100%;
+ display: flex;
  }
  .jw-alert-body {
  .jw-alert-body-title {
@@ -110,6 +115,12 @@ export default {
  font-weight: 500;
  color: rgb(31, 34, 37);
  }
+ .jw-alert-body-content {
+ transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ margin-top: 9px;
+ font-size: 14px;
+ color: rgb(51, 54, 57);
+ }
  }
 
  &.jw-alert-default {

src/views/doc/alert/AlertPreview4.preview.vue

@@ -0,0 +1,13 @@
+<preview>自定义描述文案</preview>
+<template>
+ <jw-alert
+ title="Success 类型"
+ type="success"
+ show-icon
+ center
+ description="这是一段描述"
+ />
+</template>
+<script setup lang="ts">
+import { IosAirplane } from "@vicons/ionicons4";
+</script>

src/views/doc/alert/index.vue

@@ -6,6 +6,7 @@
  <Preview :component="AlertPreview1" />
  <Preview :component="AlertPreview2" />
  <Preview :component="AlertPreview3" />
+ <Preview :component="AlertPreview4" />
  </div>
  </div>
 </template>
@@ -15,6 +16,7 @@ import Preview from "@/components/Preview.vue";
 import AlertPreview1 from "./AlertPreview1.preview.vue";
 import AlertPreview2 from "./AlertPreview2.preview.vue";
 import AlertPreview3 from "./AlertPreview3.preview.vue";
+import AlertPreview4 from "./AlertPreview4.preview.vue";
 </script>
 
 <style lang="scss">