【餓了麼】—— Vue2.0高仿餓了麼核心模塊&移動端Web App項目爬坑（二）

時間  2019-11-19
標籤 餓了麼 vue2.0 vue 高仿 餓了 核心 模塊 移動 web app 項目 欄目 無線 简体版
原文   原文鏈接

 前言：上一篇項目總結介紹了頁面骨架的開發、header組件的開發，這一篇主要梳理：商品組件開發、商品詳情頁實現。項目github地址：https://github.com/66Web/ljq_eleme，歡迎Star。javascript

goods
1、商品組件開發
  • App.vue主組件傳seller對象給每一個路由：
<router-view :seller="seller"></router-view>

      兩欄佈局-flex佈局手機屏幕自適應css

  • 設計：無高度滾動條，高度超過視口高度就會隱藏
<div class="goods">
     <div class="menu-wrapper"></div>
     <div class="foods-wrapper"></div>
</div>
.goods
     display: flex
     position: absolute
     top: 174px
     bottom: 46px
     width: 100%
     overflow: hidden
     .menu-wrapper
            flex: 0 0 80px
            width: 80px
            background: #f3f5f7
            .foods-wrapper
                    flex: 1

      左側佈局-菜單列表html

  • 需求：文字標題可能單行，也可能多行，但都要在列表項中垂直居中
  • 小技巧：使用列表項display:table，文字標題disable:table-cell
.menu-item
    display: table
    height: 54px
    width: 56px
    line-height: 14px
    .text
    display: table-cell
    width: 56px
    vertical-align: middle
    font-size: 12px
  • 關於box-sizing:border-box; 規定兩個並排的帶邊框的框

      右側佈局-食品列表vue

  • 列表嵌套：第一層遍歷商品項item in goods, 第二層遍歷單個商品的信息項food in item.foods

      列表滾動-better-scroll 第三方JS庫java

  1. goods.vue 引入： 
    import BScroll from 'better-scroll';
  2. ref 屬性獲取dom元素：駝峯命名法  
    <div class="menu-wrapper" ref="menuWrapper">
<div class="foods-wrapper" ref="foodsWrapper">

  3. better-scroll初始化：git

    methods: { _initScroll(){ this.meunScroll=new BScroll(this.$refs.menuWrapper,{}); this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{}); } }

  4. 成功回調函數中調用_initScroll方法：github

    this.$nextTick(()=>{ this._initScroll(); })

  • this.$nextTick()這個方法做用是當數據被修改後使用這個方法會回調獲取異步更新後的dom再render出來 web

  • 若是不在下面的this.$nextTick()方法裏回調這個方法，數據改變後再來計算滾動軸就會出錯npm

      左右聯動數組

  • 需求：滾動右側，左側跟着變化；點擊左側，右側滾動到相應位置
  • 原理：依賴右側滾動列表實時變化的Y值(縱座標)，移動到哪一個區間，左側列表就要顯示哪一個區間
  • 【滾動右側時左側相應滾動】思路&實現：
  1. 在data中定義數組用來存儲不一樣區間的高度 
    data () { return { goods:[], listHeight: [] } }

  2. 爲了獲取高度，給food-list定義一個class--food-list-hook，不用來編寫css，專門用來獲取DOM元素，沒有實際的效果，只是用來被js選擇的

    <li v-for="item in goods" :key="item.id" class="food-list food-list-hook">

  3. 定義foodList拿到每一個li，每一個li是包括包括標題在內的每一類food的高度，不是單獨的一種good，將_calculateHeight放在nextTick中初始化_initScroll的後面，保證其能正確計算到高度

    _calculateHeight() { //food-list-hook類的添加知識爲了能拿到food列表,例如，拿到的是多個相似整個粥品的區塊
    let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook'); let height = 0; this.listHeight.push(height); //listHeight是一個遞增的區間數組，是每一個專區高度的累加
    for (let i = 0; i < foodList.length; i++) { let item = foodList[i]; height += item.clientHeight; this.listHeight.push(height); } }

  4. 在data中定義一個scrollY對象，用來跟蹤滾動的高度 scrollY：0；在初始化betterScroll時，爲右側添加probeType--能夠檢測到右側實時滾動的位置，監聽scroll，將其實時滾動的位置暴露出來

    data () { return { goods:[], listHeight: [], scrollY: 0 } }
    _initScroll() { this.meunScroll=new BScroll(this.$refs.menuWrapper,{ click: true //使better-scroll可點擊，默認派發一個點擊事件
 }); this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{ click: true, probeType: 3 //BScroll滾動時，能實時告訴咱們滾動的位置，相似探針的效果
 }); //foodsScroll監聽事件,在scroll滾動時能見位置實時暴露出來
          this.foodsScroll.on('scroll', (pos) => { this.scrollY = Math.abs(Math.round(pos.y));//自己是個負值，取正值
 }) }

  5. 拿到滾動的高度和內容區的固定高度以後， 查看scrollY落在哪一個區間，並返回那個區間的索引（！height2是測試最後一個區間的）其中，>= 向下的是一個閉區間，這樣第一個就會高亮了

    computed: { currentIndex() { //currentIndex對應菜單欄的下標
    for (let i = 0; i < this.listHeight.length; i++) { //不要忘了加this引用
      let height1 = this.listHeight[i]; let height2 = this.listHeight[i + 1]; //得到了一個區間的上下範圍，判斷scrollY落到這個區間，!height2是判斷最後一個區間
      //避免i溢出，>= 向下的是一個閉區間，這樣第一個就會高亮了
      if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) { return i; //映射到第5行menu的變化
 } } return 0; }

  6. 拿到index以後，回到左側的menu區，當咱們遍歷menu的時候，若是$index等於咱們計算獲得的currentIndex時，就爲當前的li添加一個current樣式

    <!-- 若是index等於currentIndex,就爲這個li添加一個current類，改變左側導航欄的背景顏色-->
<li v-for="(item,index) in goods" :key="item.id" 
     class    ="menu-item" :class="{'current': currentIndex === index}" @click = "selectMenu($index, $event)">
    &.current
     position: relative
     z-index: 10
     margin-top: -1px
     background: #ffffff
     font-weight: 700
     .text
          border-none()
  • 【點擊左側右側滾動】思路&實現：
  1. 在左側菜單欄添加點擊事件selectMenu， @click = "selectMenu($index, $event)"，將index傳進去，就能夠知道點選的是哪一個區域，而後利用原生DOM操做將高度滾動到相應的位置
  2. 點擊左側菜單欄的時候沒有反應，由於BScroll默認阻止點擊事件，因此在 _initScroll()中獲取DOM對象時添加click: true,並解決PC端雙點擊問題，event是點擊時的event 
    selectMenu (index, event) { if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點擊
       return; } let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook'); let ref = foodList[index]; //取到index對應的DOM
    this.foodsScroll.scrollToElement(ref, 300);//滾動到DOM所在位置
    //console.log(index);
}

      購物車組件

  • 定位在視口底部： fixed佈局——右側寬度固定，左側自適應 
    <div class="content">
      <div class="content-left"></div>
      <div class="content-right"></div>
</div>
    .content display: flex background: #141d27 .content-left flex: 1 /*讓全部彈性盒模型對象的子元素都有相同的長度，忽略它們內部的內容*/ .content-right flex: 0 0 105px /*flex三個參數依次表示：等分、內容縮放狀況、站位空間*/
          width: 105p

  • display:inline-block有一個默認間隙的問題 —— 解決：父級font-size:0

  • 三種狀態轉換： 數據驅動Dom變化

      cartcontrol組件

  • 在設計尺寸基礎上增長點擊區域： padding
  • 檢測數據的變化：Vue.set
  1. 引入： 
    Vue import Vue from 'vue';

  2. 使用Vue.set接口：

    Vue.set(this.food, 'count', 1);
  • 按鈕平移+漸隱漸現+滾動動畫： 
    <transition name="move">...</transition>
    .cart-decrease
     display: inline-block
     padding: 6px
     transform: translate3d(0, 0, 0)
     transform: rotate(0)
     &.move-enter-active, &.move-leave-active
          transition: all 0.4s linear
          transform: translate3d(0, 0, 0)
          transform: rotate(0)
     &.move-enter, &.move-leave-active
          opacity: 0
          transform: translate3d(24px, 0, 0)/*開啓硬件加速，讓動畫更流暢*/
          transform: rotate(180deg)
     .inner
          display: inline-block
          line-height: 24px
          font-size: 24px
          color: rgb(0, 160, 220)
    View Code

      購物車拋物線小球動畫

  • data數據中定義一個數組，存放5個小球，這5個小球能夠知足的動畫的運行 
     data() { return { balls: [{ //每個成員都用來維護當前小球的狀態,初始狀態都是隱藏的
                    show: false }, { show: false }, { show: false }, { show: false }, { show: false }], //添加一個變量，用來存貯已經下落的小球
 dropBalls: [], fold: true //購物車詳情列表默認摺疊
 }; }
  • 佈局 
    <div class="ball-container">
    <div v-for="(ball, index) in balls" :key="index">
        <div class="ball-container">
             <div v-for="(ball, index) in balls" :key="index">
                   <transition name="drop" >
                          <div v-show="ball.show" class="ball">
                                 <div class="inner inner-hook"></div>
                           </div>
                   </transition>
             </div> 
         </div>
    </div> 
</div>
  • :key報錯問題：key值是必須惟一的，若是重複就會報錯。能夠把key值改成index，就能夠避免這個狀況 
    <div v-for="(ball, index) in balls" :key="index" v-show="ball.show"></div>
  • 動畫需求：小球有拋物線軌跡運動的過渡，並且發射出去就不會再回來了
  1. 動畫屬性只用enter,不用leave,而且小球起始點須要動態計算 
    .ball-container
    position: fixed
    left: 32px
    bottom: 22px
    z-index: 200
    .inner
        width: 15px
        height: 15px
        border-radius: 50%
        background-color: #00A0DC
        transition: all 1s linear
        &.drop-enter-active
              transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41)

  2. CSS3 三次貝塞爾曲線(cubic-bezier)：

       貝塞爾曲線經過控制曲線上的四個點（起始點、終止點以及兩個相互分離的中間點）來創造、編輯圖形，
      繪製出一條光滑曲線並以曲線的狀態來反映動畫過程當中速度的變化。

      在線調試地址： http://cubic-bezier.com/#.17,.67,.83,.67  
  3. 動畫分爲兩層，外層控制小球y軸方向和運動的軌道，內層控制x軸方向的運動

  4. 使用js動畫鉤子，vue在實現動畫的時候提供了幾個javascript鉤子，可配合css動畫一塊兒使用，也可單獨使用

     methods: {
        dropMove(el) {
        //    console.log(el)
           for(let i=0; i<this.balls.length; i++) {
               let ball = this.balls[i];
               if(!ball.show) {
                  ball.show = true;
                  ball.el = el;
                  this.dropBalls.push(ball);
                  return;
               }
           }
        },
        beforeEnter(el, done) {
            let count = this.balls.length;
            while (count--) {
                let ball = this.balls[count];
                if(ball.show) {                    
                    let rect = ball.el.getBoundingClientRect();//返回元素的大小及其相對於視口的位置
                    let x = rect.left - 32  //ball-container left:32
                    let y = -(window.innerHeight - rect.top -22);
                    el.style.display = '';
                    el.style.transform = `translate3d(0,${y}px,0)`;//外層元素縱向移動
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                    let inner = el.getElementsByClassName('inner-hook')[0];//內層元素橫向移動
                    inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
                    inner.style.transform = `translate3d(${x}px, 0, 0)`;
                    // console.log(el);
                }
            }
        },
        dropEnter(el, done) {
            /*手動取到offsetHeight, 觸發瀏覽器重繪*/
            let rf = el.offsetHeight;
            this.$nextTick(() => {  //樣式重置回來
                el.style.webkitTransform = 'translate3d(0, 0, 0)'// 設置小球掉落後最終的位置
                el.style.transform = 'translate3d(0, 0, 0)'
                let inner = el.getElementsByClassName('inner-hook')[0]
                inner.style.webkitTransform = 'translate3d(0, 0, 0)'
                inner.style.transform = 'translate3d(0, 0, 0)'
                el.addEventListener('transitionend', done) // Vue爲了知道過渡的完成，必須設置相應的事件監聽器。它能夠是transitionend或 animationend
            })
            // console.log(el);
        },
        afterEnter(el) {
            let ball = this.dropBalls.shift();
            if(ball) {
                ball.show = false;
                el.style.display = 'none';
            } 
            // console.log(el);
        }
    View Code

    每一個鉤子都有一個參數el: 當前執行transition動畫的DOM對象

    當咱們點擊觸發一個過渡的時候，咱們在beforeEnter裏先拿到當前元素的偏移位置，
    而後給過渡元素設置其起始位置，在enter裏須要從新觸發下瀏覽器的重繪，而後在下一幀從新設置元素的結束位置，
    這時就會產生過渡效果，在過渡完成後咱們將當前元素隱藏便可。

    關於tansition實踐詳解博客：【重點突破】—— Vue2.0 transition 動畫Demo實踐填坑

 

2、food商品詳情頁實現

 

food

 

       商品詳情頁實現-food.vue組件

  1. 設計時：父組件能夠調用子組件方法，子組件不能調用父組件方法
  2. 常見命名習慣：若是是父組件調用的方法，命名如show()；若是是組件私有方法，命名會在前面加_, 如_show()
  3. 詳情頁從右往左飛入動畫： 
    .food
    position: fixed
    left: 0
    top: 0
    bottom: 48px
    z-index: 30
    width: 100%
    background: #ffffff
    transform: translate3d(0, 0, 0)
    &.move-enter-active, &.move-leave-active
          transition: all 0.2s linear
          transform: translate3d(0, 0, 0)
    &.move-enter, &.move-leave-active
          opacity: 0
          transform: translate3d(100%, 0, 0)
  • 坑：頭圖顯示是異步加載的，不能寫死寬高，由於視口是自適應的，但不設置高度，頁面內容會有圖片撐開高度的抖動過程。
  • 解決：一開始給<img>限制寬高，設爲容器的100% 
    .image-header
    position: relative
    width: 100%
    height: 0
    padding-top: 100% // 百分比是相對於盒子的寬度來計算的，看起來就像是一個正方形
    img 
       position: absolute
       top: 0
       left: 0
       width: 100%
       height: 100%
  • 坑：「加入購物車」一點擊就會display:none,這樣執行better-scroll動畫的時候，找ball.el.getBoundingClientRect()會找不到，小球就不能找到正確的初始位置。
  • 解決：給消失的過程加一個opcity的transition動畫，時長0.2s，這樣就不會馬上消失 
    &.buy-enter-active, &.buy-leave-active 
     transition: all 0.2s
     opacity: 1 
&.buy-enter, &.buy-leave-active 
     opacity: 0
  • 坑：菜單列表的「+」「-」按鈕，每次點擊都會觸發詳情頁顯示，這是由於點擊事件被穿透了。
  • 解決：給cart-control.vue組件中的「+」「-」按鈕的點擊事件，都添加阻止事件冒泡 
    @click.stop.prevent="decreaseCart($event)"
@click.stop.prevent="addCart($event)"
  • 同理，詳情頁的「加入購物車」按鈕，最好也加上阻止事件冒泡 
    @click.stop.prevent="addFirst($event)"

       split組件實現 

  • 一個很簡單的樣式模板組件，分隔區 
    <template>
  <div class="split"></div>
</template>
 
<script type="text/ecmascript-6">
  export default {};
</script>
 
<style lang="stylus" rel="stylesheet/stylus">
    .split
        width 100%
        height 16px
        border-top: 1px solid rgba(1, 17, 27, 0.1);
        border-bottom: 1px solid rgba(1, 17, 27, 0.1);
        background: #f3f5f7
</style>
    View Code

       商品評價 - ratingselect 組件

  1. 設置ratingselect組件中須要的props接收的數據，數據應從food.vue組件傳入<ratingselect></ratingselect>,並由ratingselect.vue的props接收 
    <v-ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings" @increment="incrementTotal">
</v-ratingselect>
  2. props的值以下：首先是有一個變量【only-content】是否顯示只看內容，還有一個【select-type】控制選擇的類型，還有要維護一個【ratings】全部評價的數據，由於這裏有一個評價數量；還要去維護一個【desc】描述，是（所有，推薦，吐槽）仍是（所有，滿意，不滿意），按照以上標準設置外部組件傳入ratingselect的props值 
    const POSITIVE = 0; const NEGATIVE = 1; const ALL = 2; export default { //須要一些評價數據才能完成評價組件
 props: { ratings: { type: Array, default() { return []; } }, selectType: { //所有，滿意，不滿意
 type: Number, default: ALL //默認狀況時ALL,值等於2
 }, onlyContent: { //只看有內容的評價仍是全部的評價
 type: Boolean, default: false //設置爲能夠看到全部的評價
 }, desc: { //描述
 type: Object, default() { //默認desc是這三種，在商品詳情頁的時候傳入推薦或者吐槽
                    return { all: '所有', positive: '滿意', negative: '不滿意' }; } } },

  3. 在food.vue（商品詳情頁）中引入ratingSelect組件的時候，將desc改爲"所有"，"推薦"和"吐槽"，接下來寫DOM佈局:

    <template>
  <div class="ratingselect">
        <div class="rating-type" border-1px>
            <span>{{desc.all}}</span>
            <span>{{desc.positive}}</span>
            <span>{{desc.negative}}</span>
        </div>
        <div @click="toggleContent($event)"  class="switch" :class="{'on':oContent}">
            <span class="icon-check_circle"></span>
            <span class="text">只看有內容的評價</span>
        </div>
  </div>
</template>
    View Code

  4. 在food.vue（商品詳情頁）的data中掛載對上述對象的跟蹤，並對其進行初始化

    const POSITIVE = 0; const NEGATIVE = 1; const ALL = 2; data () { return { showFlag: false, selectType: ALL, onlyContent: false, //先設置組件一開始顯示有內容的評價
            desc: { //desc作了改變
                all: '所有', positive: '推薦', negative: '吐槽' } }; }

  5. 需求：在切換不一樣商品的時候能有相同的初始化狀態 —— 定義show()做爲goods組件中調用food組件的函數，即點開商品詳情的顯示函數，將初始化設置傳入到show()中

    show() { //能夠被父組件調用到，方法前加下劃線通常是私有方法
       this.showFlag = true; //初始化部分，ratingselect組件是被被不一樣的商品使用的，因此咱們但願在點開不一樣的商品時，能有同樣的初始化狀態
       this.selectType = ALL; this.onlyContent = false; //展現界面時用到BScroll
       this.$nextTick(() => { if (!this.scroll) { this.scroll = new BScroll(this.$refs.food, { click: true // 能夠被點擊
 }); } else { this.scroll.refresh(); } }); }
  • 兩種樣式：公用樣式、特殊樣式 
    .ratingselect
    .rating-type
        padding 18px 0
        margin 0 18px //保證橫線的長度
        border-1px(rgba(7,17,27,0.1))
        font-size 0
        .block //沒有寫文字的時候是沒有被撐開的
            display inline-block
            padding 8px 12px
            margin-right 8px
            border-radius 1px
            line-height 16px
            font-size 12px
            color rgb(77,85,93)
            &.active  // block的active要設置一下
                 color #ffffff
            .count
                margin-left 2px
                font-size 8px
            &.positive
                background rgba(0,160,220,.2)
                &.active
                    background rgb(0,160,220)
            &.negative
                background  rgba(77,85,93,0.2)
                &.active
                    background  rgb(77,85,93)
    .switch
        padding 12px 18px
        line-height 24px
        border-bottom 1px solid rgba(7,17,27,0.1)
        color rgb(147,153,159)
        font-size 0
        &.on
            .icon-check_circle
                color #00c850
        .icon-check_circle
            display inline-block
            vertical-align top 
            margin-right 4px
            font-size 24px
        .text
            display inline-block
            vertical-align top
            font-size 12px
    View Code
  1. 被選中  
    :class="{'active':selectType===2}"
  2. 居中對齊： 
    display: inline-block
vertical-align: top

  3. 由於rating下有一條border，因此在rating下不能夠設置四周的padding值，若是設置了border就撐不開整個屏幕了

    .rating //由於要在rating title下方畫一條橫線，因此不能用padding-left，改用title的margin代替
     padding-top: 18px
     .title
         line-height 14px
         margin-left 18px
         font-size 14px
         color rgb(7,17,27)
  • 坑：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: 「gems」 (found in component: )
  • 這是由於在vue2.0中，直接修改prop是被視做反模式的。因爲在新的渲染機制中，每當父組件從新渲染時，子組件都會被覆蓋，因此應該把props看作是不可變對象。
  • 解決：在props中接收到父組件傳過來的selectType和onlyContent的值以後，在data中從新定義變量接收，以便觀測值的變化（由於子組件將改變data中的值，子組件要將這些變化的值傳遞個父組件） 
    data() { return { sType : this.selectType, oContent : this.onlyContent } }
  • 以後，sType就替代了this.selectType，因此DOM就變成了 
    <template>
  <div class="ratingselect">
        <div class="rating-type" border-1px>
            <span class="block positive" @click="select(2,$event)" :class="{'active':sType === 2}">{{desc.all}}<span class="count">{{ratings.length}}</span> </span>
            <span class="block positive" @click="select(0,$event)" :class="{'active':sType === 0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
            <span class="block negative" @click="select(1,$event)" :class="{'active':sType === 1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
        </div>
        <div @click="toggleContent($event)"  class="switch" :class="{'on':oContent}">
            <span class="icon-check_circle"></span>
            <span class="text">只看有內容的評價</span>
        </div>
  </div>
</template>
    View Code

  • 編寫rating-type和swicth切換有內容評價部分的綁定函數：select(type, event) —— 在點擊的時候就把類型123傳進去，傳入event是由於外層是一個betterScroll，要進行點擊事件的判斷，將sType的值更新以後經過emit將函數派發出去；

    methods: { select (type, event) { //點擊的時候外層是有一個BScroll的，因此要傳遞event阻止默認點擊
          if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點擊
                return; } //將this.selectType設置成傳入的參數,而不是food傳過來的初始化的值，以後樣式就能夠隨着點擊改變了
          this.sType = type; /派發事件通知父組件food.vue selectType的改變,將type值傳出去
              console.log('ratingselect.vue ' + type);
          this.$emit('increment', 'selectType', this.sType); }, toggleContent (event) { if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點擊
                return; } this.oContent = !this.oContent; console.log('ratingselect.vue ' + this.oContent); 
          this.$emit('increment', 'onlyContent', this    .oContent); } }

  • 統計不一樣評價的數量（過濾評價類型），添加計算屬性 -- positives和negitives數組，長度即爲評價數量

    <div class="rating-type" border-1px>
   <span class="block positive" @click="select(2,$event)" :class="{'active':sType === 2}">{{desc.all}}<span class="count">{{ratings.length}}</span> </span>
   <span class="block positive" @click="select(0,$event)" :class="{'active':sType === 0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
   <span class="block negative" @click="select(1,$event)" :class="{'active':sType === 1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
 </div>
     computed: { positives() { //對應全部正向評價的數組
            return this.ratings.filter((rating) => { return rating.rateType === POSITIVE; }); }, negatives() { return this.ratings.filter((rating) => { return rating.rateType === NEGATIVE; }); } }

       評價列表

  • 切換子組件的按鈕以後，父組件就能夠根據子組件的選擇進行內容的切換
  1. 爲列表的顯示添加選擇 
     <li v-show="needShow(rating.rateType, rating.text)" //v-show特殊用法：綁定函數返回值
     v-for    ="rating in food.ratings" 
     :key    ="rating.id" 
     class    ="rating-item border-1px">
  2. 定義needshow()  
    needShow(type, text) { // console.log('this.selectType: ' + this.selectType + ' type: ' + type + ' out ' + text);
     if (this.onlyContent && !text) { return false; } if (this.selectType === ALL) { return true; } else { //console.log('this.selectType: ' + this.selectType + 'type: ' + type + ' in ' + text);
            return type === this.selectType; } }
  3. ratingselect.vue  中進行rating.rateType的切換，變量更改後的結果要傳遞到父組件中，這時用到了incrementTotal()  
    incrementTotal(type, data) {  // 對子組件更改的數值進行監聽
       this[type] = data; this.$nextTick(() => { // 當咱們改變數據的時候，DOM的更新是異步的
                this.scroll.refresh(); }); }
  4. 觸發事件increment:  在子組件ratingselect中使用select和toggleContent中進行emit派發
  • 時間的顯示添加過濾器，將時間戳轉化爲時間字符串 
    <div class="time">{{rating.rateTime | formatDate}}</div> import {formatDate} from 'common/js/date.js';
    export function formatDate(date, fmt) {
   if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
   }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
}
 
function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}
    View Code 
    filters: { formatDate(time) { let date = new Date(time); return formatDate(date, 'yyyy-MM-dd hh:mm'); } }

注：項目來自慕課網

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程