在日常開發(fā)中，經(jīng)常會遇到需要選擇月份范圍的需求，通常情況下可以使用jQuery插件或自己手寫實現(xiàn)。但是，在使用Vue開發(fā)的項目中，我們可以使用Vue官方提供的組件 —— DatePicker實現(xiàn)月份范圍選擇。

<template>
<div>
<date-picker
v-model="value"
type="monthrange"
range-separator="至"
format="yyyy-MM"
/>
</div>
</template>
<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
export default {
components: { DatePicker },
data() {
return {
value: []
};
}
};
</script>

如上面的代碼所示，我們使用了vue2-datepicker組件，當(dāng)使用type="monthrange"時，會呈現(xiàn)一個月份范圍選擇器。我們還通過設(shè)置range-separator屬性修改了選擇范圍的分隔符為“至”，并設(shè)置了format屬性來保證選擇的是“年-月”格式的數(shù)據(jù)。

除此之外，我們還可以使用一些其他的屬性來改變DatePicker的表現(xiàn)形式，例如：

<date-picker
v-model="value"
type="monthrange"
range-separator="至"
format="yyyy-MM"
:show-footer="false"
:disabled-date="disabledDate"
:clearable="false"
:editable="false"
:transfer="false"
:show-week-numbers="false"
:week-labels="customWeekLabels"
:month-labels="customMonthLabels"
/>

這里簡單介紹一下這些屬性的用途：

• show-footer：是否顯示DatePicker底部的快捷選擇器。
• disabled-date：禁用某些日期，接收一個函數(shù)，返回一個Boolean值，true則禁用，false則啟用。
• clearable：是否顯示清除按鈕。
• editable：是否可手動輸入日期。
• transfer：是否將Picker關(guān)聯(lián)展示在 body 元素下。
• show-week-numbers：是否顯示周數(shù)。
• week-labels：自定義周數(shù)的標(biāo)簽。
• month-labels：自定義月份的標(biāo)簽。

以上這些屬性不一一介紹，大家可以根據(jù)自己的需求自行選擇設(shè)置。

最后，我們再來簡單介紹一下如何獲取DatePicker選擇的月份范圍：

<script>
export default {
// ...
watch: {
value(newVal) {
console.log('選擇的月份范圍為：', newVal);
}
}
};
</script>

當(dāng)DatePicker的value發(fā)生變化時，我們可以在watch中監(jiān)聽到這個變化，并獲取到新的選擇結(jié)果。這里我們只是簡單地在控制臺輸出了選擇結(jié)果，實際場景中可以根據(jù)需要靈活處理這個選擇結(jié)果。