在vant中如何使用dialog弹窗
更新时间：2022年05月26日 11:20:02 作者：qq_39355295
这篇文章主要介绍了在vant中如何使用dialog弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
如何使用dialog弹窗
1.官网示例
因为这次是在手机上用的所以就用了vant组件
2.第一步引入vant中的dialog组件
官网介绍自行选择安装方式
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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
keep-alive include和exclude无效问题及解决
这篇文章主要介绍了keep-alive include和exclude无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue 2.0组件与v-model的相关资料，文中介绍的非常详细，本文适合初学组件编写的同学阅读，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
使用Electron打包vue文件变成exe应用程序的全过程
这篇文章主要给大家介绍了使用Electron打包vue文件变成exe应用程序的全过程,文中通过代码示例和图文结合的方式给大家讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue实现一个简单的分页功能,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue 表单绑定与组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了vue中关于checkbox使用的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本篇文章主要介绍了使用Vue.js和Flask来构建一个单页的App的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue-extend和vue-component注册一个全局组件方式
这篇文章主要介绍了vue-extend和vue-component注册一个全局组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
这篇文章主要介绍了vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论