最终实现效果:
在这里插入图片描述
实现方式很简单,我一共分为以下四步:

第一步:在界面的json文件中引入组件:

{
    "usingComponents": {
        "van-search": "@vant/weapp/search/index",
        "van-dialog": "@vant/weapp/dialog/index"
    }
}

第二步:在界面的js文件中引入Dialog

import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';

第三步:在界面的wxml文件中使用组件

 <van-dialog id="van-dialog" />

在这里插入图片描述
最后一步:在js文件的点击事件中触发弹窗

  //删除,先弹窗让用户确认一下是否删除,用户点击确认之后再删除
    deletedjxx(event){
        let delxx = event.currentTarget.dataset.djitem;
        Dialog.confirm({
            title:'提示',
            message: '确认删除此主体信息?',
          })
            .then(() => {
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
    },
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐