在vant中如何使用dialog弹窗

目录

  • 如何使用dialog弹窗
    • 1.官网示例
    • 2.第一步引入vant中的dialog组件
    • 3.vue页面中引入
    • 4.使用
  • vant dialog组件使用
    • vant Dialog组件引入
    • template中使用

如何使用dialog弹窗
1.官网示例
因为这次是在手机上用的所以就用了vant组件
在vant中如何使用dialog弹窗
文章图片


2.第一步引入vant中的dialog组件
官网介绍自行选择安装方式
【在vant中如何使用dialog弹窗】
3.vue页面中引入
在vant中如何使用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中使用
链群编码:932302339093030核准日期:预览文件

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    推荐阅读