Inicio>código fuente PHP>Otras categorias
Descargar

recolector de cuartos de mes

Un selector de rango estacional basado en Vue2 y ElementUI

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

element-ui no tiene un selector de rango de temporada y la biblioteca de interfaz de usuario de código abierto arco.design de ByteDance solo es compatible con Vue3. Sin embargo, el proyecto anterior es Vue2, por lo que solo puedo hacerlo yo mismo.

Bibliotecas de terceros utilizadas

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

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

  • momentojshttp://momentjs.cn/

Demostración en línea: https://mouday.github.io/mo- quarter-picker/dist/

Utilice el código fuente de muestra: https://github.com/mouday/mo- quarter-picker/blob/master/src/App.vue

Método 1: introducción a CDN

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

 <!-- 样式文件 -->
< 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 >

Hola Mundo 

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < meta charset =" utf-8 " />
    < title > mo-quarter-picker </ title >
    <!-- element-ui样式 -->
    < link
      href =" https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/theme-chalk/index.min.css "
      rel =" stylesheet "
    />
  </ head >

  < body >
    < h1 >
      季节范围选择器：mo-quarter-picker
    </ h1 >

    < div id =" app " >
      < mo-quarter-picker
        :value.sync =" value "
        @on-change =" handleChange "
      > </ mo-quarter-picker >
    </ div >

    <!-- 引入依赖 -->
    < 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 >

Método 2: MNP 

 npm i mo-quarter-picker -S

principal.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 )
} ) ;

parámetro

parámetro ilustrar tipo Valor opcional valor predeterminado
valor valor actual Formación nulo, por ejemplo: ['2022-07-01', '2024-06-30'] admite sync nulo

evento

nombre del evento ilustrar parámetros de devolución de llamada
en cambio Se activa cuando el usuario modifica el valor seleccionado. datos

datos del parámetro de devolución de llamada en caso de cambio: 

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

Color personalizado 

 :root {
  --primary-color : #6833cf ;
}

// 季节选择器
// 选中季节的背景色
.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-cuarto-selector 2.0

Se agregaron selectores de rango de semana, mes, trimestre y año.

Agregar nuevos componentes 

mo-date-range-picker
mo-week-range-picker
mo-month-range-picker
mo-year-range-picker

Modificar el nombre del componente 

mo-quarter-picker = > mo-quarter-range-picker

Ejemplo: 

 <!-- 月份 -->
< 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 >
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo