mo quarter picker
1.0.0
ตัวเลือกช่วงฤดูกาลตาม Vue2 และ ElementUI
element-ui ไม่มีตัวเลือกช่วงฤดูกาล และไลบรารี UI แบบโอเพ่นซอร์สของ ByteDance arco.design รองรับเฉพาะ Vue3 เท่านั้น อย่างไรก็ตาม โปรเจ็กต์เก่าคือ Vue2 ดังนั้นฉันจึงทำได้ด้วยตัวเองเท่านั้น
ไลบรารีบุคคลที่สามที่ใช้
Vue2.js https://cn.vuejs.org/v2/guide/
องค์ประกอบ-ui https://element.eleme.cn/#/zh-CN/component/installation
โมเมนต์ js http://momentjs.cn/
การสาธิตออนไลน์: https://mouday.github.io/mo-quarter-picker/dist/
ใช้ซอร์สโค้ดตัวอย่าง: https://github.com/mouday/mo-quarter-picker/blob/master/src/App.vue
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 >สวัสดีชาวโลก
<!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 )
} ) ; | พารามิเตอร์ | แสดงให้เห็น | พิมพ์ | ค่าที่ไม่บังคับ | ค่าเริ่มต้น |
|---|---|---|---|---|
| ค่า | มูลค่าปัจจุบัน | อาร์เรย์ | null เช่น ['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 ;
}
เพิ่มตัวเลือกช่วงสัปดาห์ เดือน ไตรมาส และปี
เพิ่มส่วนประกอบใหม่
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 >
