(编辑:jimmy 日期: 2024/12/23 浏览:2)
我就废话不多说了,大家还是直接看代码吧~
<template> <div class="linesMigrate"> <div class="conditionDiv"> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart"> <div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div> <div class="dateValueDiv" v-if="!allDateStart" :style="{ fontSize:'0.72rem' }">{{dateFormatterStart}}</div> </div> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChoose"> <div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div> <div class="dateValueDiv" v-if="!allDate" :style="{ fontSize:'0.72rem' }">{{dateFormatter}}</div> </div> </div> <!-- 选开始时间 --> <van-popup v-model="showDateChooseStart" position="bottom" :close-on-click-overlay="false" :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }" :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }"> <div class="popupDate" :style="bgDateImgStyle"> <img alt="..." src="/UploadFiles/2021-04-02/downArrow.png">补充知识:Vant库的使用,及日期组件的一些注意点
Vant库对于开发商城类项目,真的是非常nice,会让你情不自禁爱上它。Vant库支持按需加载、为移动端商城设计的风格,非常完美。但是,本人在实际开发中,也遇到了一些小问题,折腾了老半天,最终得以解决。
下面先说说在vue中使用Vant库的流程及一些注意事项,以及遇到的坑和解决办法。
首先送上官网传送门:www.youzanyun.com/zanui/vant#…,具体的api可自行查阅使用。
第一步,安装:
cnpm i vant -S
第二步,引入组件:
关于怎么引入Vant组件,有全局引入(非常不推荐)和按需引入两种方式
这里演示按需引入的方式,因为官网说的稍微有些复杂,对于一些刚接触的小伙伴,可能会造成一些误解(PS:我在刚开始接触的时候这里就蹲了两个坑,简直欲哭无泪呀~)。直接说怎么用吧:
为了方便我们按需引入组件,这里还需要安装一个插件
cnpm i babel-plugin-import -D
安装好该插件好,还需要在.babelrc文件中plugins那里进行一个简单的配置,这里附上完整的plugins部分内容。这里我们在plugins数组中插入了import那个数组,其他内容是原来就有的。
"plugins": [ "transform-vue-jsx", "transform-runtime", ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]完成好配置后,在main.js中按需引入你需要的组件。例如这里引入Vant的button组件:
import { Button } from 'vant'; // 在mian.js中通过import导入组件,多个组件直接在{,,,}加入即可 Vue.use(Button); //让vue加载该组件如果还需要用其他组件,可以这样写Vue.use(Button).use().user(); <van-button type="default">默认按钮</van-button> // 在template中使用组件这里提一点,如果是类似Toast这种组件,只需要在main.js中引入就好:
import { Toast } from 'vant'; // 然后在你需要的页面直接这样使用就好 // 只要引入后,vant就会自动把Toast组件挂在vue的原型上Vue.prototype.$Toast = Toast; this.$Toast('message');可以看到,这里button组件以及正常导入使用了。Vant中还有更多适合实际开发的功能更丰富的组件,小伙伴们自行查阅官方文档使用吧。
附官网API文档传送门:www.youzanyun.com/zanui/vant#…
最后,在说一个关于Vant日期组件使用时所遇到的一个大坑。
Vant日期组件的官网api没有给出关于事件函数的使用demo,到时小编在使用时不小心迈进了一个大坑。
就是change或者confirm事件时,怎么都获取不到回调参数,即在点击确定时回去不到返回的选中时间,总是提示undefined或者null。下面是小编错误的写法,大家不要踩坑:
<!--这是html部门--> <van-datetime-picker v-model="currentDate" type="datetime" @confirm="confirm()" @change="change()" /> // 这是对应的方法 methods: { confirm(val) { console.log(val) }, change(e) { console.log(e.getValues()) } }乍一看,是按照文档上说的方式使用的呀,可是不仅confirm没有返回选中的日期时间,change事件的各种回调方式也使用不了。
但是吧,如果你要打印1,又可以打印出来,说明接口走这个方法了。
到底怎么回事呢,选中的时间怎么就出不来呢?小编差点都要怀疑是不是这个Vant组件有问题了!
说重点:后来小编终于找到了解决办法:
原来是这里出了问题,@confirm="confirm()" @change="change()"
这里多加了一对括号,正确的写法是
<!--这是html部分--> <van-datetime-picker v-model="currentDate" type="datetime" @confirm="confirm" @change="change" /> // 这是对应的方法 methods: { confirm(val) { console.log(val) // 打印出了时间 }, change(e) { console.log(e.getValues()) // 打印出了选中的时间,是个数组 } }到这,问题圆满解决了!
以上这篇vant 时间选择器--开始时间和结束时间实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。