menduner/src/plugins/curtain/components/message.vue

<!-- 通知 -->
<template>
  <v-app>
    <v-dialog
      v-model="dialog"
      :max-width="dialogWidth"
      :persistent="persistent || false"
    >
      <div class="white-bgc pa-5" style="border-radius: 2px; max-height: 600px; overflow-y: auto;">
        <div :class="['d-flex', {'flex-column': componentMap[name]}, 'align-center', {'mb-5': componentMap[name]}]">
          <!-- 前置图标 -->
          <span
            v-if="icon"
            :style="{color: iconColor? iconColor : color, fontSize: iconFontSize}"
            :class="[icon]"
            class="ml-2 mr-2"
          ></span>
          <svg-icon :name="name" :size="iconFontSize"></svg-icon>
          <!-- 文字 -->
          <div class="font-size-18" :style="{color:color}">{{message}}</div>
        </div>
      </div>
      <div class="text-center mt-3">
        <span style="color: white; font-size: 28px;" class="mdi mdi-close-circle-outline cursor-pointer" @click="dialog = false"></span>
      </div>
    </v-dialog>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({name: 'curtain-message'})

defineProps({
  message: String, // 单条数据，也可以用list['']
  // list: Array, // 多条数据一起展示传list['', '']
  persistent: Boolean, // false: 点击遮罩层关闭dialog
  icon: String, // 前置图标
  dialogWidth: {
    type: [Number, String],
    default: '450'
  },
  iconFontSize: {
    type: String,
    default: '50px'
  },
  color: {
    type: String,
    default: 'darkorange'
  },
  iconColor: {
    type: String,
    default: ''
  },
  // 要展示的组件
  name: {
    type: String,
    default: ''
  }
})

const dialog = ref(true)

</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  // display: none;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>