在vant中如何使用dialog弹窗
目录
如何使用dialog弹窗
1.官网示例
2.第一步引入vant中的dialog组件
3.vue页面中引入
4.使用
vant dialog组件使用
vant Dialog组件引入
template中使用
如何使用dialog弹窗 1.官网示例因为这次是在手机上用的所以就用了vant组件
官网介绍自行选择安装方式
3.vue页面中引入<van-dialog
v-model="show"
title="标题"
show-cancel-button
>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
</van-dialog>
export default {
data() {
return {
show: false
};
}
}
通过show的false与true来确定弹窗框的存在与否。
4.使用在你想用的地方中定义一个点击方法，在弹出条件中判断show的false与true就可以，这样就简单的实现了弹出窗的提示功能。
vant dialog组件使用 vant Dialog组件引入import { Dialog } from 'vant'
export default{
components: {
Dialog: Dialog.Component//！！！！坑
}
}
template中使用
<Dialog v-model="showSuccess" title="注册完成" >
<div>链群编码：932302339093030</div>
<div>核准日期：</div>
<div class="btn-custom-primary" @click="goDetail">预览文件</div>
<Button type="primary" block @click="goHome">我知道了</Button>
</Dialog>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Lilac
2020-01-08
Butterfly
2022-10-24
Janna
2022-10-25
Octavia
2022-11-05
Janna
2022-11-05
Catherine
2022-11-05
Ros
2022-11-05
Kita
2022-11-05
Obelia
2022-11-05
Lala
2022-11-05
Rayna
2022-11-05
Prunella
2022-11-05
Irene
2022-11-06
Gamila
2022-11-06
Feronia
2022-11-06
Wanda
2022-11-06
Ipo
2022-11-06
Lacie
2022-11-06
