Vue.js替换小弹出框– vue-utopia-dialog

Vue.js替换小弹出框– vue-utopia-dialog
插件名称 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')
        }
      })
    }
  }
}