开启Element封印
Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。在项目中自己写组件虽然灵活，但是效率并不高效，所以要学会站在巨人的肩膀上干活，Element就是巨人的肩旁，也是现在国内比较成熟的以一套Vue的组件库。所以我决定 使用这个组件库开发项目。
npm安装
这里使用npm的方式安装，它能更好地和webpack打包工具配合使用。
npm install element-ui --save
如果你网络状况不佳可以使用cnpm来进行安装。
完整引入项目
在main.js中写入以下内容:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) })
以上代码便完成了Element的引入。需要注意的是，样式文件需要单独引入。
用Element的el-row的布个局
安装好，先做个简单的布局小试牛刀，这里作两栏布局，Element支持用24栏的形式进行布局。
在Pos.vue里添加模版布局：
<template>
<div class="pos">
<div>
<el-row >
<el-col :span='7'>
我是订单栏
</el-col>
<!--商品展示-->
<el-col :span="17">
我是产品栏
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'Pos',
data () {
return {
}
}
}
</script>
<style scoped>
</style>
解决100%高的问题
在页面中使用了Element组件，这样他会自动给我们生产虚拟DOM，我们无法设置高度100%；
这时候可以利用javascript，来设置100%高度问题。先要给我们的<el-col>标签上添加一个id，我们这里把ID设置为order-list。然后在vue构造器里使用mounted钩子函数来设置高度。
mounted:function(){ var orderHeight=document.body.clientHeight; document.getElementById("order-list").style.height=orderHeight+'px'; },
利用Element快速布局（1）
el-tabs标签页组件
用Element里提供的el-tabs组件可以快速制作我们的tabs标签页效果，具体使用方法可以到Element的官网查看API。
基本用法很简单，可以直接在模板中引入<el-tabs>标签，标签里边用<el-tab-pane>来代表每个每个标签页。
先看一个最简单的代码：
<el-tabs>
<el-tab-pane label="点餐">
点餐
</el-tab-pane>
<el-tab-pane label="挂单">
挂单
</el-tab-pane>
<el-tab-pane label="外卖">
外卖
</el-tab-pane>
</el-tabs>
细心的小伙伴会看到每个<el-tab-pane>里会有一个label属性，这个属性就是你标签页的标题。内容可以直接写在<el-tab-pane>里。
el-table组件制作表格
<el-table :data="tableData" border show-summary style="width: 100%" >
<el-table-column prop="goodsName" label="商品" ></el-table-column>
<el-table-column prop="count" label="量" width="50"></el-table-column>
<el-table-column prop="price" label="金额" width="70"></el-table-column>
<el-table-column label="操作" width="100" fixed="right">
<template scope="scope">
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">增加</el-button>
</template>
</el-table-column>
</el-table>
这里我们采用了五列布表格， 在第1行中的:data是用来绑定数据源的， border代表表格有边框效果。在这视频里我会有详细的讲解。
tableData中的数据源的值，为了布局方便，所以我们进行了写死，以后会改成动态添加的数据。
tableData: [{ goodsName: '可口可乐', price: 8, count:1 }, { goodsName: '香辣鸡腿堡', price: 15, count:1 }, { goodsName: '爱心薯条', price: 8, count:1 }, { goodsName: '甜筒', price: 8, count:1 }]
你现在可以打开浏览器进行一下预览，看一下效果了。如果效果正常，我们可以继续往下编写了。
el-button 按钮组件
需要在点餐表格的下方放入三个功能性按钮，分别是挂单按钮、删除按钮、结账按钮。同样使用Element里的组件，进行快速写入。el-button 的type属性是设置按钮样式的，为了学些和区分我们这里用三个属性来设置按钮。
<el-button type="warning" >挂单</el-button> <el-button type="danger" >删除</el-button> <el-button type="success" >结账</el-button>
利用Element快速布局（2）
上节完成了左边订单栏的布局，这节我们还是利用Element完成大部分布局。
这是完成布局的图片
常用商品区域布局：
在<el-col :span=17>标签里增加一个层，然后在层内进行布局。因为里边的商品实际意义上是列表，所以用无序列表<li>来布局商品。贴出布局的html代码。
<div class="often-goods">
<div class="title">常用商品</div>
<div class="often-goods-list">
<ul>
<li>
<span>香辣鸡腿堡</span>
<span class="o-price">￥15元</span>
</li>
</ul>
</div>
</div>
有了基本html结构后，需要增加一些css样式来美化页面：
.title{ height: 20px; border-bottom:1px solid #D3DCE6; background-color: #F9FAFC; padding:10px; } .often-goods-list ul li{ list-style: none; float:left; border:1px solid #E5E9F2; padding:10px; margin:5px; background-color:#fff; } .o-price{ color:#58B7FF; }
现在页面变的漂亮了，我们这时候为了页面更逼近真实效果，我们在Vue的构造器里临时加一个数组，用作常用商品使用。声明的变量叫oftenGoods（真实项目不能这样起名字，这里只是练习使用）。
oftenGoods:[ { goodsId:1, goodsName:'香辣鸡腿堡', price:18 }, { goodsId:2, goodsName:'田园鸡腿堡', price:15 }, { goodsId:3, goodsName:'和风汉堡', price:15 }, { goodsId:4, goodsName:'快乐全家桶', price:80 }, { goodsId:5, goodsName:'脆皮炸鸡腿', price:10 }, { goodsId:6, goodsName:'魔法鸡块', price:20 }, { goodsId:7, goodsName:'可乐大杯', price:10 }, { goodsId:8, goodsName:'雪顶咖啡', price:18 }, { goodsId:9, goodsName:'大块鸡米花', price:15 }, { goodsId:20, goodsName:'香脆鸡柳', price:17 } ]
有了数据，可以使用v-for循环来输出到html模板中。
商品分类布局：
这样我们商品的上半部分就布局完成了，现在需要布局下半部分，我们在下半部分先添加一个tabs的标签样式。
<div class="goods-type">
<el-tabs>
<el-tab-pane label="汉堡">
汉堡
</el-tab-pane>
<el-tab-pane label="小食">
小食
</el-tab-pane>
<el-tab-pane label="饮料">
饮料
</el-tab-pane>
<el-tab-pane label="套餐">
套餐
</el-tab-pane>
</el-tabs>
</div>
制作商品的无序列表：
<ul class='cookList'>
<li>
<span class="foodImg"><img src="http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg" width="100%"></span>
<span class="foodName">香辣鸡腿堡</span>
<span class="foodPrice">￥20.00元</span>
</li>
</ul>
对无序列表进行CSS样式编写：
.cookList li{ list-style: none; width:23%; border:1px solid #E5E9F2; height: auot; overflow: hidden; background-color:#fff; padding: 2px; float:left; margin: 2px; } .cookList li span{ display: block; float:left; } .foodImg{ width: 40%; } .foodName{ font-size: 18px; padding-left: 10px; color:brown; } .foodPrice{ font-size: 16px; padding-left: 10px; padding-top:10px; }
有了基本的样式，我们可以在Vue的构造器里添加汉堡类的数据。声明一个type0Goods的数据，数据格式如下。
type0Goods:[ { goodsId:1, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg", goodsName:'香辣鸡腿堡', price:18 }, { goodsId:2, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg", goodsName:'田园鸡腿堡', price:15 }, { goodsId:3, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg", goodsName:'和风汉堡', price:15 }, { goodsId:4, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg", goodsName:'快乐全家桶', price:80 }, { goodsId:5, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg", goodsName:'脆皮炸鸡腿', price:10 }, { goodsId:6, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg", goodsName:'魔法鸡块', price:20 }, { goodsId:7, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg", goodsName:'可乐大杯', price:10 }, { goodsId:8, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg", goodsName:'雪顶咖啡', price:18 }, { goodsId:9, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg", goodsName:'大块鸡米花', price:15 }, { goodsId:20, goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg", goodsName:'香脆鸡柳', price:17 } ],
用v-for改造我们的无序列表：
<li v-for="goods in type0Goods">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</li>
页面的基本布局我们已经制作完成，终于看起来像个收银界面了。但是现在的数据都是写死的，下节课我们将从后端用Axios拉去数据。
扫一扫
3654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
