feat: Alert添加center属性 使文字居中

Author: coderyjw

src/lib/alert/index.vue

@@ -73,6 +73,7 @@ const props = defineProps({
 
 const classes = computed(() => ({
  [`jw-alert-${props.type}`]: props.type,
+ "is-center": props.center,
 }));
 </script>
 <script lang="ts">
@@ -94,6 +95,10 @@ export default {
  align-items: center;
  transition: opacity 0.2s;
 
+ &.is-center {
+ justify-content: center;
+ }
+
  .jw-alert-icon {
  margin-right: 10px;
  }

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

@@ -0,0 +1,17 @@
+<preview>使文字居中</preview>
+<template>
+ <jw-alert title="Default 类型" center>
+ <template #icon>
+ <jw-icon class="jw-alert-icon" :size="22">
+ <IosAirplane />
+ </jw-icon>
+ </template>
+ </jw-alert>
+ <jw-alert title="Info 类型" type="info" show-icon center />
+ <jw-alert title="Success 类型" type="success" show-icon center />
+ <jw-alert title="Warning 类型" type="warning" show-icon center />
+ <jw-alert title="Error 类型" type="error" show-icon center />
+</template>
+<script setup lang="ts">
+import { IosAirplane } from "@vicons/ionicons4";
+</script>

src/views/doc/alert/index.vue

@@ -5,6 +5,7 @@
  <div class="preview-wrapper">
  <Preview :component="AlertPreview1" />
  <Preview :component="AlertPreview2" />
+ <Preview :component="AlertPreview3" />
  </div>
  </div>
 </template>
@@ -13,6 +14,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";
 </script>
 
 <style lang="scss">