0.0.11 • Published 6 years ago
vue-utopia-dialog v0.0.11
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
点击确定按钮的回调函数,有一个参数,值为输入框的文字