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')
        }
      })
    }
  }
}

---

官网：https://github.com/tracy2zhang/vue-dialog

演示：https://www.vue365.cn/code_demo.php?id=3261

GitHub下载：https://github.com/tracy2zhang/vue-dialog/archive/master.zip