vue饿了么项目-header组件开发

Posted 2020-09-19 乘客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue饿了么项目-header组件开发相关的知识，希望对你有一定的参考价值。

1.数据传递的理解

在App.vue中用到了header组件，首先注册组件

components: {
      \'v-header\': header
    }

然后才能引用

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

:seller="seller"的意思是将seller对象传递给v-header中的seller，而v-header中从哪里获得seller呢？

通过props从父组件中获得，且要指定数据类型

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将这两个数据进行相应计算

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;
      }
    }
  };

即可对应显示相应的星星：

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

以上是关于vue饿了么项目-header组件开发的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js2.5+cube-ui重构饿了么App*下载

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

vuejs仿美团，饿了么项目之——商品数量加减篇

vue新建项目之饿了么组件标准配置

Vue.js高仿饿了么外卖App 最火前端框架

vue饿了么项目实战笔记