年范围选择shenmuwl-year-picker-vue3@1.0.4

安装：

yarn add shenmuwl-year-picker-vue3@1.0.4

引入

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'

// @ts-ignore
import shenmuwlYearPickerVue3 from 'shenmuwl-year-picker-vue3'
import 'shenmuwl-year-picker-vue3/index.css'

createApp(App).use(router)
    .use(shenmuwlYearPickerVue3)
    .mount('#app')

使用

<template>
  <div style="padding: 50px">
    {{ form.shiJian1 }}-{{ form.shiJian2 }}
    <year-picker
        input-width="300px"
        v-model:start="form.shiJian1"
        v-model:end="form.shiJian2"
    />
  </div>
</template>

<script>
import moment from "moment";
import {reactive} from "vue";

export default {
  name: "viewsHome",
  setup(){
      const form = reactive({
        shiJian1: moment().subtract(1, 'year').format('YYYY'),
        shiJian2: moment().subtract(1, 'year').format('YYYY')
      })
    return {
      form
    }
  }
}
</script>

效果

介绍：

vue3年范围选择器

用于vue3 版本：v12.22.12 @vue/cli 5.0.4 yarn 1.22.19 系统：mac

配置

sp="至" 配置中间的至
input-width = '178px' 配置input的宽度
v-model:start="shiJian1"
v-model:end="shiJian2"