# Layui-component

**Repository Path**: mojunyuo/layui-component

## Basic Information

- **Project Name**: Layui-component
- **Description**: 基于layui开源的拓展组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2024-06-25
- **Last Updated**: 2024-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HG——Layui-component
## 基于layui2.8及以上版本拓展的一些组件库

### 一、现有组件说明
### 1、dropdownTable组件，该组件基于layui的dropdown模块和table模块完成，适用于下拉选择（选择其他表格的数据），目前的版本为v 1.0.2.
**使用说明:**
1. 在页面中声明dropdownTable模块
 ```javascript
layui.config({ base: 'layui-exts' }).extend({ 'dropdownTable': '/dropdownTable/dropdownTable' });
 ```
2. 使用此模块
 ```javascript
layui.use('dropdownTable', function () {
    var dropdownTable = layui.dropdownTable;

    //渲染dropdownTable
    dropdownTable.render({
        style:'padding:10px', //设定下拉样式
        id: 'text', //组件的ID
        emptyMsg: '请选择姓名', //空选择提示
        elem: "#test", // 绑定内容
        bindInput: "#name", //输入框绑定
        selectType: 'radio', //类型，radio为单选，checkbox为多选
        selectTable: {
            uniqueId: 'id', //唯一ID
            displayField: 'username' //要展示的字段
            //其他的参数参考layui的table模块，和table模块保持一致
        }
    });

    //版本v1.0.1新增，重新加载dropdown
    dropdownTable.reloadSelectTable(id, {data: []}); //第一个参数为dropdownTable的id，第二个是重新渲染selectTable的参数，使用同上selectTable里边的参数说明一致

    //版本v1.0.2新增，清空已选择
    dropdownTable.clearSelected(id); //参数id为dropdownTable的id
});
 ```
### 2、labelSelector组件，该组件基于layui的tab模块完成，适用于标签选择（如人员标签、项目标签等），目前版本为v 1.0.0.
> 该模块可直接用于页面中，或者基于layer完成一些高级的操作；请参考labelSelector.html中的使用案例.  
**注意：**  
经过测试该组件可用于layui2.5版本及以上，特别提示，如果在使用低版本的过程中发现checkBoxSkin设置为tag时出现标签和选择框大小不一致的问题，在你的页面中引入以下css即可。
>> ```.layui-form-checkbox i { height: 30px !important; } ```

**使用说明**
1. 在页面中声明labelSelector模块
```javascript
layui.config({ base: 'layui-exts' }).extend({ 'labelSelector': '/labelSelector/js/labelSelector' });
```
2. 使用此模块
``` javascript
<div id="example1"></div>

labelSelector.render({
    data: [
        {
            id: 1,
            title: '性格',
            label: [{ title: '平稳', value: 1 }, { title: '憨厚', value: 2 }]
        },
        {
            id: 2,
            title: '爱好',
            label: [{ title: '篮球', value: 3 }, { title: 'rap', value: 4 }]
        }
    ], //数据格式
    defaultSelected: [1, 2], //默认选中值，对应data下每一个label项子项的value值
    elem: "#example1", //绑定元素
    //window为非必填
    window: {
        windowStyle: "width:550px;height:400px", //整个选中区域css的风格,注意：默认window的最小宽度为400px,最小高度为300px,如果有需要可以自定义修改即可
        title: { text: '请选择人员所属标签？', style: "color:#16baaa" , isAllowShowSelectedRatio: true, ratioStyle: "color:Red" }, //窗口标题text及其样式style（style仅支持css的写法）,isAllowShowSelectRatio：是否显示比例，ratioStyle：比例css样式
        btn: true //是否开启窗体按钮，默认为false，开启后才可有对应的confim方法和cancel方法
    },
    tab: {
        isAllowClose: false, //是否允许tab上有关闭按钮，默认为false，非必填
        tabClass: 'layui-tab-brief', //tab的样式，空为默认样式，layui-tab-card是卡片样式，layui-tab-brief为简约样式，默认为基础样式，非必填
        tabContentStyle: 'padding-top:15px', //每个tab下的内容对应的css样式，非必填
        checkboxSkin: 'tag', //tab中标签的样式，支持primary和tag两种风格，默认为primary风格，非必填
        change: function (layero, tabId, data) { //tab的change事件，三个参数，第一个参数是tab对应的jquery对象，第二个为tabId，第三个tab对应的数据项
        },
        delete: function (layero, data) { //tab的删除事件，第一个参数是tab对应的jquery对象，第二个tab对应的数据项，仅当isAllowClose启用才会生效
        }
    },
    isAllowSelectTip: false, //是否允许选择提示，如果允许将会使用layer.msg的形式弹出选择提示，默认为false，非必填
    clicked: function (ele, hasSelected, hasSelectedTitle) { //标签点击事件，第一个参数是对应的标签的jquery对象，第二个返回全部已选中值，第三个参数为全部已选中值的标题
    },
    confirm: function (hasSelected, hasSelectedTitle) { //确定事件，当btn为true时生效，第一个返回全部已选中值，第二个参数为全部已选中值的标题 
    },
    cancel: function () { //取消事件，当btn为true时生效
    },
    isAllowAddLabel: true, //是否允许添加新标签，默认为false
    addNewLabel: function (tabId, labelTitle) {  //注意：参数tabId和labelTitle分别是tab的ID和新标签的名称，此函数仅当isAllowLabel为true时候可用
        //返回格式，success默认为true，labelValue及对应checkbox的实际值
        return {succes:false,labelValue:labelId};
    }                         
});
```
### 二、按需引入
1. 将项目克隆到本地，在layui-exts下找到需要使用的组件，引入到你的项目汇总即可。

### 三、说明  
本组件秉持开源的精神，但是并不会承担任何风险，如需用于商业项目请自己多加检查，以免线上造成问题带来损失。
如有问题可通过QQ进行反馈：493116703