vuetify-message-box v1.0.5

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>

选项

License

MIT