0.1.0 • Published 3 years ago
LGC-UI
背景
在项目开发过程中，我们会经常封装一些常用并且比较实用的组件。为了省时省力，我这里把开发中封装的认为比较好用的组件，做成一个组件库，这样在以后开发新项目时，只需要npm install 安装进来便可使用。
项目介绍
该项目是一套常用的UI组件。你也可以认为是一些工具组件。
使用组件
import lgcui from 'lgc-ui'
Vue.use(lgcui)
组件
RenderSelect
列表中各项目的选中效果
使用方式
<xl-render-select></xl-render-select>
Attribute 属性
| 参数 | 类型 | 说明 | 默认值 | 可选值 |
|---|
| data | array | 显示的数据 | — | — |
| keyName | string | 选项遍历的key名称 | 默认是下标index | - |
| title | string | 标题 | 不显示标题 | - | - |
Events 事件
| 事件名 | 说明 | 参数 |
|---|
| itemClick | 当某一项被点击时触发该事件 | item,index |
Methods 方法
| 方法名 | 说明 | 参数 |
|---|
| setDefaultByIndex | 根据下标设置默认选中项 | index |
Slot 插槽
| name | 说明 |
|---|
| item | 列表中每项item的自定义样式，是必须自己实现 |
| title | 标题文字 |
| titleOpts | 标题的操作 |
DictSelect
用于展示数据字典的下拉列表
使用方式
<xl-dict-select></xl-dict-select>
Attribute 属性
注：该组件是在<el-radio>、<el-select>、<el-radio-group>组件的基础上扩展了一些功能，因此支持以上3个组件的所有属性
| 参数 | 类型 | 说明 | 默认值 | 可选值 |
|---|
| value / v-model | string / number | 绑定值 | - | - |
| type | string | 类型 | select | radio/radio-group/select |
| params | object | 请求时携带的其他参数 | - | - |
| props | object | 字典的属性名称 | { label:'label', value:'value' } | - |
| code | string | 数据字典编码，需配置dictUrl参数，字典访问路径 | - | - |
| url | string | 根据url获取字典（非通用方式，无需配置dictUrl） | - | - |
| options | array | 自定义下拉列表内容 | [] | - |
注：code、url、options三个参数是三选一，也是读取的优先级
Events 事件
参考element-ui中<el-radio>、<el-select>、<el-radio-group>中的事件
Methods 方法
参考element-ui中<el-radio>、<el-select>、<el-radio-group>中的方法
Slot 插槽
| name | 说明 |
|---|
| option | Option 组件列表，使用 slot-scope="{ data }" 接收组件传递的数据 |
| |