温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

在vant中怎么使用dialog弹窗

发布时间:2022-05-26 13:36:20 来源:亿速云 阅读:267 作者:iii 栏目:开发技术

本篇内容主要讲解“在vant中怎么使用dialog弹窗”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“在vant中怎么使用dialog弹窗”吧!

如何使用dialog弹窗

1.官网示例

因为这次是在手机上用的所以就用了vant组件

在vant中怎么使用dialog弹窗

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>

到此,相信大家对“在vant中怎么使用dialog弹窗”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI