Sk-message-box NPM

sk-message-box

基于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关闭图标来关闭弹窗

slot

name	说明
content	模态窗内容插槽
footer	模态窗底部按钮插槽

方法

name	说明	返回值
confirm	点击确认时触发，该函数的参数中可接受一个close方法，用于关闭弹窗，需要自行手动调用	void
close	关闭时触发	void

指令调用文档

属性	默认值	是否必填	说明
title	'标题'	否	模态窗标题
content	-	否	模态窗内容，支持v-slot:content 自行写入内容
closeBtnText	'取消'	否	取消按钮的显示文本
confirmBtnText	'确认'	否	确认按钮的显示文本
isShowConfirmBtn	true	否	是否显示确认按钮
isShowCloseBtn	true	否	是否显示取消按钮
closeOnOther	true	否	是否可通过点击遮罩or关闭图标来关闭弹窗