微信小程序使用：vant Dialog组件的正确方式

2020-12-02 21:40:37 类别：微信小程序

更新：2020-12-02 21:40:37
大小：61 KB
热度：849
审核：菱翰飞
类别：技术文章
格式：PDF

扫二维码手机浏览

资源介绍

给大家整理一篇微信小程序类学习资源，由权涵意测试纠错，内容涉及到微信小程序、vant、Dialog、微信小程序的内容，已被255人关注，同类资源中评分为7.6分。

安装vant UI框架：

cnpm install vant –-save-dev

导入组件-在main.js里：

import Vant from 'vant';
import'vant/lib/vant-css/index.css';
Vue.use('Vant')

Dialog弹出框我们并不陌生，项目中的活动规则啊，登录注册啊，分享啊等等都会使用到弹出框

弹出框和toast的区别是不能自动消失，因为往往弹出框里的内容比较多，甚至有些更复杂的交互

比如登录等，所以需要手动关闭，自然它就会有交互的按钮等

准备工作：

创建一个页面: Dialog.vue

在router.js里配置 Dialog页面的路由

{
      path: '/dialog',
      name: 'dialog',
      component: () => import('./views/Dialog.vue')
 }

在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/dialog')">
         <van-col span="" class="marb20">
            <van-icon name="pending-deliver" />
            <div>Dialog 弹出框</div>
         </van-col>
</a>

以上就是本次关于本资源的介绍和部分内容，我们还整理了以往更新的其它相关资源内容，可以在下方直接下载，关于相关的资源我们在下方做了关联展示，需要的朋友们也可以参考下。

上一篇：Linux期末考试试题8套(含答案)
下一篇：BCM2711 Datasheet:树莓派4B BCM2711处理器芯片手册

下载地址

网盘下载地址

微信小程序相关资源

学习心得

23小时20分钟前回答

详解如何搭建mpvue框架搭配vant组件库的小程序项目

1. vant 介绍 ### 扫码体验 Vant - 轻量、可靠的移动端 Vue 小程序组件库。由有赞公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件使用之前使用 Vant Weapp 前，请确保你已经学习过微信官方的小程序简易教程和自定义组件介绍安装方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包，详见npm 支持 # npmnpm i vant-wea……