组件说明
home-menu标签 菜单按钮
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
clickMenu | 点击函数, 返回值为当前点击的元素 | function | 无 |
list | 所要渲染的菜单 | array | 无 |
cols | 每排显示个数 | number | 5 |
border | 是否显示边框 | boolean | false |
shadow | 是否显示阴影 | boolean | false |
imgWidth | 图片宽度(不传值时默认100%宽度, 传值后为像素单位, 不要超过设置的width宽度) | string | 100% |
imgHeight | 图片高度 | string | 150 |
width | 整体宽度 | string | 无 |
完整示例:
<home-menu :callback='fun' :list='list' :cols='6' border shadow imgWidth='150' imgHeight='150' width='150'></home-menu>
list:[
{
img: '', // 默认显示的图片地址
img2: '', // 鼠标移入切换的图片地址
name: '', // 标题
}
]
fun(val){
console.log(val) // val为当前点击的元素的所有属性
}
如果想要自定义hover事件, 直接对.home-menu进行hover样式修改就行
eg-button标签 按钮
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
color | 设定字体颜色 | string | #000 |
borderColor | 设置边框颜色 | string | #000 |
disabled | 是否可以点击 | boolean | false |
radius | 是否圆角按钮并为其设置圆角尺寸 | String | 无 |
padding | 设置边框内边距(等同于css样式书写,不用带单位) | string | 0 |
bgColor | 设置背景颜色 | string | 无 |
icon | 按钮为字体图标时设置字体图标(为字体图标类名) | string | 无 |
完整示例
<eg-button color='#f60' borderColor='#f00' disabled radius='5' padding='10 10 10 10' bgColor='#00f' icon='iconfont iconbuilding'></eg-button>
也可以直接对eg-button进行样式复写
order-list订单列表平铺
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
toDetails | 点击函数,返回值为当前点击的元素的id | function | 无 |
toRoom | 点击函数,返回值为当前点击的元素的所有属性值 | function | 无 |
orderLists | 所要渲染的订单数据 | array | 无 |
deleteOrder | 删除按钮事件 | function | 无 |
完整示例:
<template>
<div>
<order-list @toDetails="toDetailsOutSide($event)"
@toRoom="toRoomOutSide($event)"
:orderLists="orderLists"></order-list>
</div>
</template>
methods:{
toDetailsOutSide(data){
console.log(data,"当前点击的所有属性")
},
toRoomOutSide(data){
console.log(data,"当前房间信息")
}
}
注意:orderLists数据的字段名与组件中循环的字段名匹配
orderSet订单列表弹出框(只适用于订单列表)
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
type | 传入点击的当前单元格的表头(用以判断显示哪一种弹框) | string | 无 | 是 |
row | 传入当前点击的表格行的所有数据 | object | 无 | |
callback | 点击事件的回调函数(一般用于关闭弹框使用) | function | 无 | 是 |
isChange | 判断是否是第一次添加时间 | boolean | falsse | 否 |
完整示例
<orderSet :row="row" :type="type" :callback="fun" isChange />
orderTable订单列表显示和平铺显示
参数 | 说明 | 类型 | 默认值 | 是否必传 | 参数说明 |
---|---|---|---|---|---|
gotoOtherPage | 自定义跳转页面跳转事件 | function | 无 | 否 | type, obj |
loading | 表格是否需要加载事件 | boolean | false | 否 | 无 |
cellClick | 单元格点击事件 | function | 无 | 否 | 无 |
tableData | 表格渲染数组 | array | 无 | 是 | 无 |
selectRow | 选择事件 | function | 无 | 否 | 无 |
selectAll | 全选事件 | function | 无 | 否 | 无 |
getOrderList | 获取订单列表 | function | 无 | 是(作为筛选用) | 无 |