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()) // 打印出了选中的时间，是个数组
    }
}复制代码

到这，问题圆满解决了！希望对小伙伴们有帮助