# luyj-tree
> 代码块 `luyj-tree` 、`luyj-search`
## 说明
本插件是基于[xiaolu-tree](https://ext.dcloud.net.cn/plugin?id=2423)进行了uni_modules模块化。并进行了一些修改。
插件在微信小程序、h5端浏览器亲测可用。其他平台,理论上可用。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
### 基本用法
在 ``template`` 中使用组件
```html
{{item.name}}
```
``` javascript
import dataList from '@/common/data.js'; // 引用数据
export default {
data() {
return {
tree: dataList,
max: 5,
}
},
}
```
### 功能说明
1. 树形结构展示。
2. 包含搜索框。能够自定义搜索框的样式,能够直接搜索树形图、子文件的内容。
3. 包含面包屑导航。
4. 可以仅仅展示或选择树形的项内容。
5. 单选状态可以回显选中位置路径。
6. 只需传checkList字段就可以回显默认选中。
7. 支持自定义显示内容(slot),自定义内容样式。
8. 动态展示数据。仅支持展示+单选
### 属性
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
searchIf |Boolean |true | 是否开启搜索
searchBackgroundColor |String |#FFFFFF | 搜索框背景色
searchInputBackgroundColor |String |#EEEFF0 | 搜索框的输入框背景色
searchRadius |Number |40 | 搜索框的圆角值,单位rpx(默认40)
searchPlaceholder |String |搜索 | 搜索框的内容物空时提示内容
searchPlaceholderStyle |String | | 搜索框的placehoder的样式
searchMaxlength |Number |140 | 搜索框的最大输入长度 ,设置为 -1 的时候不限制最大长度
searchIconColor |String | | 搜索框的图标颜色
searchPlaceholder |Boolean |true | 搜索框是否显示清除按钮
trees |Array |[] | trees 传入的树形结构,每个对象必须包含唯一的id值
isCheck |Boolean |false | 是否开启选择操作
max |Number |-1 | 最大的level层数
checkList |Array |[] | 选中的列表
parent |Boolean |false | 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)
parentList |Array |[] | 父级列表
props |Object |{label:'name',children:'children'} | 参数配置,详细见下表
#### props 参数说明
参数 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
label |String |name | 指定选项标签为选项对象的某个属性值
children |String |children | 指定选项的子选项为选项对象的某个属性值
multiple |Boolean |true | 值为true时为多选,为false时是单选
checkStrictly |Boolean |false | 需要在多选模式下才传该值,checkStrictly为false时,可让父子节点取消关联,选择任意一级选项。为true时关联子级,可以全选
nodes |Boolean |true | 在单选模式下,nodes为false时,可以选择任意一级选项,nodes为true时,只能选择叶子节点
### 事件
事件名 |说明 |返回值
:-: |:-: |:-:
@selectitem |点击项目触发的事件 |参数(索引,具体项目)
# luyj-tree-search
### 说明
``luyj-tree-search`` 是 ``luyj-tree-search``内的组件,可以单独引用。
### 基本用法
###
在 ``template`` 中使用组件
``` html
```
### 属性
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
backgroundColor |String |#FFFFFF | 背景色
inputBackgroundColor |String |#EEEFF0 | 输入框背景色
radius |Number |40 | 输入框圆角,单位rpx
iconColor |String |#B8B8B8 | 图标颜色
placeholder |String |搜索 | 输入框为空时占位符
placeholderStyle |String | | placeholder的样式
maxlength |Number |140 | 最大输入长度 ,设置为 -1 的时候不限制最大长度
### 事件
事件名 |说明 |返回值
:-: |:-: |:-:
@input |输入框内容变化时,触发事件 | event
@focus |输入框获得焦点时,触发事件 | event
@blur |输入框失去焦点时,触发事件 | event
@confirm |输入框内容提交时,触发事件 | event
@clear |清空输入框内容时,触发事件 | ''