直接上图:
需要完成的需求是这个页面的实现:点击“1”跳转到“2”,在页面“2”中可以在“3”中选择你的家乡,在“4”中可以选择你的生日。其中,用到的组件有两个,一个是城市选择器element-china-area-data,另外一个是日期选择器vue-datepicker
接下来介绍一下这两个选择器的使用,github地址已经在上面标明了,点击组件的名字即可抵达。
一、城市选择器element-china-area-dat.
用法比较简单,本次用例是用省市二级联动。
- 安装
npm install element-china-area-data -S
- import组件所需的数据和对象
import { provinceAndCityData,CodeToText} from 'element-china-area-data'
- 直接贴代码吧
- 属性值
- provinceAndCityData是省市二级联动数据(不带“全部”选项)
- provinceAndCityDataPlus是省市二级联动数据(带“全部”选项)
- regionData是省市区三级联动数据(不带“全部”选项)
- regionDataPlus是省市区三级联动数据(带“全部”选项)
- "全部"选项绑定的value是空字符串""
- CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市
- TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
这里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过程中遇到的一些问题
,也解决了我的一些问题
- API(摘自官网)
Option
type
type: 'day' // 'min', 'multi-day'
- format
format: 'YYYY-MM-DD HH:mm'
- placeholder
placeholder: 'when?'
- week
week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
- month
month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']
- wrapperClass
wrapperClass: ''
- inputClass
inputClass: ''
- inputStyle
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
color: {
header: '#ccc',
headerText: '#f00'
}
- buttons
buttons: {
ok: 'OK',
cancel: 'Cancel'
}
- animate
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'
}
- weekdays
limit:{
type: 'weekday',
available: [1, 2, 3, 4, 5]
}
- prop
- Vue 1.0
time: '' // string
- Vue 2.0
date: {
time: '' // string
}
OK,Done!