vuetify-message-box

基于 vue2 + vuetify 的消息弹框组件

使用方法

安装

npm i vuetify-message-box

引入

import Vue from 'vue'
import Vuetify from 'vuetify'
import VuetifyMessageBox from 'vuetify-message-box'
const vuetify = new Vuetify({})
Vue.use(Vuetify)
Vue.use(VuetifyMessageBox, {
	vuetify
})

调用

<script>
export default {
	methods: {
		msgbox (mode = '默认') {
			if (mode === '默认') {
				// 只传入消息内容
				this.$msgbox('hello world')
			} else if (mode === '带选项1') {
				// 传入消息内容, 选项
				this.$msgbox('hello world', {
					center: true
				})
			} else if (mode === '带选项2') {
				// 只传入选项, 消息内容在选项中
				this.$msgbox({
					message: 'hello world',
					center: true
				})
			} else if (mode === '按类型') {
				// success error warning info
				this.$msgbox.success({
					message: 'hello world',
					center: true
				})
			} else if (mode === '使用VNode') {
				this.$msgbox({
					content: this.$createElement('div', {
						style: {
							color: 'red'
						}
					}, 'hello world')
				})
			} else if (mode === '关闭最后一个') {
				this.$msgbox('消息1', { name: 'msg1' })
				this.$msgbox('消息2', { name: 'msg2' })
				setTimeout(() => {
					this.$msgbox.close()
				}, 3e3)
			} else if (mode === '关闭指定name') {
				this.$msgbox('消息1', { name: 'msg1' })
				this.$msgbox('消息2', { name: 'msg2' })
				setTimeout(() => {
					this.$msgbox.close('msg1')
				}, 3e3)
			}
		}
	}
}

</script>

选项

| 属性 | 类型 | 默认值 | 说明 | | -- | -- | -- | -- | | title | string | '消息提示' | 标题 | | width | string, number | 400 | 组件宽度 | | center | boolean | true | 是否居中显示 | | dark | boolean | false | 是否使用暗色主题 | | type | string | '' | 消息类型 'success', 'error', 'warning', 'info' | | icon | boolean, string | - | 消息图标, 默认根据type显示, false则不显示 | | closeIcon | string | '' | 关闭按钮图标 | | contentClass | string | '' | 消息内容类名 | | message | string | '' | 消息文本, 与content属性互斥, 优先级高 | | content | vnode | null | 消息内容节点 | | prepend | vnode | null | 按钮前置内容 | | append | vnode | null | 按钮后置内容 | | showConfirmButton | boolean | true | 是否显示确认按钮 | | confirmButtonText | string | '确定' | 确认按钮文本 | | confirmButtonClass | string | '' | 确认按钮类名 | | showCancelButton | boolean | true | 是否显示取消按钮 | | cancelButtonText | string | '取消' | 取消按钮文本 | | cancelButtonClass | string | '' | 确认按钮类名 | | closeOnClickModal | boolean | true | 点击遮罩是否关闭 | | silence | boolean | false | 是否关闭reject提示, 为true时, 最好在同一eventLoop周期内调用then/catch, 不然原有回调的参数会被丢弃 |

License

MIT