基于Vue3的消息弹窗&模态窗的轻量级组件,带TS类型,大小仅不到8kb,分为组件式调用以及指令时调用,可用于一些小型项目,在仅需要弹窗or模态窗操作时可使用该库,方便简洁。
npm i sk-message-box
<script setup lang="ts">
import { ref } from 'vue'
import { SkMessageBox } from 'sk-message-box'
let visible = ref(false)
function onOpen() {
visible.value = true
}
function onConfirm(close: Function) {
close()
}
</script>
<template>
<button @click="onOpen">组件式调用</button>
<sk-message-box
title="组件式调用标题"
closeBtnText="close"
v-model="visible"
@confirm="onConfirm"
>
<template v-slot:content> 组件式调用内容 </template>
</sk-message-box>
</template>
<script setup lang="ts">
import { useMessageBox } from './MessageBox/index'
function onOpen() {
useMessageBox
.alert({
title: '提示',
content: '内容'
})
.then(() => {
console.log('success')
})
.catch(() => {
console.log('catch')
})
}
</script>
<template>
<button @click="onOpen">指令式调用</button>
</template>
属性 |
默认值 |
是否必填 |
说明 |
v-model/modelValue |
- |
是 |
控制模态窗的显隐 |
title |
'标题' |
否 |
模态窗标题 |
content |
- |
否 |
模态窗内容, 支持v-slot:content 自行写入内容 |
closeBtnText |
'取 消' |
否 |
取消按钮的显示文本 |
confirmBtnText |
'确 认' |
否 |
确认按钮的显示文本 |
isShowConfirmBtn |
true |
否 |
是否显示确认按钮 |
isShowCloseBtn |
true |
否 |
是否显示取消按钮 |
closeOnOther |
true |
否 |
是否可通过点击遮罩or关闭图标来关闭弹窗 |
name |
说明 |
content |
模态窗内容插槽 |
footer |
模态窗底部按钮插槽 |
name |
说明 |
返回值 |
confirm |
点击确认时触发,该函数的参数中可接受一个close方法,用于关闭弹窗,需要自行手动调用 |
void |
close |
关闭时触发 |
void |
属性 |
默认值 |
是否必填 |
说明 |
title |
'标题' |
否 |
模态窗标题 |
content |
- |
否 |
模态窗内容, 支持v-slot:content 自行写入内容 |
closeBtnText |
'取 消' |
否 |
取消按钮的显示文本 |
confirmBtnText |
'确 认' |
否 |
确认按钮的显示文本 |
isShowConfirmBtn |
true |
否 |
是否显示确认按钮 |
isShowCloseBtn |
true |
否 |
是否显示取消按钮 |
closeOnOther |
true |
否 |
是否可通过点击遮罩or关闭图标来关闭弹窗 |