Vue.js的轻量级月份选择器,没有依赖项。
v1.3.2(09/03/2020)
v1.3.1(08/29/2020)
v1.3.0(08/18/2020)
v1.2.6(07/09/2020)
v1.2.5(03/19/2020)
# Yarn
$ yarn add vue-month-picker
# NPM
$ npm install vue-month-picker --save
Bundler
import Vue from 'vue'
import { MonthPicker } from 'vue-month-picker'
import { MonthPickerInput } from 'vue-month-picker'
Vue.use(MonthPicker)
Vue.use(MonthPickerInput)
Input
<template>
<month-picker-input :no-default="true"></month-picker-input>
</template>
<script>
import MonthPickerInput from 'vue-month-picker'
export default {
components: {
MonthPickerInput
}
}
</script>
Inline
<template>
<p>{{ date.month }}</p>
</month-picker>
</template>
<script>
import MonthPicker from 'vue-month-picker'
export default {
data() {
return {
date: {
from: null,
to: null,
month: null,
year: null
}
}
},
components: {
MonthPicker
},
methods: {
showDate (date) {
this.date = date
}
}
}
</script>
Prop | 类型 | 默认值 | 描述 |
---|---|---|---|
lang | String | en | 插件的语言 |
months | Array | [] | 如果不支持语言,则自定义月份。 |
default-month | Integer | 默认选择的月份选择器。要显示未选择的月份选择器,请使用无默认 prop. | |
default-year | Integer | 月份选择器的默认年份。 | |
input-pre-filled | Boolean | 月份选择器的默认年份。 | |
no-default | Boolean | false | 显示定义为输入值的月份和年份。仅在定义参数default-year和default-month时有效 |
show-year | Boolean | false | 显示年份选择器。 |
editable-year | Boolean | false | 年显示为输入字段。 |
clearable | Boolean | false | 可能清除选定的月份。 |
variant | String | default | 颜色变体。目前支持默认和深色。 |
事件 | 返回 | 描述 |
---|---|---|
@change | Object | 表示该值已更改。注意,当安装了月份选择器时,如果选择了默认值,则将触发此事件。如果需要用户选择的值,请使用输入事件。 |
@change-year | Number | 表示年份已更改。将发出年份值。 |
@input | Object | 指示该值已被用户更改。 |
@clear | 表示用户已清除所选值 |