vue-Vant移动端框架关于dialog弹出框的理解
这周在用vant框架写移动端代码时,用到dialog 弹出框组件时,发现了一些有用的知识点,夸一夸我大前端真的很神奇。html<van-button type=“info” size=“small” @click=“onClick”>dialog按钮<van-dialogv-model="show"title="弹出框"show-cancel-butto...
·
这周在用vant框架写移动端代码时,用到dialog 弹出框组件时,发现了一些有用的知识点,夸一夸我大前端真的很神奇。
html
<van-button type=“info” size=“small” @click=“onClick”>dialog按钮
<van-dialog
v-model="show"
title="弹出框"
show-cancel-button
:beforeClose="chargeBtn"
>
<van-stepper v-model="number" min="0" integer/>
</van-dialog>
script
data() {
return {
show: false,
number: 1,
};
},
methods: {
onClick() {
this.show = true;
},
chargeBtn(action, done) {//确认or取消
if (this.number < 0) {
this.$notify("请输入数量!");
done(false);
return;
}
if (action === 'cancel') {//取消按钮
done();
} else if (action === 'confirm') {//确定按钮
//向后端传值并关闭dialog弹出框
this.show = false;
});
done();
}
}
}
这样就可以有确认和取消按钮了,简单方便,很让我学到了很多
更多推荐
已为社区贡献3条内容
所有评论(0)