Page d'accueil>Code source PHP>Autres catégories
Télécharger

mo-quartier-picker

Un sélecteur de plage saisonnière basé sur Vue2 et ElementUI

  • Accueil : 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 n'a pas de sélecteur de plage de saison et la bibliothèque d'interface utilisateur open source de ByteDance, arco.design, ne prend en charge que Vue3. Cependant, l'ancien projet est Vue2, je ne peux donc le faire que moi-même.

Bibliothèques tierces utilisées

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

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

  • momentjs http://momentjs.cn/

Démo en ligne : https://mouday.github.io/mo- quarter-picker/dist/

Utilisez un exemple de code source : https://github.com/mouday/mo- quarter-picker/blob/master/src/App.vue

Méthode 1 : introduction au 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 >

Bonjour le monde 

 <!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éthode 2 : NMP 

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

paramètre

paramètre illustrer taper Valeur facultative valeur par défaut
valeur valeur actuelle Tableau null, par exemple : ['2022-07-01', '2024-06-30'] prend en charge sync nul

événement

nom de l'événement illustrer paramètres de rappel
en changement Se déclenche lorsque l'utilisateur modifie la valeur sélectionnée données

données des paramètres de rappel en cas de changement : 

 [
  {
    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
  }
]

Couleur personnalisée 

 :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-quartier-picker 2.0

Ajout de sélecteurs de plage de semaine, mois, trimestre et année

Ajouter de nouveaux composants 

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

Modifier le nom du composant 

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

Exemple: 

 <!-- 月份 -->
< 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 >
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout