vue-utopia-dialog
A Vue.js dialog plugin
安装
npm install vue-utopia-dialog -S使用
import Dialog from 'vue-utopia-dialog' import 'vue-utopia-dialog/dist/css/dialog.css' // 或者 // import Dialog from 'vue-utopia-dialog/src/lib/index' Vue.use(Dialog)// this.$dialog.alert(option) // this.$dialog.confirm(option) // this.$dialog.prompt(option) export default { name: 'dialog-test', methods: { alert () { this.$dialog.alert({ title: 'Alert', desc: 'this is an alert!' }) }, confirm () { this.$dialog.confirm({ title: 'Confirm', desc: 'this is a confirm!', confirm: () => { window.alert('yes') }, cancel: () => { window.alert('no') } }) }, prompt () { this.$dialog.prompt({ title: `What's your name?`, desc: 'this is a prompt!', confirm: text => { window.alert(`yes: ${text}`) }, cancel: () => { window.alert('no') } }) } } }alert
option.title
标题，默认为 '提示'
option.desc
内容，默认为 ''
option.okText
确定按钮文字，默认为 '确定'
option.okBgColor
确定按钮颜色，默认为 '#ffcc24'
option.okColor
确定按钮字体颜色，默认为 '#000000'
confirm
option.title
标题，默认为 '提示'
option.desc
内容，默认为 ''
option.cancelText
取消按钮文字，默认为 '取消'
option.cancelBgColor
取消按钮颜色，默认为 '#eaeaea'
option.cancelColor
取消按钮字体颜色，默认为 '#000000'
option.confirmText
确定按钮文字，默认为 '确定'
option.confirmBgColor
确定按钮颜色，默认为 '#ffcc24'
option.confirmColor
确定按钮字体颜色，默认为 '#000000'
option.cancel
点击取消按钮的回调函数
option.confirm
点击确定按钮的回调函数
prompt
option.title
标题，默认为 '提示'
option.placeholder
输入框的placeholder，默认为 ''
option.text
输入框的文字，默认为 ''
option.cancelText
取消按钮文字，默认为 '取消'
option.cancelBgColor
取消按钮颜色，默认为 '#eaeaea'
option.cancelColor
取消按钮字体颜色，默认为 '#000000'
option.confirmText
确定按钮文字，默认为 '确定'
option.confirmBgColor
确定按钮颜色，默认为 '#ffcc24'
option.confirmColor
确定按钮字体颜色，默认为 '#000000'
option.cancel
点击取消按钮的回调函数
option.confirm
点击确定按钮的回调函数，有一个参数，值为输入框的文字
