vue年份选择器,VUE 年份范围选择器

需求:年份选择组件 代码地址

组件已发布至npm,可直接安装使用

公司的很多项目需要使用年份选择功能,之前用的是select,感觉不是很合理,那我决定手撸一个YearPicker,

先看图效果图
在这里插入图片描述在这里插入图片描述

功能
1,支持深浅两种配色,
2,默认禁用今年以后的年份(可配置)

使用方法

1. 安装至你的项目

npm install --save vue-year-picker
import Vue from 'vue';
import yearPicker from 'vue-year-picker'

Vue.use(yearPicker);

2. 组件中使用

<year-picker
             dark 
             v-model="year" 
             :year-disable="'no'"
             @input="handlerInput" 
             />
export default {
  name: 'demo',
  data() {
    return {
      year: ''
    }
  },
  methods: {
    handlerInput(v) {
      console.log('选中的年份',v)
    }
  }
}

3.Attributes

参数类型描述
darkBoolean默认false,设置为true时开启深色模式
year-disableString‘after’=禁用今年以后,‘before’=禁用今年以前

4.Events

事件名说明参数
input当用户选中年份时触发value

如有帮助,给颗star

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值