慕课网学习笔记;
引入:
- npm方式:
npm i element-ui -S
或:
cnpm install element-ui --save
要先整合cnpm
在项目中引入:
1.main.js
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI)
- 引入网址组件方式:
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
测试使用
Pos.vue里添加模版布局
<template>
<div class="pos">
<div>
<el-row ><!--设置一行-->
<el-col :span='7'><!--设置列,比例7:17-->
我是订单栏
</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';//设置标签的高度
},
快速布局:
el-tabs标签页组件
用Element里提供的el-tabs组件可以快速制作我们的tabs标签页效果
基本用法很简单,可以直接在模板中引入<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组件制作表格
需要在订单的tab标签页里放入表格,把点选的食品放入到待结账列表里,可以使用Element的内置组件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-table-column
type="selection"
width="55"
:selectable='checkboxInit'>
<!--checkboxInit是设置禁止选择的方法-->
//设置合计为不可选中状态
checkboxInit(row,index){
if (index==this.tableData.length-1||index==this.tableData.length-2)//这个判断根据你的情况而定
return 0;//不可勾选
else
return 1;//可勾选
},
表格选中方法
<!--表头设置-->
<el-table
:data="tableData" tooltip-effect="light"
border
style="width: 100%"
@selection-change="handleSelectionChange">
//选择数据时触发的事件
handleSelectionChange(val){
this.multipleSelection = val;
},
<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button>
toggleSelection(rows) {
if (rows) { rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
el-button 按钮组件
需要在点餐表格的下方放入三个功能性按钮,分别是挂单按钮、删除按钮、结账按钮。同样使用Element里的组件,进行快速写入。el-button 的type属性是设置按钮样式的,为了学些和区分我们这里用三个属性来设置按钮。
<el-button type="warning" >挂单</el-button>
<el-button type="danger" >删除</el-button>
<el-button type="success" >结账</el-button>
常用商品区域布局
在<el-col :span=17>
标签里增加一个层,然后在层内进行布局。因为里边的商品实际意义上是列表,所以用无序列表<li>
来布局商品。
<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>
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;
}
数据
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
}
]
商品分类布局
<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;
}
数据
引入图片
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>
下拉框
<el-select placeholder="每页显示条数" class="pageSizeClass" v-model="pageSize">
<el-option key="1" label="10条" value=10></el-option>
<el-option key="2" label="20条" value=20></el-option>
<el-option key="3" label="30条" value=30></el-option>
</el-select>
value默认是string,设置默认值的时候,默认值要转string(如果本来是数字的话)
this.pageSize=res.data.data.pageSize.toString();