饿了么 VUE组件开发2018-09-26

1 header组件开发总结

  1）使用classMap设置优惠活动项

  2）设置了公共样式自定义属性：border-1px($color)解决移动端1px问题

       bg-image($url) 解决背景在不同设备像素比之下的大小

2headerd出层组件开发

d出层的内容部分采用 css sticky footer布局 ：

。最外层容器负责该d出层的整体位置 背景以及控制浮层的展示和隐藏

。外层两个容器一个内容层（清除浮动），一个定在底部的底部层

。内容层里面再建立一个内容层装主要内容

布局 如下：

关于样式 ：

。外层容器 detail-wrapper设置min-height:100%(最小高度有视口那么高)

。detail-close为底部固定层，相对定位，设置-margin值来使它保留在底部

。注意：内容层detail-main设置margin-bottom来为使其不会遮盖住底部固定层

样式如下：

。加入文字进行测试发现文字短的时候close在底部，文字长的时候，close在内容层最底部

控制浮层展示和隐藏 ：

。dom上使用v-show="变量名"进行控制

。实例中设置data函数返回变量名的值为false(默认不展示)

。需要控制点击展示的dom上使用@click=“方法名”

。在实例methods中定义方法使变量名的值为相反

2 星星组件开发

公共部分抽离成公共组件

。建立组件star接受两个参数星星数和大小，数据类型为Number

。使用计算属性来改变star 类名达到改变大小的目的

。

实现原理：建立一个数组result,声明变量 hasDecimal代表有小数点的情况，integer代表整数的部分。遍历整数部分，将类名on放入数组result中，如果有半星的情况就就放置类名off,剩下的放off。由于半星只会放置一个，所以不需循环。

。在header组件中引用star组件，使用star标签测试成功就可以了

布局方面：

效果：页面左右两边没有滚动条，页面长度超过视口，页面可以上下滑动

解决：定义视口的高度。将视口盒子绝对定位

首先   将商品goods数据mock到页面中，同header中seller数据请求

实现垂直居中使用table

实现页面垂直滚动：

。实现视口里的内容能够滚动，使用better-scroll库 >

监听窗口变化：windowonresize

JS的一些方法：

网页可见区域宽：documentbodyclientWidth

网页可见区域高：documentbodyclientHeight

网页可见区域宽：documentbodyoffsetWidth (包括边线的宽)

网页可见区域高：documentbodyoffsetHeight (包括边线的宽)

data () {

return {

screenWidth: documentbodyclientWidth

}

},

mounted () {

const that = this

windowonresize = () => {

return (() => {

windowscreenWidth = documentbodyclientWidth

thatscreenWidth = windowscreenWidth

})()

}

}，

watch:{

screenWidth(val){

// 为了避免频繁触发resize函数导致页面卡顿，使用定时器

if(!thistimer){

// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth

thisscreenWidth = val

thistimer = true

let that = this

setTimeout(function(){

// 打印screenWidth变化的值

consolelog(thatscreenWidth)

thattimer = false

},400)

}

}

}

在template中定义ref，与setup中命名要一样

在setup中要定义ref与template中名字一样，在onMounted中去 *** 作元素，因为setup是相当于create，那是页面还没渲染，所以要在onmounted中去 *** 作。要记得将元素return 不然没效果

以上就是关于饿了么 VUE组件开发2018-09-26全部的内容，包括:饿了么 VUE组件开发2018-09-26、vue中wangeditor如何自适应高度、vue监听页面宽度高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！