本篇文章是對外賣App彈窗部分知識點的總結。

知識點一：如何從接口取出不同的圖片。

　　答：

　　　　1、header.vue:

　　　　代碼：

      <ul v-if="seller.supports" class="supports">
          <li class="support-item" v-for="(item,index) in seller.supports">
              <span class="icon" :class="classMap[seller.supports[index].type]"
 
></span>           <!---------------point1-2>
              <span class="text">{{seller.supports[index].description}}</span>
          </li>
      </ul>
<script>
　　export default{
        .......                                                /*-----------------其他的先省略*/
 

        created() {
            this.classMap = [‘decrease‘,‘discount‘,‘special‘,‘invoice‘,‘guarantee‘];           <!---------------point1-1>
        }
　　　　　.......                                              /*-----------------其他的先省略*/
    }
</script>

　　　json數據格式：

{
  "seller": {
    "name": "粥品香坊（回龍觀）",
    
 
"description": "蜂鳥專送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "bulletin": "粥品香坊其烹飪粥料的秘方源於中國千年古法，在融和現代制作工藝，由世界烹飪大師屈浩先生領銜研發。堅守純天然、0添加的良心品質深得消費者青睞，發展至今成為粥類的引領品牌。是2008年奧運會和2013年園博會指定餐飲服務商。",
    "supports": [
      {
        "type": 0,
        "description": "在線支付滿28減5"
      },
      {
        "type": 1,
        "description": "VC無限橙果汁全場8折"
      },
      {
        "type": 2,
        "description": "單人精彩套餐"
      },
      {
        "type": 3,
        "description": "該商家支持發票,請下單寫好發票擡頭"
      }      ....................................(其他省略)

　　css：

　　tip 1: 方法是，在li循環裏面更改相應的class名字。

　　tip 2: 在script裏面設置一個classMap，裏面的class名字分別對應著data.json裏面的圖片。排序相同。如：point1-1

tip 3: 給span標簽綁定class :class.來取出每個圖片的圖片的type。即，給每個span綁定循環時添加上的class名字。如：point1-2

　　tip 4:在css裏面，給每個class名字設置相應的圖片。

　　知識點二：如何讓背景模糊。

filter:blur(10px);  

　　知識點三：讓彈框顯示隱藏。

　　html:

代碼：

<transition name="fade">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <!----------------------point2-4>
            <div v-show="detailShow" class="detail">                     <!----------------------這裏的v-show有用>
                <div class="detail-wrapper clearfix">
                    <div class="detail-main">
                        <h1 class="name">{{seller.name}}</h1>
                        <div class="star-wrapper">
                            <star :size="48" :score = "seller.score"></star>
                        </div>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">優惠信息</div>
                            <div class="line"></div>
                        </div>
                        <ul v-if="seller.supports" class="supports">
                            <li class="support-item" v-for="(item,index) in seller.supports">
                                <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                                <span class="text">{{seller.supports[index].description}}</span>
                            </li>
                        </ul>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">商家公告</div>
                            <div class="line"></div>
                        </div>
                        <div class="bulletin">
                            <p class="content">{{seller.bulletin}}</p>
                        </div>
                    </div>
                </div>
                <div class="detail-close" @click="hideDetail">                          <!----------------------這裏的是給點擊事件click加一個要執行的函數>
                    <i class="icon-close">*</i>
                </div>
            </div>
        </transition>

　　<script>:

代碼：

data(){                                                    
  return {
     detailShow:false    <!--------------------point-2-1                                
  };
},
methods:{ 
   showDetail(){                                        
       this.detailShow = true;    
   },
   hideDetail(){
      this.detailShow = false;    <!--------------------point-2-2 
   }
},

　　css:如果覺得顯示隱藏太過生硬，要加漸變顯示隱藏，則還需要如下css：

.detail{
            position:fixed;
            top:0;
            left:0;
            z-index: 100;
            width:100%;
            height:100%;
            overflow:auto;
            backdrop-filter:blur(10px);
            opacity:1;
            background:rgba(7,17,27,0.8); /* //漸變結束後的最終效果 */                  point-2-3 
            &.fade-enter-active, &.fade-leave-active{/* //漸變的進入和退出都歷時0.5s */
                transition:all 0.5s;
            }
            &.fade-enter, &.fade-leave-to{/* //定義進入前和退出後樣式，即透明無色背景。 */
                opacity:0;
                background:rgba(7,17,27,0);
            }
}

　　step1:先給要顯示隱藏的標簽一個v-show="detailShow"。然後，通過控制點擊事件，來改變detailShow的true或者false值，來回切換。

　　step2:在data裏面先給detailshow一個默認值。默認不顯示，就是false。如point-2-1

　 step3:通過綁定click事件來改變detailShow的true或者false值。如point-2-2

　 step4:實現漸變顯示隱藏需兩個步驟：

　　　　point2-4 和上圖的point2-3

　　　　point2-4是把要隱藏的div用 transition 標簽包起來。point2-3是設置漸變前，時，後的效果。

vue2.0：（八）、外賣App彈窗部分知識點總結