Vue对话框组件使用方法详解

本文实例为大家分享了Vue对话框组件的使用，供大家参考，具体内容如下

效果如下图所示：（整体样式模仿ant-design-vue Modal样式，同时阴影覆盖浏览器窗口）

①创建组件Dialog.vue：

②使用Dialog组件弹出对话框：

 
import Dialog from '@/components/Dialog'
components: {
    Dialog
},
data () {
    return {
        showDialog: false,
     content: '',
    }
},
methods: {
    onDialog (content) { // 调用Dialog弹出对话框
      this.content = 'Content of the modal ...'
      this.showDialog = true
    },
    onClose () { // 关闭dialog
      this.showDialog = false
    },
    onCancel () { // “取消”按钮回调
      this.showDialog = false
    },
    onConfirm () { // “确定”按钮回调
      this.showDialog = false
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。