我在VueJS项目中使用Boostrap 4工作代码 . 我在表格中显示用户列表,每行都有“删除”链接 . 每个用户都有行中的电子邮件 . 单击删除时,BS 4模态将显示用户在模态正文中的电子邮件 . Modal有按钮,取消和是 . 取消关闭Modal,Yes将对后端进行API调用以删除用户 .
这是表行中用于调用Modal的代码:
这是jQuery来处理在安装组件时运行的Modal:
mounted(){
let $this = this
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var email = button.data('email')
var modal = $(this)
modal.find('.modal-body').html('
modal.find('.modal-footer #delete').on('click', function(e) {$this.deleteUser(email)})
})
如何在element-ui中使用Dialog组件实现相同的功能?
对话框组件记录在此链接中:Dialog
对话框组件定义了诸如open之类的事件,但没有文档如何使用它们 . 所以我很无能为力 .
element-ui对话框代码是:
title="Delete User"
:visible.sync="dialogVisible"
>
Dynamic body content
Cancel
Yes