【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)