feat: Message 居中

Author: coderyjw

src/lib/message/src/message.ts

@@ -36,6 +36,10 @@ export const messageProps = {
  type: Boolean,
  default: false,
  },
+ center: {
+ type: Boolean,
+ default: false,
+ },
 };
 
 export const messageEmits = ["destory"];

src/lib/message/src/message.vue

@@ -11,6 +11,10 @@
  v-show="visible"
  :style="customStyle"
  :id="id"
+ :class="{
+ 'is-close': close,
+ 'is-center': center,
+ }"
  >
  <jw-icon
  class="jw-message-icon"
@@ -47,7 +51,12 @@
  <slot>
  {{ message }}
  </slot>
- <jw-icon v-if="showClose" :size="18" class="jw-close-icon" @click.stop="close">
+ <jw-icon
+ v-if="showClose"
+ :size="18"
+ class="jw-close-icon"
+ @click.stop="close"
+ >
  <Close />
  </jw-icon>
  </div>
@@ -116,6 +125,12 @@ export default {
  transform 0.3s var(--jw-bezier), margin-bottom 0.3s var(--jw-bezier),
  top 0.3s var(--jw-bezier);
 
+ &.is-close {
+ padding-right: 38px;
+ }
+ &.is-center {
+ justify-content: center;
+ }
  .jw-message-icon {
  margin-right: 10px;
  }

src/views/doc/message/MessagePreview4.preview.vue

@@ -0,0 +1,44 @@
+<preview>居中</preview>
+<template>
+ <jw-button @click="open1">Info</jw-button>
+ <jw-button @click="open2">success</jw-button>
+ <jw-button @click="open3">Warning</jw-button>
+ <jw-button @click="open4">Error</jw-button>
+</template>
+
+<script setup lang="ts">
+import JwMessage from "@/lib/message/index.ts";
+
+const open1 = () => {
+ JwMessage({
+ message: "this is a message.",
+ showClose: true,
+ center: true,
+ });
+};
+const open2 = () => {
+ JwMessage({
+ message: "Congrats, this is a success message.",
+ type: "success",
+ showClose: true,
+ center: true,
+ });
+};
+const open3 = () => {
+ JwMessage({
+ message: "Warning, this is a warning message.",
+ type: "warning",
+ showClose: true,
+ center: true,
+ });
+};
+const open4 = () => {
+ JwMessage({
+ type: "error",
+ message: "Oops, this is a error message.",
+ showClose: true,
+ duration: 0,
+ center: true,
+ });
+};
+</script>

src/views/doc/message/index.vue

@@ -6,6 +6,7 @@
  <Preview :component="MessagePreview1" />
  <Preview :component="MessagePreview2" />
  <Preview :component="MessagePreview3" />
+ <Preview :component="MessagePreview4" />
  </div>
  </div>
 </template>
@@ -15,6 +16,7 @@ import Preview from "@/components/Preview.vue";
 import MessagePreview1 from "./MessagePreview1.preview.vue";
 import MessagePreview2 from "./MessagePreview2.preview.vue";
 import MessagePreview3 from "./MessagePreview3.preview.vue";
+import MessagePreview4 from "./MessagePreview4.preview.vue";
 </script>
 
 <style lang="scss">