Vue的简单月份选择器插件 – vue-month-picker

Vue的简单月份选择器插件 – vue-month-picker

插件名称:vue-month-picker

发布时间:2020年5月17日

插件作者:kleinrein

官网 演示 GitHub下载

Vue.js的轻量级月份选择器,没有依赖项。

变更日志:

v1.3.2(09/03/2020)

  • 修复了输入的正确预填充
  • 修复了软件包存储库的问题

v1.3.1(08/29/2020)

  • 修复了<month-picker-input>中的更改事件

v1.3.0(08/18/2020)

  • 修正了道具说明中的错别字
  • 固定日语
  • 添加了最小-最大日期
  • 仅加年

v1.2.6(07/09/2020)

  • 纠正立陶宛语翻译
  • 在按钮上添加type =“ button”,这样就不会导致表单提交
  • SK和CZ翻译修复
  • 修正默认的更改年份
  • 修复马来语
  • 修复月份可能在印尼语中

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>

Props:

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 表示用户已清除所选值
相关插件