0.2.20 • Published 11 months ago

lay-controls v0.2.20

Weekly downloads
-
License
-
Repository
-
Last release
11 months ago

Lay-Controls

基于element-ui、vue2.x封装的一些布局及样式,主要是方便自己平时使用。

控件

下文中固定格式说明:

:props 代表可以v-bind的组件中的Props属性。
@method 代表事件
v-slot... 代表插槽

lay-edit

主要是提供编辑界面的风格。

属性功能默认值
:title编辑页的标题''
v-slot:tool-bar此插槽中可放置工具按钮-
v-slot默认的插槽,其内容作为此页面的主体内容-

lay-card

主要是提供卡片界面的风格。

属性功能默认值
:title编辑卡片的标题''
v-slot:tool-bar此插槽中可放置工具按钮-
v-slot默认的插槽,其内容作为此卡片的主体内容-

lay-list

主要是提供列表界面的风格。

属性功能默认值
:title编辑卡片的标题''
v-slot:tool-bar此插槽中可放置工具按钮-
v-slot默认的插槽,其内容作为此列表页的主体内容,通常会放el-table-

lay-page

主要封装了分页控件,对外暴露一个查询事件

属性功能默认值
:page-sizes分页大小的数组10, 20, 50, 100,200,500,默认以数组中第一个作业页大小的默认值
:page-size默认分页大小如果不设置,则取数组中第一个作业页大小的默认值
:total总数据行数,查询数据完成后,请将值给予此属性0
@loaddata用户操作页面,触发需要查询的动作时触发此事件,参数(pagesize,pageindex)用户切换页码、切换页大小,都会引发此变化

lay-table

只用样式

只需要在table上加 class="lay-table" 即可,表格的结构要完整,即:

<table>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

lay-v-continer

此功能用以在列表页,搜索栏会因为浏览器宽度不定导致高度不定,而此时,希望下面的表格高度能够自适应。

<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字段设置[]

fields

[
    {
        label:'',
        prop:'',
      
    }
]

样式

在scss文件中,引入 @import 'lay-controls/lay-style'; 当然,本语句上方可以修改下述相关变量,以达到自定义效果。

变量名默认值作用
$form-item-width250px表单中每个项的单位长度
$form-teim-width-offset10px表单中每个项的单位长度的附加长度,本数据项用来校正2倍与两个1倍不对齐的问题

在新框架中引用此样式的实践

在 src\styles\busi.scssstyles/busi.scs 中添加如下:

//  ------------ 引用其它包 ------------------
$form-item-width: 300px ;
$form-teim-width-offset: 10px ;
@import '~lay-controls/packages/lay-style.scss';

Form表单样式

  • 为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>

ComReport

使用案例:

// 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
print-cmdid打印模板直接打印sync
ping'pong'-测试打印助手响应sync
0.2.20

11 months ago

0.2.19

11 months ago

0.2.18

11 months ago

0.2.17

3 years ago

0.2.16

3 years ago

0.2.15

3 years ago

0.2.14

3 years ago

0.2.13

3 years ago

0.2.12

3 years ago

0.2.11

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.1.18

3 years ago

0.1.17

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.14

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago