插件名称 | vue-utopia-dialog |
---|---|
发布时间 | 2020年12月2日 |
插件作者 | tracy2zhang |
Vue.js组件可创建简单的干净对话框窗口,以替换本机JavaScript弹出框。
# NPM
$ npm install vue-utopia-dialog --save
安装并导入对话框组件。
import Dialog from 'vue-utopia-dialog'
import 'vue-utopia-dialog/dist/css/dialog.css'
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: '标题',
desc: '这是个警报!'
})
},
confirm () {
this.$dialog.confirm({
title: '标题',
desc: '这是确认!',
confirm: () => {
window.alert('yes')
},
cancel: () => {
window.alert('no')
}
})
},
prompt () {
this.$dialog.prompt({
title: `标题?`,
desc: '这是一个提示!',
confirm: text => {
window.alert(`yes: ${text}`)
},
cancel: () => {
window.alert('no')
}
})
}
}
}