[TOC] ## Mock數據 ## 評分 ~~~ <template> <div class="star" :class="starType"> <span v-for="(itemClass, key, index) in itemClasses" :class="itemClass" class="star-item" v-bind:key="index"></span> </div> </template> <script> const LENGTH = 5 const CLS_ON = 'on' const CLS_HALF = 'half' const CLS_OFF = 'off' export default { props: { size: { type: Number }, score: { type: Number } }, computed: { starType () { return 'star-' + this.size }, itemClasses () { let result = [] let score = Math.floor(this.score * 2) / 2 let hasDecimal = score % 1 !== 0 let integer = Math.floor(score) // 根據分數整數大小，將CLS_ON放入數組 for (let i = 0; i < integer; i++) { result.push(CLS_ON) } // 若包含小數，將CLS_HALF放入數組 if (hasDecimal) { result.push(CLS_HALF) } // 用CLS_OFF填充剩余空位 while (result.length < LENGTH) { result.push(CLS_OFF) } return result } } } </script> ~~~ ### 向下取0.5倍數 ``` let score = Math.floor(this.score * 2) / 2 ``` ### 判斷是否有小數 ~~~ score % 1 !== 0 ~~~ ## 動畫 ~~~ <template> <transition name="fade"> .... </transition> </template> <style> &.fade-enter-active, &.fade-leave-active { transition: all .5s; } &.fade-enter, &.fade-leave-active { opacity: 0; background: rgba(7, 17, 27, 0); } </style> ~~~ ~~~ <transition name="move"> <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart"> <span class="inner icon-remove_circle_outline"></span> </div> </transition> <style> &.move-enter-active, &.move-leave-active { transition: all 0.4s linear; } &.move-enter, &.move-leave-active { opacity: 0; transform: translate3d(24px, 0, 0); .inner { transform: rotate(180deg); } } </style> ~~~ ## 元素置底 ~~~ <template> <div class="detail"> <div class="detail-wrapper clearfix"> <div class="detail-main"> </div> </div> <div class="detail-close"></div> </div> </template> <style lang="scss" scoped> .detail { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; backdrop-filter: blur(10px); opacity: 1; background: rgba(7, 17, 27, 0.8); .detail-wrapper { width: 100%; min-height: 100%; .detail-main { margin-top: 64px; padding-bottom: 64px; } .detail-close { width: 32px; height: 32px; margin: -64px auto 0 auto; clear: both; font-size: 32px; } } } </style> ~~~  ## 屬性添加 data中對象沒有的屬性，要使用Vue.set添加，才能對屬性進行數據綁定 ~~~ if (!this.food.count) { Vue.set(this.food, 'count', 1) } else { this.food.count++ } ~~~ ## 方法定義 父組件可以調用子組件方法，子組件不能調用父組件方法。 ~~~ <template> <food :food="selectedFood" ref="food"></food> </template> <script> selectFood (food, event) { this.selectedFood = food this.$refs.food.show() // 獲取子組件 } </script> ~~~ 定義方法時，一般內部方法命名時前面加下劃線 ~~~ methods : { selectFood () { }, _drop () { } } ~~~ ## 組件點擊事件穿透 ~~~ @click.stop.prevent ~~~ ## 元素隱藏后要執行動畫（計算元素位置），可將其隱藏也改成transition ## 子組件獲取父組件請求接口的數據并調用Better-scroll 在watch中監聽獲取到的接口數據，在nextTick里初始化 mounted 中也要初始化，防止DOM重新渲染后沒有執行。 ~~~ <script> import BScroll from 'better-scroll' export default { mounted () { this.$nextTick(() => { this._initScroll() }) }, props: { seller: { type: Object } }, watch: { 'seller' () { this.$nextTick(() => { this._initScroll() }) } }, methods: { _initScroll () { if (!this.scroll) { this.scroll = new BScroll(this.$refs.seller, { click: true }) } else { this.scroll.refresh() } } } } </script> ~~~ ## data屬性擴展 ~~~ created () { this.$http.get('/api/seller?id=' + this.seller.id).then((res) => { res = res.data if (res.errno === ERR_OK) { this.seller = Object.assign({}, this.seller, res.data) } }) }, data () { return { seller: { id: (() => { let queryParam = urlParse() return queryParam.id })() } } }, ~~~ ## 離場動畫 轉場需要一點時間去完成這系列出場動畫，（否則下一個進來的頁面就會立刻出現，動畫會中止或覆蓋） ~~~ <template> <transition name="slide"> <div class="head-field" v-show="appear"> <span class="head-field-pic"> <span class="img-hover" @click.stop="uploadHeadImg"> <img :src="userinfo.headUrl" v-autofix/> </span> </span> </div> </transition> </template> <script> data () { return { appear: false } }, mounted () { this.$nextTick(() => { this.appear = true }) }, beforeRouteLeave (to, from, next) { this.appear = false setTimeout(() => { next() }, 800) } </script> <style lang="scss"> .slide-enter-active, .slide-leave-active { transform: translateY(0); transition: transform 1s; } .slide-enter, .slide-leave-to/* .fade-leave-active in below version 2.1.8 */ { transform: translateY(-50px); } </style> ~~~ ## 通知子組件通知父組件 用于模擬dispatch, 找到父組件， 并且觸發父組件方法（無需多次在父組件綁定自定義事件 ） ~~~ // dispatch.js export default { methods: { dispatch (componentName, eventName, params = []) { let parent = this.$parent || this.$root let name = parent.$options._componentTag while (parent && (!name || name !== componentName)) { parent = parent.$parent if (parent) { name = parent.$options._componentTag } } if (parent) { parent.$emit(eventName, params) } } } } ~~~ ~~~ import dispatch from '../../utils/dispatch' export default { name: 'menu-item', mixins: [dispatch], props: { route: { type: String, default: ' ' } }, methods: { handleRoute () { if (this.route) { this.dispatch('my-menu', 'closeByRoute') } } } } ~~~