الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

مو ربع منتقي

محدد نطاق موسمي يعتمد على Vue2 وElementUI

  • الصفحة الرئيسية: https://mouday.github.io/mo-quartier-picker/
  • NPM: https://www.npmjs.com/package/mo-quartier-picker
  • جيثب: https://github.com/mouday/mo-quartier-picker

لا يحتوي element-ui على محدد نطاق الموسم، ومكتبة واجهة المستخدم مفتوحة المصدر لـ ByteDance arco.design تدعم فقط Vue3. ومع ذلك، فإن المشروع القديم هو Vue2، لذا لا يمكنني القيام بذلك إلا بنفسي.

مكتبات الطرف الثالث المستخدمة

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

  • عنصر واجهة المستخدم https://element.eleme.cn/#/zh-CN/component/installation

  • لحظةjs http://momentjs.cn/

العرض التوضيحي عبر الإنترنت: https://mouday.github.io/mo-quartier-picker/dist/

استخدم نموذج التعليمات البرمجية المصدر: https://github.com/mouday/mo-quartier-picker/blob/master/src/App.vue

الطريقة الأولى: مقدمة CDN

https://cdn.jsdelivr.net/npm/mo-ربع-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 >

مرحبا بالعالم 

 <!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 >

الطريقة الثانية: السياسة الوقائية الوطنية 

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

المعلمة

المعلمة يوضح يكتب قيمة اختيارية القيمة الافتراضية
قيمة القيمة الحالية صفيف خالية، على سبيل المثال: ['2022-07-01'، '2024-06-30'] يدعم sync باطل

حدث

اسم الحدث يوضح معلمات رد الاتصال
على التغيير يتم تشغيله عندما يقوم المستخدم بتعديل القيمة المحددة بيانات

بيانات معلمة رد الاتصال عند التغيير: 

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

لون مخصص 

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

مو ربع منتقي 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 >
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل