本篇内容主要讲解“在vant中怎么使用dialog弹窗”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“在vant中怎么使用dialog弹窗”吧!
因为这次是在手机上用的所以就用了vant组件
官网介绍自行选择安装方式
<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来确定弹窗框的存在与否。
在你想用的地方中定义一个点击方法,在弹出条件中判断show的false与true就可以,这样就简单的实现了弹出窗的提示功能。
import { Dialog } from 'vant'
export default{
components: {
Dialog: Dialog.Component//!!!!坑
}
}
<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>
到此,相信大家对“在vant中怎么使用dialog弹窗”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。