【vue】餓了麼項目-header組件開發

時間 2019-11-12

標籤 vue 餓了項目 header 組件開發简体版

原文原文鏈接

1.數據傳遞的理解css

在App.vue中用到了header組件，首先註冊組件html

components: {
      'v-header': header
    }

而後才能引用vue

<v-header :seller="seller"></v-header>

:seller="seller"的意思是將seller對象傳遞給v-header中的seller，而v-header中從哪裏得到seller呢？css3

經過props從父組件中得到，且要指定數據類型web

export default {
    props: {
      seller: {
        type: Object
      }
    }
}

因此在父組件中須要將seller做爲數據導出數組

export default {
    data() {
      return {
        seller: {},
    }
     }
}

header組件引用star組件也是同樣的道理，再鞏固下吧瀏覽器

header.vue中
import star from '../star/star.vue';    //紅色的star對應的就是star.vue中exportdefault的object

components: {
      star
    }

引用：
<div class="star-wrapper">
            <star :size="48" :score="seller.score"></star>
 </div>

star.vue中就能夠取到48和seller.score數據了，並用computed將這兩個數據進行相應計算app

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);
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON);
        }
        if (hasDecimal) {
          result.push(CLS_HALF);
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF);
        }
        return result;
      }
    }
  };

便可對應顯示相應的星星：ide

<div class="star-item" :class="starType">
      <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" ></span>
    </div>

star組件（評星的星星，多處使用，寫成組件）佈局

<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" ></span>

:class="itemClass"//給每一個itemClass設置class(itemClass是經過itemClasses遍從來的)
而itemClasses()也放到conputed中計算

2.@import "star.styl";

3.vue中經過操做變量，不用寫DOM部分的代碼，省去了不少工做

data() {
      return {
        detailShow: false
      };
    },
    methods: {
      showDetail() {
        this.detailShow = true;//控制變量便可，自動更新
      },
      hideDetail() {
        this.detailShow = false;
      }
    },

4.經典CSS sticky footer佈局

4.1固定高度的解決方案

爲容器推算出其高度,咱們可使用一個容器將<header>和<main>元素包裹起來，這樣咱們只須要計算頁腳的高度

.detail-wrapper
      width 100%
      min-height 100%    定義基於包含它的塊級對象的百分比最小高度。
      .detail-main
        margin-top 64px
        padding-bottom 64px
    .detail-close
      position relative
      width 32px
      height 32px
      margin -64px auto 0 auto
      clear both
      font-size 32px

    <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">
      <div class="detail-wrapper clearFix">　　　　　//內容的包裝層
        <div class="detail-main">                   //關鍵padding-bottom 64px
          <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">//底層
        <i class="iconfont icon-cha"></i>
      </div>
    </div>

4.2Flexbox解決方案，Flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。

Flexbox是最完美的方案。咱們只須要幾行CSS代碼就能夠完美的實現，並且不須要一些奇怪的計算或添加額外的HTML元素。首先，咱們須要在<body>元素上設置display:flex。

flex屬性是flex-grow、flex-shrink和flex-basis三個屬性縮寫。任何元素設置了flex大於0，元素就會靈活的控制本身的尺寸，來適配容器的剩餘空間。例如，若是<main>設置了flex:2，<footer>設置了flex:1，那麼頁腳的高度是主內容高度的二分之一，一樣的，若是值設置的是4和2而不是2和1，他們效果是同樣的，由於他們的倍數比例值同樣

body { 
display: flex; 
flex-flow: column;
min-height: 100vh; 
} 
main { flex: 1; }

5.clearfix複習

在一個有float 屬性元素的外層增長一個擁有clearfix屬性的div包裹，能夠保證外部div的height，即清除"浮動元素脫離了文檔流，包圍圖片和文本的 div 不佔據空間"的問題。在標準瀏覽器下，.clearfix:after這個僞類會在應用到.clearfix的元素後面插入一個clear: both的塊級元素，從而達到清除浮動的做用。

after是個僞元素，意思就是在class爲clear的元素後面加入新內容好文推薦:http://blog.csdn.net/puncha/article/details/10174683

.clearFix
  display inline-block
  &:after
    display block
    content "."
    height 0
    line-height 0
    clear both
    visibility hidden

6.clear both

clear : none | left|right| both

none : 　容許兩邊均可以有浮動對象
both : 　不容許有浮動對象
left : 　不容許左邊有浮動對象
right : 　不容許右邊有浮動對象

用於使用了float css樣式後產生浮動，最經常使用是使用clear:both清除浮動。好比一個大對象內有2個小對象使用了css float樣式爲了不產生浮動，大對象背景或邊框不能正確顯示，這個時候咱們就須要clear:both清除浮動。

7.如何獲得itemClasses()

itemClasses() {
        let result = [];//它是一個數組
        let score = Math.floor(this.score * 2) / 2;   //獲取score並轉換，如4.5會轉換成4.5,而4.3轉換成4
        let hasDecimal = score % 1 !== 0;     //是否有小數
        let integer = Math.floor(score);
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON);   //滿星
        }
        if (hasDecimal) {
          result.push(CLS_HALF);    //半星
        }
        while (result.length < LENGTH) {   //空星
          result.push(CLS_OFF);
        }
        return result;
      }

8.自適應線條-採用flex佈局

　　　　　　<div class="title">
            <div class="line"></div>
            <div class="text">優惠信息</div>
            <div class="line"></div>
          </div>

    .title
          width 80%
          display flex //vue會依賴Postcss自動考慮兼容性問題
          margin 28px auto 0 auto
          .line
            flex: 1
            position relative
            top -6px
            border-bottom 1px solid rgba(255, 255, 255, 0.2)
          .text         <--文字根據內容自動撐開，不用flex-->
            padding 0px 12px
            font-size 16px
            font-weight 700px

9.遍歷

v-if 是「真正的」條件渲染，根據其後表達式的bool值進行判斷是否渲染該元素，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下， v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

v-if指令只渲染他身後表達式爲true的元素；在這裏引入v-show指令，由於兩者的區別是v-show指令會渲染他身後表達式爲false的元素，這樣的元素上會添加css代碼：style="display:none"; 將上面v-if的實例代碼改成v-show

            <ul v-if="seller.supports" class="supports">   //v-if條件渲染，傳進來true或false
            <li class="support-item" v-for="(item, index) in seller.supports">
              <span class="icon" :class="classMap[seller.supports[index].type]"></span>    //icon是自己的class
              <span class="text">{{seller.supports[index].description}}</span>
            </li>
          </ul>

10.vue中設置過渡、動畫，可使用現成的transition組件

一般採用給過渡命名的方式（這裏沒有選用v-方式），這樣若是我想應用到另外一個動畫時就不會有衝突。這是不難作到的，正如你所看到的，咱們只是簡單地給過渡組件添加了一個 name 屬性:name="fade" 。

    <transition name="fade">
    <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">
      ...
    </div>
    </transition>

既然有了鉤子，咱們就能夠利用它們建立過渡，咱們能夠在 CSS 中使用。

其中enter/leave 定義動畫開始第一幀的位置， enter-active/leave-active 定義動畫運行階段—— 你須要把動畫屬性放在這裏， enter-to/leave-to 指定元素在最後一幀上的位置。

    &.fade-enter-active
          animation: bounce-in .5s;
    &.fade-leave-active
      animation: bounce-out .5s;
    @keyframes bounce-in {
      0% {
        transform: scale(0);   <--縮放-->
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes bounce-out {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(0);
      }
    }

動畫和過渡的區別並不只僅是設置最終的狀態或者在開始和結束之間插入狀態，咱們將使用 CSS 中的 @keyframes 建立有趣可愛的效果。

@keyframes建立動畫的原理是，將一套 CSS 樣式逐漸變化爲另外一套樣式。在動畫過程當中，您可以屢次改變這套 CSS 樣式。

11.針對iPhone的模糊-webkit-backdrop-filter blur(10px)

12.文本一行顯示，顯示不完出現省略號，隱藏滾動條

<div class="bulletin-wrapper" @click="showDetails()">
    <span class="bulletin-title"></span>
    <span class="bulletin-text">{{seller.bulletin}}</span>
    <i class="icon-keyboard_arrow_right"></i>
  </div>

  .bulletin-wrapper
    position relative
    height 28px
    line-height 28px
    padding 0 22px 0 12px
    white-space nowrap  //規定段落中的文本不進行換行
    overflow hidden
    text-overflow ellipsis   //text-overflow 屬性規定當文本溢出包含元素時發生的事情。  ellipsis 顯示省略符號來表明被修剪的文本。
    background rgba(7,17,27,0.2)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。