![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vant
柠檬不萌只是酸i
研究生在读 | 努力发论文 |
迈出第一步,才是新的开始。
展开
-
vant中 tab栏遇到的坑 van-tabs。
话不多说,先看下问题描述:我的需求:点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tablan高亮显示。(如果tab栏横向有滚动条,那也得让被选中的高亮显示)。所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来。坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 number | string 。但是,在此时.原创 2020-05-27 15:04:46 · 19397 阅读 · 15 评论 -
Vant 中的Toast怎样设置全局的延迟时间呢?
在引入Toast的配置文件里面配置如下:import { Toast } from 'vant';Vue.use(Toast);Toast.setDefaultOptions({ duration: 800 }); // duration延迟时间--完。原创 2019-11-11 20:55:17 · 5462 阅读 · 0 评论 -
使用vant 封装的省市区三级联动的组件。用于vue项目中
效果展示:【图1】【图2】组件描述:观察上方图片展示,该组件的使用范围比较广。(1)已知省份名称,可以查到 【图2】所示的。(2)已知市区,然后得到省,可以查到【图1】所示的。组件使用:<v-ProCityCountyPicker style="width: 90%; display: inline-block;" :ProCityDat...原创 2019-10-30 22:17:22 · 2019 阅读 · 0 评论 -
使用vant完成 Area省市区选择。
效果展示:组件使用的文件:area.js文件。area.js文件详见注意:记得在main.js里面引入响应的组件。组件代码: 【可以自己封装写个公共的组件】<template> <!-- 省市区的三级联动 传入的数据的格式: { province_list:{}, city_list:{}, ...原创 2019-10-29 18:32:34 · 7535 阅读 · 1 评论 -
使用Vant完成底部弹出框 ActionSheet 上拉菜单
效果图:代码展示:(ActionSheet 上拉菜单)<template> <!-- ActionSheet 上拉菜单 --> <div id="action_sheet"> <van-button type="primary" @click="alertMenu">弹出菜单</van-button> ...原创 2019-09-15 13:37:29 · 12047 阅读 · 5 评论 -
使用Vant完成Dialog弹框
效果展示:完整代码:<template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button...原创 2019-09-15 11:37:41 · 11918 阅读 · 1 评论 -
使用Vant完成通知栏Notify的提示
效果:代码展示:<template> <!-- 通知消息提示 --> <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div></templ...原创 2019-09-15 11:01:06 · 9690 阅读 · 6 评论 -
使用Vant完成各种Toast提示框
效果展示:(1)使用前的需要安装Vant奥。参考博客(2)在main.js里面引入Toastimport { Toast } from 'vant';Vue.use(Toast);(3)在页面使用:(根据步骤代码可以运行奥 Toast.vue文件)(上面截图的,在下面代码都有栗子奥)。<template> <!-- Toast提示 -->...原创 2019-09-15 10:33:35 · 20097 阅读 · 7 评论 -
使用Vant完成DatetimePicker 日期的选择器
效果展示:代码展示:<template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button> <van-field v-model="timeValue" p...原创 2019-09-08 13:09:13 · 30040 阅读 · 8 评论 -
快速安装及使用Vant
(1)什么是Vant呢?答:Vant是一个轻量、可靠的移动端 Vue 组件库(2)Vant快速上手(3)安装和使用Vant:(3-1)# 通过 npm 安装 npm i vant -S(3-2)# 安装插件 按需引入: npm i babel-plugin-import -D(3-3)# 在.babelrc 文件中添加配置:"plugins": [...原创 2019-09-08 12:57:44 · 655 阅读 · 2 评论