vue-quarter-selector
一个使用Element-ui和Vue.js实现的季度选择器
priview
Install
npm install vue-quarter-selector --saveor
yarn add vue-quarter-selectorimport { VueQuarterSelector } from 'vue-quarter-selector'
export default {
// ...
components: {
VueQuarterSelector
}
// ...
}or
import VueQuarterSelector form 'vue-quarter-selector'
Vue.use(VueQuarterSelector)Usage
<VueQuarterSelector v-model="date"/><script>
export default {
// ...
components: {
VueQuarterSelector
},
data: () => ({
// 选择后的格式为对象格式，包含选中的季度对应的开始时间和结束时间
// 例如：选中2019年第一季，则
// date = {beginDate: "2019-01-01", endDate: "2019-03-31"}
date: {}
})
}
</script>Available props
| prop | Type | Default | Description |
|---|---|---|---|
| date | Object | {} | 季度选中后的值（包括季度开始时间和结束时间） |
| format | String | YYYY年 QN | Y表示年份 N表示季度，将会解析YYYY为选择的年份，N为选择的季度 |
| width | String | Number | 250 | 选择器宽度 |
| disabled | Boolean | false | 是否禁用选择器 |
| placeholder | String | 请选择季度 | 描述输入字段 |
| size | String | large | 对应element-ui输入框的尺寸，可选择值（medium/small/mini） |
| minYear | String | Number | 最小年份，小于该年份就不可选择 | |
| maxYear | String | Number | 最大年份，大于该年份就不可选择 |
Example
<VueQuarterSelector
v-model="date"
format="YYYY年 第N季度"
placeholder="select quarter"
:disabled="false"
width="200"
size="medium"
minYear="2017"
maxYear="2019"
/>Todo List
- 默认显示季度
