vue-quarter-plugin
v0.1.4
Published
A plugin for generating quater data
Downloads
2
Readme
Quarter Plugin
Many projects need to initialize the selection of quarter value many times, this is a helpful way to simplify this repetive work.
This is a vue plugin for generating quarter data based on customized start year or end year.
With the help of vue-quarter-plugin, you can get the array of years from the start year to the end year(if you set) or current year, current year value and current quarter ('Q1'/'Q2'/'Q3'/'Q4').
These three values are stored on three attributes on Vue's prototype: $quarterYears, $currentYear, and $currentQuarter
Details:
$quarterYears: An array which contains the years from 'start' year to 'end' year. e.g: [2019, 2020, 2021]
$currentYear: Value of current year e.g: 2021
$currentQuarter: String of current quarter e.g: 'Q1' (The ONLY possible value of $currentQuarter are 'Q1', 'Q2', 'Q3' and 'Q4')
How to use:
npm i vue-quarter-plugin
main.js:
import quarterPlugin from 'vue-quarter-plugin'
Vue.use(quarterPlugin)
const quarter = new quarterPlugin({start: 2019}) // set start year
// const quarter = new quarterPlugin({start: 2018, end: 2020}) // you can also set start and end year
new Vue({
render: h => h(App),
quarter
}).$mount('#app') // pass quarter
vue-quarter-plugin with elementUI:
<template>
<div>
<el-select v-model="year">
<el-option
v-for="year in $quarterYears" :key="year" :value="year" :label="year">
</el-option>
</el-select>
-
<el-select v-model="quarter">
<el-option
v-for="quarter in quarters" :key="quarter.key" :value="quarter.key" :label="quarter.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'TestComponent',
data() {
return {
year: this.$currentYear, // init year value
quarter: this.$currentQuarter, // init quarter value
quarters: [
{ key: 'Q1', value: '第一季度'}, // set customized label based on your own language, here is Chinese
{ key: 'Q2', value: '第二季度'},
{ key: 'Q3', value: '第三季度'},
{ key: 'Q4', value: '第四季度'},
]
}
}
}
</script>
Result: