直接上图:
需要完成的需求是这个页面的实现:点击“1”跳转到“2”,在页面“2”中可以在“3”中选择你的家乡,在“4”中可以选择你的生日。其中,用到的组件有两个,一个是城市选择器element-china-area-data,另外一个是日期选择器vue-datepicker
接下来介绍一下这两个选择器的使用,github地址已经在上面标明了,点击组件的名字即可抵达。
用法比较简单,本次用例是用省市二级联动。
npm install element-china-area-data -S
import { provinceAndCityData,CodeToText} from 'element-china-area-data'
这里import进来的属性值中,数据是关键,对象可以操作数据,嗯这样子…看需求做选择
#####二、日期选择器vue-datepicker.
这个比较麻烦,而且官方(github)Demo中也有一些问题。
npm install vue-datepicker
Departure Date:
Departure Date:
这里有两个地方需要注意,在官方的demo中的写法会导致报错:
1) 在import的时候,需要import Datepicker from ‘vue-datepicker/vue-datepicker-es6.vue’ 这样引入,不然会少了后面的es6支持。
2) limit配置那里,需要改成下面这样才能点击选择日期:
limit: [{
type: Array,
default:function _default(){
return [];
}
}]
感谢这位老哥的博客使用vue-datepicker过程中遇到的一些问题
,也解决了我的一些问题
Option
type
type: 'day' // 'min', 'multi-day'
format: 'YYYY-MM-DD HH:mm'
placeholder: 'when?'
week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']
wrapperClass: ''
inputClass: ''
inputStyle: {
'display': 'inline-block',
'padding': '6px',
'line-height': '22px',
'font-size': '16px',
'border': '2px solid #fff',
'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
'border-radius': '2px',
'color': '#5F5F5F'
}
color: {
header: '#ccc',
headerText: '#f00'
}
buttons: {
ok: 'OK',
cancel: 'Cancel'
}
overlayOpacity: 0.5, // 0.5 as default
dismissible: true // as true as default
limit
from sometime to sometime(when from/to is empty, days before/after end/start time will be available)
limit: {
type:'fromto',
from:'2016-01-10',
to:'2016-01-30'
}
limit:{
type: 'weekday',
available: [1, 2, 3, 4, 5]
}
time: '' // string
date: {
time: '' // string
}