1. 在線DEMO
http://va-carousel.xiaoshang.online
2. 首先是一張頭腦導圖
3. 然後是以上屬性的標註申明
4. 代碼層
4.1 撤除可從父組件吸收的屬性,組件本身有以下屬性:
data() {
return {
list: [], // 當前顯現的圖片列表
hover: false, // 鼠標是不是懸浮在組件上
timer: null, // 自動切換的 setInterval
itemWidth: '',// 每項元素的寬度
isReverse: false // 是不是是反向切換,觸發prev時,該屬性為true
}
}
4.2 組件掛載之前
- 盤算每項元素的寬度,即itemWidth的值
- 初始化顯現的圖片列表,即list。這裏存儲的數據才是真正會被在頁面上襯着的。每次切換,實際上就是修正該list中的數據,對應的視圖會自動更新,數據驅動視圖嘛。
beforeMount() {
this.itemWidth = 100 / this.total + '%'
this.list = this.items.slice(0, this.total)
},
4.3 組件掛在後,搜檢autoplay屬性,若該屬性為true,則發生一個計時器
mounted() {
if (this.autoplay) {
this.startTimer()
}
},
4.4 startTimer函數很簡樸,就是距離肯定時候觸發一次next(向後)切換
// 最先計時器
startTimer() {
if (!this.interval || this.interval <= 0) {
return
}
this.timer = setInterval(this.next, this.interval)
}
4.5 next函數
// 下一張
next() {
// 假如圖片列表小於須要顯現的數目,則不舉行轉動
if (this.items.length < this.total) {
return
}
// 向後追加一個元素,該元素為:
// 顯現列表中末了一個元素在原數組中的后一個元素
// 假如已經是末了一個元素,則運用第一個元素
let indexOfItems = this.items.findIndex(
item => item.id === this.list[this.list.length - 1].id
)
if (indexOfItems === this.items.length - 1) {
// 運用第一個元素
this.list.push(this.items[0])
} else {
// 運用后一個元素
this.list.push(this.items[indexOfItems + 1])
}
// 移除當前顯現圖片中的第一個
this.list.shift()
this.isReverse = false
},
4.6 對應的另有一個prev函數,與next函數邏輯相反,這裏就不展現代碼了
4.7 點擊圖片時,向父組件開釋事宜selectedItem,通報兩個參數 item 和 index 分別為當前點擊的對象,和該對象在list中的位置
// 點擊圖片
selectedItem(item, index) {
this.$emit('selectedItem', item, index)
},
4.8 鼠標懸浮在組件上時,住手自動切換(若autoplay為ture), 鼠標脫離時,繼承切換
handleMouseEnter() {
this.hover = true
this.pauseTimer()
},
handleMouseLeave() {
this.hover = false
if (this.autoplay) {
this.startTimer()
}
},
4.9 然後是過渡結果的完成
由於arrow元素也在transition-group中,所以當arrow=‘hover’時,arrow的顯現、隱蔽也會觸發鈎子函數,然則我們的鈎子函數是針對image-item寫的,所以須要在函數中檢測是哪一個元素觸發的,這裏經由過程搜檢className舉行推斷。
然後針對向前、向後兩種狀況設置差別的款式
beforeEnter(el) {
// 只對image-item運用過渡
let isImageItem = el.className.indexOf('image-item') > -1
if (isImageItem) {
el.style.opacity = 0
if (this.isReverse) {
el.style.transform = 'translateX(-100%)'
} else {
el.style.transform = 'translateX(100%)'
}
}
}
4.10 這裏運用了Velocity,這是一個完成動畫結果的js庫,之所以運用這個庫是由於試了n種計劃都沒能完成預期結果emm
enter(el, done) {
// 只對image-item運用過渡
let isImageItem = el.className.indexOf('image-item') > -1
if (isImageItem) {
Velocity(el, { opacity: 1, translateX: '0px' }, { complate: done })
} else {
done()
}
}
4.11 然後是對應的beforeLeave、leave函數,這裏就不展現了
以上基礎就是一切js部份,團體感覺就是,一旦完成邏輯搞清楚,代碼完成起來照樣挺輕易的,然後就是框架的熟習水平。
5. npm包宣布
這本是公司營業中的一個功用需求,由於沒能在網上找到現成的輪子,找個差不多的結果指導不滿意,所以只能本身寫了,做都做了不發出來豈不是白寫了. . .
npm宣布流程簡樸歸納綜合就是
1.註冊
去npm官網註冊個賬號
2.天生npm包 文件夾中有package.json文件就是一個npm包
3.在終端運用npm publish宣布包,勝利以後,該項目文件夾下一切文件都邑上傳至npm官網,當用戶運用npm install裝置后,就會將全部文件夾下載至node_modules文件夾中,關於這個項目,就是一個運用vue-cli天生的vue項目,組件途徑src/components/VaCarousel.vue
,所以運用npm install va-carousel裝置以後,只須要在項目中像如許導入即可運用(條件是你的項目也是運用vue-cli天生的,關於其他體式格局豎立的項目可能會湧現一些毛病):import VaCarousel from 'va-carousel/src/components/VaCarousel.vue'
以上