Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

kscript/vuetify-message-box

Repository files navigation

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

使用方法

安装

npm i vuetify-message-box

引入

importVuefrom'vue'importVuetifyfrom'vuetify'importVuetifyMessageBoxfrom'vuetify-message-box'constvuetify=newVuetify({})Vue.use(Vuetify)Vue.use(VuetifyMessageBox,{vuetify})

调用

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

选项

属性类型默认值说明
titlestring'消息提示'标题
widthstring, number400组件宽度
centerbooleantrue是否居中显示
darkbooleanfalse是否使用暗色主题
typestring''消息类型 'success', 'error', 'warning', 'info'
iconboolean, string-消息图标, 默认根据type显示, false则不显示
closeIconstring''关闭按钮图标
contentClassstring''消息内容类名
messagestring''消息文本, 与content属性互斥, 优先级高
contentvnodenull消息内容节点
prependvnodenull按钮前置内容
appendvnodenull按钮后置内容
showConfirmButtonbooleantrue是否显示确认按钮
confirmButtonTextstring'确定'确认按钮文本
confirmButtonClassstring''确认按钮类名
showCancelButtonbooleantrue是否显示取消按钮
cancelButtonTextstring'取消'取消按钮文本
cancelButtonClassstring''确认按钮类名
closeOnClickModalbooleantrue点击遮罩是否关闭
silencebooleanfalse是否关闭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


[8]ページ先頭

©2009-2025 Movatter.jp