|
@@ -3,20 +3,21 @@
|
|
|
<v-app>
|
|
|
<v-dialog
|
|
|
v-model="dialog"
|
|
|
- max-width="400"
|
|
|
+ :max-width="dialogWidth"
|
|
|
:persistent="persistent || false"
|
|
|
>
|
|
|
<div class="white-bgc pa-5" style="border-radius: 2px; max-height: 600px; overflow-y: auto;">
|
|
|
- <template v-if="list?.length">
|
|
|
- <!-- 数组 -->
|
|
|
- <div
|
|
|
- v-for="(item, index) in list" :key="'curtainPoint' + index"
|
|
|
- :style="{color:color}"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div v-else :style="{color:color}">{{message}}</div>
|
|
|
+ <div class="d-flex align-center">
|
|
|
+ <!-- 前置图标 -->
|
|
|
+ <span
|
|
|
+ v-if="icon"
|
|
|
+ :style="{color: iconColor? iconColor : color, fontSize: iconFontSize}"
|
|
|
+ :class="[icon]"
|
|
|
+ class="ml-2 mr-2"
|
|
|
+ ></span>
|
|
|
+ <!-- 文字 -->
|
|
|
+ <div :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>
|
|
@@ -30,12 +31,25 @@ import { ref } from 'vue'
|
|
|
defineOptions({name: 'curtain-message'})
|
|
|
defineProps({
|
|
|
message: String, // 单条数据,也可以用list['']
|
|
|
- list: Array, // 多条数据一起展示传list['', '']
|
|
|
+ // list: Array, // 多条数据一起展示传list['', '']
|
|
|
persistent: Boolean, // false: 点击遮罩层关闭dialog
|
|
|
- color: { // 文本颜色
|
|
|
+ icon: String, // 前置图标
|
|
|
+ dialogWidth: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: '450'
|
|
|
+ },
|
|
|
+ iconFontSize: {
|
|
|
+ type: String,
|
|
|
+ default: '50px'
|
|
|
+ },
|
|
|
+ color: {
|
|
|
type: String,
|
|
|
default: 'darkorange'
|
|
|
},
|
|
|
+ iconColor: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
const dialog = ref(true)
|