Skip to content

由于 vuetify 没有提供即调即用的消息弹框, npm上一些封装的用起来也不太顺手, 所以自己封装了一个基于 vue2 + vuetify 的消息弹框组件, 调用方式类似element-ui的$msgbox, 查看demo效果: http://kscript.github.io/vuetify-message-box

License

Notifications You must be signed in to change notification settings

kscript/vuetify-message-box

Repository files navigation

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

About

由于 vuetify 没有提供即调即用的消息弹框, npm上一些封装的用起来也不太顺手, 所以自己封装了一个基于 vue2 + vuetify 的消息弹框组件, 调用方式类似element-ui的$msgbox, 查看demo效果: http://kscript.github.io/vuetify-message-box

Topics

Resources

License

Stars

Watchers

Forks