mo-quarter-picker | 一个基于 Vue 和 ElementUI 的季节范围选择器

<!-- 样式文件 -->
<link href="https://mouday.github.io/mo-quarter-picker/lib/mo-quarter-picker.min.css" rel="stylesheet">
<!-- 核心文件 -->
<script src="https://mouday.github.io/mo-quarter-picker/lib/mo-quarter-picker.min.js"></script>
Hello world
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>mo-quarter-picker</title>
    <!-- element-ui样式 -->
      href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/theme-chalk/index.min.css"
      rel="stylesheet"
  </head>
      季节范围选择器：mo-quarter-picker
    <div id="app">
      <mo-quarter-picker
        :value.sync="value"
        @on-change="handleChange"
      ></mo-quarter-picker>
    <!-- 引入依赖 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
    <script src="https://mouday.github.io/mo-quarter-picker/dist/mo-quarter-picker.min.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            value: null
        methods: {
          handleChange(value) {
            console.log(value);
    </script>
  </body>
</html>
方式二：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)
// 选中季节的背景色
.quarter-picker__item--active .quarter-picker__item__label,
.quarter-picker__item:hover .quarter-picker__item__label {
  background-color: var(--primary-color) !important;
// 当前季节下的小圆点
.quarter-picker__item__today:after {
  background-color: var(--primary-color) !important;
mo-quarter-picker 2.0
增加 周、月、季度、年范围选择器
mo-date-range-picker
mo-week-range-picker
mo-month-range-picker
mo-year-range-picker
修改组件名
mo-quarter-picker => mo-quarter-range-picker
<!-- 月份 -->
<mo-month-range-picker
      :value.sync="value"
      @on-change="handleChange"
</mo-month-range-picker>
<!-- 星期 -->
<mo-week-range-picker
      :value.sync="value"
      @on-change="handleChange">
</mo-week-range-picker>
<!-- 年度 -->
<mo-year-range-picker 
        :value.sync="value"
        @on-change="handleChange">
      </mo-year-range-picker>
<!-- 日期范围选择器 -->
<mo-date-range-picker 
      :type.sync="type"
      :week-value.sync="week_value"
      :month-value.sync="month_value"
      :quarter-value.sync="quarter_value"
      :year-value.sync="year_value"
      @on-value-change="handleValueChange"
      @on-type-change="handleTypeChange"
    ></mo-date-range-picker>