移动端的删除二次确认功能

Vant官网

根据官网的操作来实现

拉到下面可以看到 消息确认的这个封装好的功能

 

 

 第一步，先引入组件使用（安装了Vant-ui的前提，官网有安装操作）

import { Dialog } from 'vant';

第二步，使用（这是我目前在做的功能）

视图层

<van-button type="primary" @click="handldDelete(scope.row)">删除</van-button>

数据层

   handldDelete(row) {
      Dialog.confirm({
        title: "删除提示",
        message: "确认删除该角色吗？删除后无法恢复"
      })
        .then(() => {
          // on confirm
          this.$common
            .http({
              url: "这里放自己的请求路径",
              data: {
                data: JSON.stringify({
                  id: row.id
                })
              }
            })
            .then(res => {
              if (Number(res.data.errcode) === 0) {
                this.$common.pcToastSuccess("删除成功");
              }
              this.getDetailsFn();
            });
        })
        .catch(() => {
          // on cancel
        });
    },

完成效果