在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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何在Vue3中使用jsx/tsx的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以了解下2024-02-02
Vue3生命周期Hooks原理与调度器Scheduler关系
这篇文章主要为大家介绍了Vue3生命周期Hooks原理与调度器Scheduler关系详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要给大家介绍了关于vue3动态监听浏览器窗口变化的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
对Vue beforeRouteEnter 的next执行时机详解
今天小编就为大家分享一篇对Vue beforeRouteEnter 的next执行时机详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue.js是当下很火的一个JavaScript MVVM（Model-View-ViewModel）库.这篇文章主要介绍了基于vue.js快速搭建图书管理平台 ,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了vue中Echarts使用动态数据的两种实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了vue中添加语音播报功能的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
这篇文章主要介绍了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能,结合实例形式详细分析了Vue + Node.js + MongoDB基于图片上传组件实现图片预览和删除功能相关操作技巧,需要的朋友可以参考下2020-04-04
最新评论