68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
<template>
|
|
<el-select
|
|
v-model="showValue"
|
|
:placeholder="placeholder"
|
|
@change="onChange"
|
|
:style="{width: width}"
|
|
:clearable="clearable"
|
|
>
|
|
<el-option v-for="num of (end - start + 1)" :value="end - num + 1" :key="num" :label="(end - num + 1).toString() + suffix"></el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
// 年份选择器
|
|
export default {
|
|
name: 'rangePicker',
|
|
props: {
|
|
clearable: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 双向绑定值
|
|
value: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
// 可选值（起始）
|
|
start: {
|
|
type: Number,
|
|
default: 2020,
|
|
},
|
|
// 可选值（结束）
|
|
end: {
|
|
type: Number,
|
|
default: 2024
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '点击选择年份',
|
|
},
|
|
// 后缀
|
|
suffix: {
|
|
type: String,
|
|
default: '年',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '150px'
|
|
}
|
|
},
|
|
computed: {
|
|
showValue: {
|
|
get() {
|
|
return this.value;
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onChange(val) {
|
|
this.$emit('change', val);
|
|
}
|
|
}
|
|
}
|
|
</script>
|