Vue.js 2 高仿饿了么开发及解注二:header 组件

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

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

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

原作者的代码

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

vue-resource

处理HTTP请求,https://github.com/pagekit/vue-resource

安装

cnpm install vue-resource --save

引用

routers/index.js :

1
2
3
4
5
// 注入
import Resource from 'vue-resource'
// 注册
Vue.use(Resource)

编写header内容

App.vue

发起ajax请求

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
// 定义一个常量,表示请求返回正常
const RESP_OK = 1
export default {
name: 'app',
data() {
return {
seller: {}
}
},
created () {
this.$http.get('/api/seller').then((response) => {
// .body 获取 json 数据
response = response.body
// 判断请求是否正常
if (response.status === RESP_OK) {
this.seller = response.data
// 测试
console.log(this.seller)
}
})
},
...
}

接口 /api/seller 在之前写的 build/dev-server.js 里定义了状态码和返回的数据

1
2
3
4
5
6
apiRoutes.get('/seller', function (req, res) {
res.json({
status: 1,
data: seller
});
})

App.vue :
把 Ajax 请求获取的 seller 对象传给 v-header 标签。
:seller=”seller” 等同于 v-bind:seller=”seller”

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

header.vue

获取 seller 对象

1
2
3
4
5
6
7
export default {
props: {
seller: {
type: Object
}
},
...

写好一系列HTML、CSS。
注意几个地方:
1、在 common/mixin.styl 添加根据设备 dpi 使用不同像素的图片作为背景的代码。

组件使用的图片都放在组件的文件夹里。

1
2
3
4
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")

使用方法 bg-image('图片名')

1
bg-image('bulletin')

2、header.vue 里引用 mixin.styl

1
@import "../../common/stylus/mixin"

3、异步插入的图片地址,要用 vue 的指令 :src。如果用 src 就会在编译的时候渲染,但异步获取图片地址会有延时,导致找不到图片。

1
<img width="64" height="64" :src="seller.avatar">

4、多class的处理

在 data.json 里,定义有商家支持的活动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
},
{
"type": 3,
"description": "该商家支持发票,请下单写好发票抬头"
},
{
"type": 4,
"description": "已加入“外卖保”计划,食品安全保障"
}
]

header.vue CSS 添加每个活动 icon 的样式

1
2
3
4
5
6
7
8
9
10
11
12
.icon
...
&.decrease
bg-image('decrease_2')
&.discount
bg-image('discount_2')
&.invoice
bg-image('invoice_2')
&.special
bg-image('special_2')
&.guarantee
bg-image('guarantee_2')

header.vue 创建classMap数组,依次写下对应data.json的supports数字的class

1
2
3
4
5
export default {
...
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
}

icon 标签通过 :class 动态绑定class

1
<span class="icon" :class="classMap[seller.supports[0].type]"></span>

5、用 v-if 判断异步请求完成后再渲染,不使用则会在请求完成前竞选人导致报错,如:

1
<div v-if="seller.supports" class="support">

6、详细活动弹出层

HTML:

整个详情弹出层,通过指令 v-show 来控制显示隐藏

1
<div v-show="detailShow" class="detail">

显示按钮

1
<div v-if="seller.supports" class="support-count" @click="showDetail">

关闭按钮

1
2
3
<div class="detail-close" @click="hideDetail">
<i class="icon-close"></i>
</div>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default {
...
data () {
return {
detailShow: false // 初始化 detailShow
}
},
methods: {
// 显示、隐藏的方法
showDetail () {
this.detailShow = true
},
hideDetail () {
this.detailShow = false
}
}

Vue.js 2 高仿饿了么开发及解注二:header 组件

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

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

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