前言
本节分为四大块：
1. 商品详情页 food 组件（布局样式、第三方插件库better-scroll 的应用）
2. split 组件
3. ratingselect 组件
4. 评价列表
商品详情页 food 组件
1. CSS 设置
1 <style lang="stylus" rel="stylesheet/stylus"> 2 @import "../../common/stylus/mixin.styl" 3 4 .food 5 position fixed 6 left 0 7 top 0 8 bottom 48px 9 z-index 30 10 width 100% 11 background #fff 12 transform translate3d(0, 0, 0) 13 &.move-enter-active, &.move-leave-active 14 transition all 0.2s linear 15 &.move-enter, &.move-leave-active 16 transform translate3d(100%, 0, 0) 17 .image-header 18 position relative 19 width 100% 20 height 0 21 padding-top 100% 22 img 23 position absolute 24 left 0 25 top 0 26 width 100% 27 height 100% 28 .back 29 position absolute 30 left 0 31 top 10px 32 .icon-arrow_lift 33 display block 34 /*点击区域变大*/ 35 padding 10px 36 font-size 20px 37 color #fff 38 .content 39 position relative 40 padding 18px 41 .title 42 margin-bottom 8px 43 line-height 14px 44 font-size 14px 45 font-weight 700 46 color rgb(7, 17, 27) 47 .detail 48 margin-bottom 18px 49 height 10px 50 line-height 10px 51 font-size 0 52 .sell-count, .rating 53 font-size 10px 54 color rgb(147, 153, 159) 55 .sell-count 56 margin-right 12px 57 .price 58 font-weight 700 59 line-height 24px 60 .now 61 margin-right 8px 62 font-size 14px 63 color rgb(240, 20, 20) 64 .old 65 text-decoration line-through 66 font-size 10px 67 color rgb(147, 153, 159) 68 .cartcontrol-wrapper 69 position absolute 70 right 12px 71 bottom 12px 72 .buy 73 position absolute 74 right 18px 75 bottom 18px 76 /*因为要盖住cartcontrol组件*/ 77 z-index 10 78 height 24px 79 line-height 24px 80 padding 0 12px 81 box-sizing border-box 82 border-radius 12px 83 font-size 10px 84 color #fff 85 background-color rgb(0, 160, 220) 86 opacity 1 87 &.fade-enter-active, &.fade-leave-active 88 transition all 0.2s linear 89 &.fade-enter, &.fade-leave-active 90 opacity 0 91 z-index -1 92 .info 93 padding: 18px 94 .title 95 line-height: 14px 96 margin-bottom: 6px 97 font-size: 14px 98 color: rgb(7, 17, 27) 99 .text 100 line-height: 24px 101 padding: 0 8px 102 font-size: 12px 103 color: rgb(77, 85, 93) 104 .rating 105 padding-top: 18px 106 .title 107 line-height: 14px 108 margin-left: 18px 109 font-size: 14px 110 color: rgb(7, 17, 27) 111 .rating-wrapper 112 padding 0 18px 113 .rating-item 114 position relative 115 padding 16px 0 116 border-1px(rgba(7, 17, 27, 0.1)) 117 .user 118 position absolute 119 top 16px 120 right 0 121 line-height 12px 122 font-size 0 123 .username 124 margin-right 6px 125 display inline-block 126 vertical-align top 127 font-size 10px 128 color rgb(147, 153, 159) 129 .avatar 130 border-radius 50% 131 .time 132 margin-bottom 6px 133 line-height 12px 134 font-size 10px 135 color rgb(147, 153, 159) 136 .text 137 line-height 16px 138 font-size 12px 139 color rgb(7, 17, 27) 140 .icon-thumb_up, .icon-thumb_down 141 margin-right 4px 142 line-height 16px 143 font-size 12px 144 .icon-thumb_up 145 color rgb(0, 160, 220) 146 .icon-thumb_down 147 color rgb(147, 153, 159) 148 .no-rating 149 padding 16px 0 150 font-size 12px 151 color rgb(147, 153, 159) 152 </style>
CSS 设置
1）相对于屏幕进行定位，使用 fixed 布局。
2）底部有购物车，所以设置 bottom 为 48px。
3）z-index 的值应该小于购物车详情层的 z-index，因为购物车详情层弹出应该要遮盖住商品详情层。
4）加上 transition 动画
5）图片高度应该和屏幕宽度一样，是动态变化的。图片加载是异步过程，如果不设置图片高度，等到图片加载完毕，页面高度会突然被撑开。如何解决？先把宽高设好，设置 height 0，padding-top 100%。这是 W3C 的一个特定写法，当 padding 的 top 或 bottom 设置为100% 时，会相对于盒子的 width 100%，这就相当于有一个宽高相等的盒子。（同理，当 padding 的 left 或 right 设置为100% 时，会相对于盒子的 height 100%）
2. 数据获取
1 food.vue文件
2 props: {
3 food: {
4 type: Object
5 }
6 },
7
8
9 goods.vue文件
10 <food :food="selectedFood" ref="food"></food>
11
12 import food from ‘../../components/food/food‘;
13 data() {
14 return {
15 selectedFood: {}
16 };
17 },
18 methods: {
19 selectFood(food, event) {
20 if (!event._constructed) {
21 // eslint-disable-next-line
22 return;
23 }
24 this.selectedFood = food;
25 },
26 }
数据获取
1）商品详情页关联的是商品本身，也就是食品分类下的每个商品。使用 props 接收 food 对象。
2）在 goods 组件中引用 food 组件，并且传入food，设定变量为 selectedFood（即选中的 food），在 data 中定义该变量，为一个空对象。
3）selectedFood 是选中的 food，那么什么时候选中？当点击 food 时。如何实现：在 li 中添加点击事件 selectFood(food,$event)，传入参数 food，因为这里是 foodWrapper，所以点击的时候也要拿到 event，接着在在 methods 中实现该方法。先 return 掉浏览器默认的点击事件，将参数 food 传递给变量 selectedFood。如何检验：在浏览器调试窗口中找到 food 层，取消display属性，看看布局有没有错。
3. show 方法的实现：点击商品时，商品详情层展开
1 food.vue文件
2 data() {
3 return {
4 showFlag: false
5 }
6 };
7 },
8 methods: {
9 show() {
10 this.showFlag = true;
11 },
12 }
13
14 goods.vue文件
15 methods: {
16 selectFood(food, event) {
17 this.$refs.food.show();
18 }
19 }
show 方法
在 food 组件中定义 show 方法，show 方法通过改变 showFlag 的值来实现商品详情层的展开功能，在此之前，需要在 data 中先定义 showFlag。然后在 goods 组件中通过 ref 获取组件，并通过 $refs 调用子组件的 show 方法。
PS：1）父组件可以调用子组件方法，子组件不能调用父组件方法。2）设计规范：下划线开头是私有方法（_drop）。
4. 给返回按钮添加点击事件 hide
1）CSS设置：（display block，padding 10px）先设置display，才能设置padding，使点击区域变大。
2）hide 方法通过改变 showFlag 的值为 false 来实现返回功能。
设置其他样式
5. better-scroll 的使用
原理：当内部（content）的内容高度大于视口高度，则产生滚动效果
固定框架：外层是一个 wrapper，里面有一个 content，并且这个 content 高度是由其中的内容撑开的。
使用：better-scroll 应该绑定在最外层（.food）。依旧是通过 ref 获取组件，并通过 $refs 调用组件。better-scroll 应该在商品详情层展开时就进行初始化，所以其初始化应该在 show 方法中。
6. 添加购物车按钮
有两种样式：当加入商品时，“加入购物车” 文字消失，显示 cartcontrol 组件。所以应该加入两个层，这两个层平级，分别是 buy 层和 cartcontrol 层。
1）这两个层都是绝对定位。
2）buy 层加入 transition 动画及 v-show 指令（当 food.count 不存在或等于 0 时，该层显示）。
3）buy 层进行样式设计：z-index 10，因为要盖住 cartcontrol 组件。
4）点击按钮事件
addFirst，不传参数的话，则默认参数为event
不传参数得写为addFirst，而不能写成addFirst（）
引入vue，第一次利用Vue.set,将this.count置为1。
增加点击效果，要将事件传出去
看不到小球位置，是因为display瞬间变成none，结果找不到位置，
让购物车的消失做成一个动画，这样就不会立刻隐藏，不会立刻display被设置none，位置就能被计算。
加入购物车，渐隐效果，渐隐过程中，元素位置没变，就可以正确拿到高度
点击小球会触发商品详情页，这是因为事件冒泡，所以要阻止事件冒泡
给cartcontrol组件的加号减号小球添加@click.stop.prevent="decreaseCart"事件
分隔布局，组件，引入
food.info不是每个数据都有，所以food.info加v-show
接下来写评价模块
一个变量控制评价数组，一个变量维护描述，一个变量是否只看内容，一个看类型
先写props
通过父组件传入数据，先通过data绑定一些东西
在show中初始化这些数据。因为这个组件被多个商品使用，当传入商品时，希望这些属性的状态都是初始化的状态
ratings是food.ratings
接下来写样式
为什么不设置全padding，而设置padding-top为0，是因为下边有一条边框是贯穿整个界面的。
写组件ratingselect的样式
为什么不写padding而写margin，是因为下面有一条线，写padding会影响到线
什么时候区块会被active？：class
验证：food组件，this.selectType = 1或0;
写switch样式
on样式的使用，验证（food。vue）this.onlyContent = false;
给组件增加事件：给按钮增加click事件，给switch增加事件
clcik事件为什么有event，因为点击区块，区块外层有better-scroll，实现点击功能。这里同样是以$emit将数据传出去
Q：props双向绑定变成单向
http://www.jb51.net/article/98881.htm
vue报错Module build failed: ParseError: unexpected "indent"解决办法
因为css代码中注释应该是/* 消除空白字符影响 */，而写成// 消除空白字符影响（这是自动补全功能自己添加的注释符号，很奇怪）
改变selectType怎么通知父组件怎么改变selectType的值呢，依旧需要通过派发事件给父组件，然后让父组件监听这个事件
再添加点击事件toggleContent
接下来给数字动态化
接下来点击按钮与列表绑定，实时改变
接下来写评价列表样式：
有列表，显示列表，没有列表，显示没有列表
数据是时间戳，必须转换成文本
赞还是贬，因为：class是一个对象，对象是可以继续添加的
样式设置：右侧是绝对定位，定位到右上角
PS：不刷新也可以正常显示，因为reload方法会重新加载。需要刷新的原因：如果过程中高度撑高，better-scroll高度计算可能不正确，因为不会重新refresh
根据列表的点击，过滤一些评论，哪些显示哪些不显示
v-show绑定对象、属性、字段、函数，
首先是按钮的点击（rating.rateType）以及是否只显示有内容的评论（rating.text）
绑定了一个表达式，这个表达式是函数计算的结果
给selectRating和toggleContent方法加上refresh方法，即选择后重新计算高度，防止列表回弹
改变数据时，DOM更新是异步的，所以要写在nextTick接口中
评价为空，显示暂无评价
PS：3、用毫秒时间戳初始化日期对象
var timestamp=new Date().getTime(); console.log( new Date(timestamp) ); //Tue Jun 06 2017 11:06:59 GMT+0800 (中国标准时间)
var date3 = new Date( timestamp - 1 * 60 * 60 * 1000); console.log(date3); // Tue Jun 06 2017 10:06:59 GMT+0800 (中国标准时间)
说明：时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。时间戳唯一地标识某一刻的时间。
时间戳的换算，换成时间字符串
要转换成字符串，可以用vue写一个filters
可以在组件中定义组件级别的filters，filters中有一个formatDate()，formatDate中接受一个参数，即时间戳。要实现函数formatDate，需要在js模块中实现，在js中创建date.js。
首先拿到时间戳，先转换成Date类型的对象。然后将Date类型转换成所需要的年月日时间的形式。可以写一个函数，该函数：formatDate，去完成格式化字符串。希望可以在通用的地方中写，所以写在js文件中。这就是js模块化编程思想。将一个通用的方法抽象成模块。
在js文件中export这个方法，该方法接收两个参数，第一个参数是date，第二个参数是字符串。
然后在food。vue中调用该模块。
import {formatDate} from ‘common/js/date‘;
{formatDate}与cartcontrol的区别：
cartcontrol组件时通过export default。而模块是通过export function，也就是说这个模块其实可以同时export多个function，在引入时可以这么写{formatDate,a}，可以import多个模块，因为这个模块不是default的。
实现{formatDate}方法：
date输入是时间类型，输出是字符串。输入除了string类型还有一个格式化的字符串（就是两个参数），输出就是把字符串转成需要的模式。
可以利用正则表达式来写。传入的参数是yyyy-MM-dd hh:mm，可以利用正则表达式遍历这个字符串，将符合规则的表达式替换需要的年月日形式。
除了年是4个，其余都是2个。这里就是将yyyy替换成为真实的数据。
先替换年：定义规则：匹配到以y开头一个或多个的字符串。在字符串中查找匹配前面定义的规则（.test(fmt)）。
举个例子：这里传入的fmt="yyyy-MM-dd hh:mm"，在正则表达式中：+ 代表匹配前面的子表达式一次或多次。/(y+)/代表的规则是找到以y开头的字符串。所以这里找到的是yyyy。
匹配到相应的字符串后，找到相应数据（比如：2016），然后替换掉符合规则的字符串，即最终替换结果为（2016-MM-dd hh:mm）。
如何实现：字符串有一个replace方法，第一个参数是被替换的字符串，第二个参数是替换的字符串。
RegExp.$1 代表的是找到的符合规则的字符串（即yyyy），getFullYear() 方法可返回一个表示年份的 4 位数字（假设这里是2016）。要通过substr将其转换成 4 位的字符串。
substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。length参数省略的话，则返回从开始位置到结尾的字串。
substr(4 - RegExp.$1.length)：
RegExp.$1.length的值是4，则4 - RegExp.$1.length为0，表示从getFullYear()返回的数字中抽取第一个位置到最后一个位置的字串。也就是说，从返回的数字2016中抽取第一个位置到最后一个位置的字串，结果就是2016，不过类型由数字变成字符串，刚好符合replace方法对参数类型的限制。
再举个例子：假设fmt="yy-MM-dd hh:mm",其余不变，则最后从2016抽取第三个位置到最后一个位置的字串，就是16
除了年份比较特殊，其余的都一样，可以先定义一个对象o，这个对象是一个正则表达式，对应所替换的内容。
其中月份比较特殊，getMonth()方法返回的值是0到11，为了取到正确的值，要加1。
定义完表达式对象，接下来遍历该对象。
要先通过RegExp方法去构造一个正则表达式，依旧使用反引号和花括号结合的方式传入变量k，变量k的值是M+、d+这一类，构造完正则表达式，遍历字符串fmt，看看有没有符合规则的，有的话，替换真实数据。
PS：一个是定义死了正则表达式（/(y+)/），一个动态构造正则表达式（RegExp(`(${k})`)）
先定义要替换的值，末尾的这一步：+ ‘‘，是为了将数字转换成字符串。
替换这里需要注意，不能直接替换掉符合正则表达式规则的字符串，因为：比如月份中1到9月是单个数字，如果匹配到的字符串是M，就没问题，如果匹配到的字符串是MM，要先在9前面加上一个0。所以要判断匹配到的字符串的长度，如果是1，直接替换，否则补0。
定义一个补0的方法padLeftZero，如果str为9，补全之后为009，str长度为1，则取得字串是从抽取第二个位置到最后一个位置的字串，即09；
再举一例：如果str为12，补全之后为0012，str长度为2，则取得字串是从抽取第二个位置到最后一个位置的字串，即12；
原文地址：https://www.cnblogs.com/enboke/p/8525861.html