项目中使用vant组件总结

这段时间在做一个公众号的项目，使用到了vant组件库，今天来总结一下使用到的组件，太简单的就不总结了，主要记录一下自己遇到的一些坑。
前期引入工作就不说了，在官方文档中有详细说明，本次项目引入方式是使用了导入全部组件。

按钮组件

按钮组件使用起来很简单，主要是样式上的修改，css上可以直接使用父子选择器选中button，也可以直接给按钮组件绑定一个class来修改样式。

Calendar 日历

日历组件设置的选择日期区间，项目需求上需要设置默认的一个日期区间，是从七天前到今天的这段时间，查看过vant的日历组件之后发现需要配置一下它的default-date属性，而这个default-date属性在组件type为range也就是选择日期区间的时候需要写成一个数组，这个时候我就不太清楚该怎么写了，尝试了多次，又查了查，发现原来很简单，直接声明一个数组往里放两个new Date() 就好了。

var defaultStartTime = new Date((new Date()/1000-86400*7)*1000);
var defaultEndTime = new Date();
var defaultDate = [defaultStartTime,defaultEndTime];

Uploader 文件上传

文件上传在本次的项目中使用的比较多，使用官方文档中的方法 :after-read=“afterRead” 可以输出查看到相应的文件信息，但是文档中似乎没有说明如果进行文件上传需要上传文件中的哪部分信息，通过查阅发现如果上传文件了话，需要上传方法参数中的file.file，同时需要使用FormDate()将数据封装一下。

afterRead(file) {
	this.file = file;
	// 此时可以自行将文件上传至服务器
	console.log(file.file);
	var forms = new FormData()
	forms.append('file',file.file)
	axios({
	    method: 'post',
	    url: '接口路径',
	    data: forms,
	    headers: {
	        'Content-Type': 'multipart/form-data'
	    },
	}).then((res) => {
	    console.log(res);
    }
}   

PullRefresh 下拉刷新

在项目中还需要做一个聊天页面，需要下拉刷新出历史消息记录，根据官方文档提示，需要在刷新之后在刷新函数中重新再调一次相关接口就好了。当然，因为接口使用了分页查询，每次查询的时候页数应该加1。

onRefresh() {
	this.currentPage += 1;
	let params = {
	    page: this.currentPage,
	    size: 10
	}
	fellowchat(params).then(res => {
	    console.log(res);
	}
}

以上就是目前我写项目时对vant个别组件的总结。