mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器

mo-quarter-picker

一个基于 Vue2 和 ElementUI 的季度范围选择器

注意： 此文档是1.0版本的

2.0版本的文件请至github查看，有更新

• Home: https://mouday.github.io/mo-quarter-picker/
• NPM: https://www.npmjs.com/package/mo-quarter-picker
• Github: https://github.com/mouday/mo-quarter-picker

element-ui没有季节范围选择器，而字节跳动开源的UI库arco.design，只支持Vue3，奈何老项目是Vue2的，只能自己动手了

用到的第三方库

• Vue2.js https://cn.vuejs.org/v2/guide/

• element-ui https://element.eleme.cn/#/zh-CN/component/installation

• momentjs http://momentjs.cn/

在线 demo: https://mouday.github.io/mo-quarter-picker/test.html

方式一：CDN 引入

https://cdn.jsdelivr.net/npm/mo-quarter-picker/

Hello world

DOCTYPE html>

  
    
    mo-quarter-picker
    
    
  

  
    
      季节范围选择器：mo-quarter-picker
    

    
      
    

    
    
    
    

    

    
      const app = new Vue({
        el: "#app",
        data() {
          return {
            value: null
          };
        },

        methods: {
          handleChange(value) {
            console.log(value);
          }
        }
      });
    
  

方式二：NPM

npm i mo-quarter-picker -S

main.js

import Vue from "vue";
import App from "./App.vue";

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import MoQuarterPicker from "mo-quarter-picker";

Vue.use(ElementUI);
Vue.use(MoQuarterPicker);

new Vue({
  el: "#app",
  render: h => h(App)
});

参数 参数说明类型可选值默认值value当前值Arraynull，例如：[‘2022-09-01’, ‘2022-06-01’]支持syncnull 事件 事件名称说明回调参数on-change用户修改选定的值时触发data

on-change 回调参数 data：

[
  {
    end_date: "2022-09-01"
    label: "Q3"
    quarter: 3
    start_date: "2022-07-01"
    value: "2022-3"
    year: 2022
  },
  {
    end_date: "2022-06-01"
    label: "Q2"
    quarter: 2
    start_date: "2022-04-01"
    value: "2023-2"
    year: 2023
  }
]

参考文章 第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件，可直接使用 用element+vue制作季节选择器，可以选择开始时间和结束时间（组件）