基于element-ui、vue2.x封装的一些布局及样式,主要是方便自己平时使用。
下文中固定格式说明:
:props 代表可以v-bind的组件中的Props属性。
@method 代表事件
v-slot... 代表插槽
主要是提供编辑界面的风格。
属性 | 功能 | 默认值 |
---|---|---|
:title | 编辑页的标题 | '' |
v-slot:tool-bar | 此插槽中可放置工具按钮 | - |
v-slot | 默认的插槽,其内容作为此页面的主体内容 | - |
主要是提供卡片界面的风格。
属性 | 功能 | 默认值 |
---|---|---|
:title | 编辑卡片的标题 | '' |
v-slot:tool-bar | 此插槽中可放置工具按钮 | - |
v-slot | 默认的插槽,其内容作为此卡片的主体内容 | - |
主要是提供列表界面的风格。
属性 | 功能 | 默认值 |
---|---|---|
:title | 编辑卡片的标题 | '' |
v-slot:tool-bar | 此插槽中可放置工具按钮 | - |
v-slot | 默认的插槽,其内容作为此列表页的主体内容,通常会放el-table | - |
主要封装了分页控件,对外暴露一个查询事件
属性 | 功能 | 默认值 |
---|---|---|
:page-sizes | 分页大小的数组 | [10, 20, 50, 100,200,500],默认以数组中第一个作业页大小的默认值 |
:total | 总数据行数,查询数据完成后,请将值给予此属性 | 0 |
@loaddata | 用户操作页面,触发需要查询的动作时触发此事件,参数(pagesize,pageindex) | - |
只需要在table上加 class="lay-table" 即可,表格的结构要完整,即:
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
此功能用以在列表页,搜索栏会因为浏览器宽度不定导致高度不定,而此时,希望下面的表格高度能够自适应。
<template>
<div style="background-color:black">
<div style="height:calc(100vh - 30px)" class="lay-v-c"><!-- 此处height是指这个块的总高度,可以指定100%以使用父容器总高度,也可以使用calc进行运算 -->
<div class="lay-v-c-zoom-in" style="background:yellow"><!-- lay-v-c-zoom-in 是高度缩小至容纳内容高度 -->
<el-button>按钮很多,根据宽度自动换行,平时在搜索框中的内容</el-button>
<el-button>按钮很多,根据宽度自动换行,平时在搜索框中的内容</el-button>
</div>
<div class="lay-v-c-zoom-out" style="background:pink;height:100%"><!-- lay-v-c-zoom-out 是将内容放大到容器剩余空间,多个的时候,垂直平分 -->
此处内容的高度会随着剩余空间的高度自适应,通常用于放置lay-card,lay-list或者table之类的展示结果的数据。
</div>
</div>
</div>
</template>
只提供专用的功能,如果需要更复杂的功能,请使用el-table。
属性 | 功能 | 默认值 |
---|---|---|
:data | 绑定的数据数组 | [] |
:fields | 字段设置 | [] |
[
{
label:'',
prop:'',
}
]
在scss文件中,引入 @import 'lay-controls/lay-style'; 当然,本语句上方可以修改下述相关变量,以达到自定义效果。
变量名 | 默认值 | 作用 |
---|---|---|
$form-item-width | 250px | 表单中每个项的单位长度 |
$form-teim-width-offset | 10px | 表单中每个项的单位长度的附加长度,本数据项用来校正2倍与两个1倍不对齐的问题 |
在新框架中引用此样式的实践
在 src\styles\busi.scssstyles/busi.scs 中添加如下:
// ------------ 引用其它包 ------------------
$form-item-width: 300px ;
$form-teim-width-offset: 10px ;
@import '~lay-controls/packages/lay-style.scss';
- 为el-form添加class="lay-form"
- 为el-form-item添加class="lay-form-item-1",其中1可以写成1、2、3,代表所占用的列单位。all代表占全行。
<el-form class="lay-form>
<el-form-item class="lay-form-item-1" label="用户名">
<el-input></el-input>
</el-form-item>
</el-form>
使用案例:
// main.js
import comreport from 'lay-controls/packages/local/comreport'
// comreport
comreport.init({
// baseURL: 'http://localhost:9007',
// templateedit: 'templateedit',
// templateprint: 'templateprint',
// print: 'print',
vue_app_base_api: process.env.VUE_APP_BASE_API,
loading_open: msg => {
return Vue.prototype.$loading({
lock: true,
text: msg,
spinner: 'el-icon-loading',
background: 'rgba(0,0,0,0.7)'
})
},
loading_close: loadserv => {
if (loadserv != null) {
loadserv.close()
}
},
msg: msg => {
Vue.prototype.$alertx(msg, '指令执行失败')
}
})
// ---- comreport ----
使用
// vue业务页面
import comreport from 'lay-controls/packages/local/comreport'
cmd_print(tmplt_id) {
request({
url: 'api/mpa/comreport/cmd/cmd-print',
method: 'post',
params: {
tmplt_id: tmplt_id,
busy_type: '',
param_json: ''
}
}).then(resp => {
console.log(resp.data)
comreport.templateprint(resp.data)
}).catch(err => {
alert(err, '打印失败')
})
},
sync类型的函数,可以使用await 等待
指令 | 返回 | 传参 | 说明 | 类型 |
---|---|---|---|---|
templateedit | - | cmdid | 编辑打印模板 | sync |
templateprint | - | cmdid | 打印模板预览打印 | sync |
- | cmdid | 打印模板直接打印 | sync | |
ping | 'pong' | - | 测试打印助手响应 | sync |