微信小程序中使用Vant Weapp的dialog弹窗
在微信小程序中使用vant webapp的dialog组件,实现弹窗效果
·
最终实现效果:
实现方式很简单,我一共分为以下四步:
第一步:在界面的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
});
},
更多推荐
已为社区贡献7条内容
所有评论(0)