正文

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

乘客  乘客  2022-09-01  187

关键词：

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组件开发2018-09-26

参考技术A1.header组件开发总结 1）使用classMap设置优惠活动项 2）设置了公共样式自定义属性：border-1px($color)解决移动端1px问题 bg-image($url)解决背景图片在不同设备像素比之下的大小2.header弹出层组件开发... 查看详情

vue饿了么项目实战笔记

1.页面骨架开发1.1组件拆分手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、抽出头部作为一个组件，在底部导航的时候可以相应的显示不同的标题技术点：使用slot进行组件间的通信；父组件给子组件传值（子组件里面通过props接收父组件传过来的数据）查看链接：https://blog.csdn.net/sinat_17775997/article/... 查看详情

vue饿了么项目-goods商品列表页开发

1.flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量。flex-basis项目的长度。合法值："au... 查看详情

vue2.0的通用组件

Element：一套通用组件库的开发之路Element是由饿了么UED设计、饿了么大前端开发的一套基于Vue2.0的桌面端组件库。今天我们要分享的就是开发Element的一些心得。官网：http://element.eleme.io/#/github：https://github.com/ElemeFE/element ... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、准备工作1.大前提：已安装好node、npm、vue、vue-cli、stylus（此项目使用stylus来编译）2.开发软件：GoogleChrome（建议安装插件vue-devtools，方便调试），webstorm/sublimeText/VSCode（推荐使用webstorm，sublime和VSCode需要安装相应的插件）3.... 查看详情

eleme饿了么vue项目随笔，随时更新，想到哪里写到哪里比较凌乱一直更新

组件设计原则：就近维护 mock数据模拟：/#/xx/api vue1.0json获取不到（请求出现sockjs-node/info文件，所以不能加地址栏不加#来获取模拟请求数据） vue2.0前端请求直接 /api 来获取数据组件... 查看详情

如何评价饿了么开源的vue组件库mintui

我们项目现在正在用vue，但是我们的需求更加的复杂。对于Mint，恕我直言，很多简单的css和html。基本那些调用我都会自己写，自己写一套也花不了多少时间。还有一个就是，这是一个mobile的产品。很多优化并没有做，比如类iscr... 查看详情

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

参考技术A首先，新增个商品数量的加减功能组件，就叫cartcontrol.vue吧。新增个底部购物车组件，叫shopcart.vue吧。在good.vue中引入并注册组件。cartcontrol.vue中，通过props来接收list对象因为我在json中没有设置数量这个key，所以需要... 查看详情

vue饿了么项目的相关笔记链接

http://www.mtons.com/content/1819.htmhttp://www.tuicool.com/articles/F7BnaiYhttps://segmentfault.com/a/1190000007784366http://www.tuicool.com/articles/7zUruij 查看详情

vue的饿了么写作感受

1.在重复使用的组件中，要把重复使用组件的需要在数据的请求的地方设置为在富组件中，通过props船只到子组件，这样在重复调用次组件的时候既可以很好的避免组件的值的冲突2.getData的使用，把所有的axios请求都在getData中使... 查看详情

仿饿了么项目-vue-cli开启项目

环境搭建安装nodeJs在用vue-cli开启项目之前，首先我们需要安装Node环境，安装Node很简单，只需要去官网下载http://nodejs.cn/download/，下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。检... 查看详情

用vue制作饿了么首页

...网页，实现原则是将他们分块，然后各个击破。很明显的饿了么首页分为三个部分（组件），上面的头部（商家信息），中间路由购物车每部分先占住自己位置，然后挨个将这三部分分别实现完整。我... 查看详情

按需引入饿了么ui组件

参考技术A第一步安装第二部在main.js中引入样式第三步安装第四步看情况，是否在全局引入（比如一些很多模块都要用到的Button,可在main.js中全局引入）有的组件在项目中只要用到一次，那只需在要用到此组件的模块中单独引入查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用：vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

zui和mint-ui，elementui哪个更适合用vue开发？

minit-ui是移动端是饿了么团队开发的，后者element-ui是PC端也是饿了么团队开发的，无论是移动端或者PC端结合Vue都比较适合开发，ZUI组件不是很强大，可以满足一般程序的需求。ZUI系统最显著的特性之一,通过构建完善的系统级防... 查看详情

vue2+cli3实战项目-饿了么

参考技术A项目地址：Vue2+Cli3实战项目-还原饿了么订餐app项目截图：我们使用npm安装一些包的时候可能会比较慢，这时候我们可以使用cnpm，cnpm是中国NPM镜像。cnpm是一个完整npmjs.org镜像，你可以用此代替官方版本(只读)，同步频... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

...scroll插件，进行左右滑动图片。效果预览：再说一篇，是饿了么的翻版。查看详情