用Vue寫一個datepicker的方法
- 小云云原創
- 2018-01-29 15:21:331960瀏覽
jQuery最重要的功能是跨瀏覽器，而現在瀏覽器市場雖不完美，但已經遠沒有從前那麼慘，數據驅動視圖的思想倍受歡迎，大家開始使用前端框架取代jQuery，我個人比較喜歡Vue.js，所以想試著用Vue.js寫一個元件出來。
為了發佈到npm上，所以給專案位址改名字了，但內部程式碼沒有改，使用方法比之前方便。
GitHub位址: Here
功能&期望值
這個datepicker目前只實作了一些常用的功能：
選擇時間(這話說得有點多餘)
最大/最小時間限制
中/英文切換(其實也就星期和月份需要切換)
可以.vue形式使用，也可在瀏覽器環境中直接使用
沒了。 。 。
目錄結構
萬事的第一步依然是建立項目，只是單一元件，結構並不複雜，Datepicker.vue是最重要的元件文件，dist是webpack的輸出資料夾，index.js是webpack打包的入口文件，最後是webpack的設定文件，用來對我們的函式庫檔案進行打包用的。因此專案結構就是這樣：
. ├── Datepicker.vue ├── LICENSE ├── README.md ├── dist │ └── vue-datepicker.js ├── index.js ├── package.json └── webpack.config.js
從Datepicker.vue入手
以.vue的方式寫Vue元件是一種特殊寫法，每個Vue檔案包含template, script, style三部分，template最好不要成為片段實例,所以最外層先套一層p，當做整個組件的根元素。一個datepicker一般由兩部分組成，一個用來顯示日期的input框，一個用來選擇日期的panel，因為我發現input在移動端會自動喚起鍵盤，所以沒有使用input，直接用了p模擬,通過點擊事件決定panel的顯隱。 value是最終的結果，需要和父元件通信，所以將value寫成了prop，在父元件中使用value.sync="xxx"，datepicker的value就和父元件的xxx雙向綁定了。
<template>
<p class="date-picker">
<p class="input" v-text="value" @click="panelState = !panelState">
</p>
<p class="date-panel" v-show="panelState">
</p>
</template>
<scrip>
export default {
data () {
return {
panelState: false //初始值，默认panel关闭
}
},
props: {
value: String
}
}
</script>渲染日期清單
一個月最少是28天，如果把星期日排在開頭，那麼最少(1號恰好是週日)需要4行，但是每個月天數30，31居多，而且1號又不一定是周日，我索性乾脆按最多的情況設計了，共6行，當月日期沒填滿的地方用上個月或下個月的日期補齊，這樣就方便計算了，而且切換月份時候panel高度不會變化。日期列表的陣列需要動態計算，Vue提供了computed這個屬性，所以直接將日期清單dateList寫成計算屬性。我的方法是將日期列表固定為長度為42的數組，然後將本月，上個月，下個月的日期依次填入。
computed: {
dateList () {
//获取当月的天数
let currentMonthLength = new Date(this.tmpMonth, this.tmpMonth + 1, 0).getDate()
//先将当月的日期塞入dateList
let dateList = Array.from({length: currentMonthLength}, (val, index) => {
return {
currentMonth: true,
value: index + 1
}
})
//获取当月1号的星期是为了确定在1号前需要插多少天
let startDay = new Date(this.year, this.tmpMonth, 1).getDay()
//确认上个月一共多少天
let previousMongthLength = new Date(this.year, this.tmpMonth, 0).getDate()
}
//在1号前插入上个月日期
for(let i = 0, len = startDay; i < len; i++){
dateList = [{previousMonth: true, value: previousMongthLength - i}].concat(dateList)
}
//补全剩余位置
for(let i = 0, item = 1; i < 42; i++, item++){
dateList[dateList.length] = {nextMonth: true, value: i}
}
return dateList
}這裡用Array.from來初始化了一個數組，傳入一個Array Like，轉換成數組，在拼接字串時候採用了arr[arr.length]和[{}].concat(arr)這種方式，因為在JsTips上學到這樣做性能更好，文章的最後會貼出相關連結。
這樣，日期列表就建構好了，在template中使用v-for循環渲染出來
<ul class="date-list">
<li v-for="item in dateList"
v-text="item.value"
:class="{preMonth: item.previousMonth, nextMonth: item.nextMonth,
selected: date === item.value && month === tmpMonth && item.currentMonth, invalid: validateDate(item)}"
@click="selectDate(item)">
</li>
</ul>樣式上就可以自己發揮了，怎麼喜歡怎麼寫。要注意的是循環日期可能會出現上個月或這個月的日期，我透過previuosMonth,currentMonth和nextMonth分別做了標記，對其他功能提供判斷條件。
年份和月份的列表都是差不多的道理，年份列表的初始值我直接寫在了data裡，以當前年份為第一個，為了和月份保持一致，每次顯示12個，都通過v -for渲染。
data () {
return {
yearList: Array.from({length: 12}, (value, index) => new Date().getFullYear() + index)
}
}選擇日期功能
選擇順序是：年-> 月-> 日，所以我們可以透過一個狀態變數來控制panel中顯示的內容，綁定適合的函數切換顯示狀態。
<p>
<p class="type-year" v-show="panelType === 'year'">
<ul class="year-list">
<li v-for="item in yearList"
v-text="item"
:class="{selected: item === tmpYear, invalid: validateYear(item)}"
@click="selectYear(item)"
>
</li>
</ul>
</p>
<p class="type-month" v-show="panelType === 'month'">
<ul class="month-list">
<li v-for="item in monthList"
v-text="item | month language"
:class="{selected: $index === tmpMonth && year === tmpYear, invalid: validateMonth($index)}"
@click="selectMonth($index)"
>
</li>
</ul>
</p>
<p class="type-date" v-show="panelType === 'date'">
<ul class="date-list">
<li v-for="item in dateList"
v-text="item.value"
track-by="$index"
:class="{preMonth: item.previousMonth, nextMonth: item.nextMonth,
selected: date === item.value && month === tmpMonth && item.currentMonth, invalid: validateDate(item)}"
@click="selectDate(item)">
</li>
</ul>
</p>
</p>選擇日期的方法就不細說了，在selectYear,selectMonth中對年份，月份變數賦值，再分別將panelType推向下一步就實現了日期選擇功能。
不過在未選擇完日期之前，你可能不希望當前年月的真實值發生變化，所以在這些方法中可先將選擇的值賦給一個臨時變量，等到seletDate的時候再一次性全部賦值。
selectMonth (month) {
if(this.validateMonth(month)){
return
}else{
//临时变量
this.tmpMonth = month
//切换panel状态
this.panelType = 'date'
}
},
selectDate (date) {
//validate logic above...
//一次性全部赋值
this.year = tmpYear
this.month = tmpMonth
this.date = date.value
this.value = `${this.tmpYear}-${('0' + (this.month + 1)).slice(-2)}-${('0' + this.date).slice(-2)}`
//选择完日期后，panel自动隐藏
this.panelState = false
}最大/小時間限制
#最大/小值是需要從父元件傳遞下來的，因此應該使用props，另外，這個值可以是字串，也應該可以是變數(例如同時存在兩個datepicker，第二個的日期不能比第一個大這種邏輯)，所以應該使用Dynamically bind的方式傳值。
<datepicker :value.sync="start"></datepicker> <!-- 现在min的值会随着start的变化而变化 --> <datepicker :value.sync="end" :min="start" ></datepicker>
增加了限制條件，對於不合法的日期，其按鈕應該變為置灰狀態，我用了比較時間戳的方式來判斷日期是否合法，因為就算當前panel中的日期是跨年或是跨月的，透過日期構造函數創建時都會幫你轉換成對應的合法值，省去很多判斷的麻煩：
new Date(2015, 0, 0).getTime() === new Date(2014, 11, 31).getTime() //true new Date(2015, 12, 0).getTime() === new Date(2016, 0, 0).getTime() //true
因此验证日期是否合法的函数是这样的:
validateDate (date) {
let mon = this.tmpMonth
if(date.previousMonth){
mon -= 1
}else if(date.nextMonth){
mon += 1
}
if(new Date(this.tmpYear, mon, date.value).getTime() >= new Date(this.minYear, this.minMonth - 1, this.minDate).getTime()
&& new Date(this.tmpYear, mon, date.value).getTime() <= new Date(this.maxYear, this.maxMonth - 1, this.maxDate).getTime()){
return false
}
return true
}动态计算位置
当页面右侧有足够的空间显示时，datepicker的panel会定位为相对于父元素left: 0的位置，如果没有足够的空间，则应该置于right: 0的位置，这一点可以通过Vue提供的动态样式和样式对象来实现(动态class和动态style其实只是动态props的特例)，而计算位置的时刻，我放在了组件声明周期的ready周期中，因为这时组件已经插入到DOM树中，可以获取style进行动态计算：
ready () {
if(this.$el.parentNode.offsetWidth + this.$el.parentNode.offsetLeft - this.$el.offsetLeft <= 300){
this.coordinates = {right: '0', top: `${window.getComputedStyle(this.$el.children[0]).offsetHeight + 4}px`}
}else{
this.coordinates = {left: '0', top: `${window.getComputedStyle(this.$el.children[0]).offsetHeight + 4}px`}
}
}
<!-- template中对应的动态style -->
<p :style="coordinates"></p>为了panel的显隐可以平滑过渡，可以使用transition做过渡动画，这里我简单地通过一个0.2秒的透明度过渡让显隐更平滑。
<p :style="this.coordinates" v-show="panelState" transition="toggle"></p>
//less syntax
.toggle{
&-transition{
transition: all ease .2s;
}
&-enter, &-leave{
opacity: 0;
}
}中英文切换
这里其实也很简单，这种多语言切换实质就是一个key根据不同的type而输出不同的value，所以使用filter可以很容易的实现它！比如渲染星期的列表:
<ul class="weeks">
<li v-for="item in weekList" v-text="item | week language"></li>
</ul>
filters : {
week (item, lang){
switch (lang) {
case 'en':
return {0: 'Su', 1: 'Mo', 2: 'Tu', 3: 'We', 4: 'Th', 5: 'Fr', 6: 'Sa'}[item]
case 'ch':
return {0: '日', 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六'}[item]
default:
return item
}
}
}多种使用方式
对于一个Vue组件，如果是使用webpack + vue-loader的.vue单文件写法，我希望这样使用：
//App.vue
<script>
import datepicker from 'path/to/datepicker.vue'
export default {
components: { datepicker}
}
</script>如果是直接在浏览器中使用，那么我希望datepicker这个组件是暴露在全局下的，可以这么使用：
//index.html
<html>
<script src="path/to/vue.js"></script>
<script src="path/to/datepicker.js"></script>
<body>
<p id="app"></p>
<script>
new Vue({
el: '#app',
components: { datepicker }
})
</script>
</body>
</html>这里我选择了webpack作为打包工具，使用webpack的output.library和output.linraryTarget这两个属性就可以把你的bundle文件作为库文件打包。library定义了库的名字，libraryTarget定义了你想要打包的格式，具体可以看文档。我希望自己的库可以通过datepicker加载到，并且打包成umd格式，因此我的webpack.config.js是这样的:
module.exports = {
entry: './index.js',
output: {
path: './dist',
library: 'datepicker',
filename: 'vue-datepicker.js',
libraryTarget: 'umd'
},
module: {
loaders: [
{test: /\.vue$/, loaders: ['vue']},
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel']}
]
}
}打包完成的模块就是一个umd格式的模块啦，可以在浏览器中直接使用，也可以配合require.js等模块加载器使用！
适配 Vue 2.x
Vue 2.0已经发布有段时间了，现在把之前的组件适配到Vue 2.0。迁移过程还是很顺利的，核心API改动不大，可以借助vue-migration-helper来找出废弃的API再逐步修改。这里只列举一些我需要修改的API。
filter
2.0中的filter只能在mustache绑定中使用，如果想在指令式绑定中绑定过滤后的值，可以选择计算属性。我在月份和星期的显示中使用到了过滤器来过滤语言类型，但我之前是在指令式绑定中使用的filter，所以需要如下修改，：
//修改前
<p class="month-box" @click="chType('month')" v-text="tmpMonth + 1 | month language"></p>
//修改后，filter传参的方式也变了，变成了函数调用的风格
<p class="month-box" @click="chType('month')">{{tmpMonth + 1 | month(language)}}</p>移除$index和$key
这两个属性不会在v-for中被自动创建了，如需使用，要在v-for中自行声明：
<li v-for="item in monthList" @click="selectMonth($index)"></li> // <li v-for="(item, index) in monthList" @click="selectMonth(index)"></li>
ready 生命周期移除
ready从生命周期钩子中移除了，迁移方法很简单，使用mounted和this.$nextTick来替换。
prop.sync弃用
prop的sync弃用了，迁移方案是使用自定义事件，而且Datepicker这种input类型组件，可以使用表单输入组件的自定义事件作为替换方案。自定义组件也可以使用v-model指令了，但是必须满足两个条件：
接收一个value的prop
值发生变化时，触发一个input事件，传入新值。
所以Datepicker的使用方式也不是f2711184ba1ee7ec6aa7b9dc5d2771bd736fc7563f791c0444464598257dec0b了，而是bad5218a9f314e0b4262fb54ca286ace736fc7563f791c0444464598257dec0b。组件自身向父级传值的方式也不一样了：
//1.x版本，设置了value的值会同步到父级
this.value = `${this.tmpYear}-${('0' + (this.month + 1)).slice(-2)}-${('0' + this.date).slice(-2)}`
//2.x版本，需要自己触发input事件，将新值作为参数传递回去
let value = `${this.tmpYear}-${('0' + (this.month + 1)).slice(-2)}-${('0' + this.date).slice(-2)}`
this.$emit('input', value)相关推荐：
Vue引用datepicker插件无法监听datepicker输入框的值怎么办
详解JS控件bootstrap datepicker的使用方法（图）
以上是用Vue寫一個datepicker的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！