Vue.js 2 高仿饿了么开发及解注四:goods 商品件组

Vue.js 2 高仿饿了么开发及解注四

欢迎交换友链: laker.me–进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

慕课网早期出了《Vue.js 1 高仿饿了么APP》的课程,本系列文章根据课程,使用 Vue.js 2 版本进行开发,并进行了一步步开发流程记录和详细的代码注解。

原作者的代码

我做的含有详细代码注解的版本

评分组件

新建 componet / star / star.vue, 评分星级的图片放入。

评分星级的星星的切图分为无星、半星、全星三种图案,各有2x、3x两种尺寸,通过三种图案组合拼凑成多种评分星数。一个星星用一个 <span> 装载,以背景的形式展现。

star.vue CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@import "../../common/stylus/mixin.styl"
.star
font-size: 0
.star-item
display: inline-block
background-repeat: no-repeat
// star-xx 不同尺寸的星星
&.star-48
.star-item
width: 20px
height: 20px
margin-right: 22px
background-size: 20px 20px
&:last-child
margin-right: 0 // 最后 一个星星没有margin-right
&.on
// mixin.styl 里定义的 bg-image()
bg-image('star48_on') // 全星
&.half
bg-image('star48_half') // 半星
&.off
bg-image('star48_off') // 无星
&.star-36
.star-item
width: 15px
height: 15px
margin-right: 6px
background-size: 15px 15px
&:last-child
margin-right: 0
&.on
bg-image('star36_on')
&.half
bg-image('star36_half')
&.off
bg-image('star36_off')
&.star-24
.star-item
width: 10px
height: 10px
margin-right: 3px
background-size: 10px 10px
&:last-child
margin-right: 0
&.on
bg-image('star24_on')
&.half
bg-image('star24_half')
&.off
bg-image('star24_off')

star.vue HTML

1
2
3
4
5
6
<!-- 循环填充星星状态的class -->
<div class="star" :class="starType">
<!-- v-for:循环获取 itemClasses() 返回的数组 -->
<!-- :class="itemClass" 把获取的class加给span -->
<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" key="index"></span>
</div>

star.vue JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// const 定义常量
const LENGTH = 5 // 星星个数
const CLS_ON = 'on' // 星星的三种状态
const CLS_HALF = 'half'
const CLS_OFF = 'off'
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 // 通过分数算星星个数
// 向下取0.5的公式。floor() 执行向下取整
// floor(3.3 * 2) / 2 = 3 即 3颗全星+2颗无星
// floor(3.6 * 2) / 2 = 3.5 即 3颗全星+1颗半星+1颗无星
let hasDecimal = score % 1 !== 0 // 取余不为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
}
}
}

header.vue 引用并注册 star 组件

1
2
3
4
5
6
7
8
import Star from 'components/star/star'
export default {
...
components: {
Star // 注册评分组件
}
}

header.vue 使用评分组件

1
2
3
4
5
6
<div class="star-wrapper">
<!-- 使用 star 组件时,需传入 size、score -->
<!-- :size 星星大小,组件定义了48、36、24 -->
<!-- :score 评分,从data.json里来 -->
<star :size="48" :score="seller.score"></star>
</div>

Vue.js 2 高仿饿了么开发及解注四:goods 商品件组

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我喝杯咖啡吧

评论组件不稳定,有事请联系V信 lakerHQ (请备注来自博客)