使用vue-cli编写外卖app【header组件（外部组件）】

Vue-resource

安装

npm install vue-resource --save

配置

【main.js】

import VueRouter from 'vue-router'

Vue.use(VueResource)

使用

【app.vue】

        this.$http.get('/api/seller').then((res) => { // 成功的回调
            res = res.body
            if (res.errno === ERR_OK) { // 验证错误码
                this.seller = res.data //赋值到data上的seller
            }
        })

外部组件

把数据传递给子组件

【App.vue】

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

【header.vue】在props上注册

        props: {
            seller: {
                type: Object
            }
        }

布局及样式

为了能在不同dpi的设备上引入不同规格的图片，需要创建一个bg-image函数。

【mixin.styl】

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")

调用这个函数

【header.vue】

<style>
//.....
                    .brand
                        bg-image('brand')
<style>

因为商家有各种活动，所以不同的活动也绑定不同的样式类，对应的json如下

【data.json】

//.....
 "supports": [
      {
        "type": 0,
        "description": "在线支付满28减5"
      },
      {
        "type": 1,
        "description": "VC无限橙果汁全场8折"
      },
      {
        "type": 2,
        "description": "单人精彩套餐"
      }//.....

在【header.vue】创建时创建一个数组，数值对应类名

//...
        created() {
            this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
        }

使用时传入supports的type值

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

效果图及代码

完整代码

当前截图