antd confirm 样例 this.$createElement 样例

Vue.js与前端删除确认对话框实现

原创已于 2022-06-07 23:00:27 修改 · 849 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2021-08-10 14:13:49 首次发布

vue 同时被 2 个专栏收录

31 篇文章

订阅专栏

antd

4 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中实现删除操作的确认对话框。通过使用`$confirm`方法，分别创建了两个对话框，分别处理删除选中项和删除包含子配置的项，确认后调用相应的删除函数，取消则打印'Cancel'。

this.$confirm({
    title: this.$createElement('div', {}, [
        "确定要删除",
        this.$createElement("span",{style: "color:red;"},`${this.selectKey?this.selectKey.name:''}的所有内容`),
        "吗？"
    ]),
    async onOk() {
        await that.confirmDelFun(that.selectKey.id);
    },
    onCancel() {
      console.log('Cancel');
    }
});

const h = this.$createElement;
const that = this
this.$confirm({
  title: h('div', {}, [
      "确定要删除",
      h("span",{style: "color:red;"},`${that.selectTreeData.name}及其下的所有配置`),
      "吗？"
  ]),
  async onOk() {
            await that.delete();
  },
  onCancel() {
    console.log('Cancel');
  }
});