Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qq_28624235
luyj-tree-app
比较版本
d178ca2719445c6cf5d8e22dda78a7a4fbf9da5e...9cb7baf1d1d541becef199ddaa68d06a17cd2ff8
L
luyj-tree-app
项目概览
qq_28624235
/
luyj-tree-app
通知
227
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
L
luyj-tree-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
源分支
9cb7baf1d1d541becef199ddaa68d06a17cd2ff8
选择Git版本
...
目标分支
d178ca2719445c6cf5d8e22dda78a7a4fbf9da5e
选择Git版本
比较
Commits (2)
https://gitcode.net/qq_28624235/luyj-tree-app/-/commit/6ca59ccfb75e6e12c93e8734e6562c5b69b2397b
版本1.1.0
2021-07-27T19:52:19+08:00
luyanjie00436
18359027950@163.com
https://gitcode.net/qq_28624235/luyj-tree-app/-/commit/9cb7baf1d1d541becef199ddaa68d06a17cd2ff8
1.1.0 版本
2021-07-27T19:53:15+08:00
luyanjie00436
18359027950@163.com
显示空白变更内容
内联
并排
Showing
10 changed file
with
393 addition
and
67 deletion
+393
-67
common/data.js
common/data.js
+85
-1
pages.json
pages.json
+14
-0
pages/chooseUser/chooseUser.vue
pages/chooseUser/chooseUser.vue
+8
-2
pages/search-test/luyj-search-test.vue
pages/search-test/luyj-search-test.vue
+25
-0
uni_modules/luyj-tree/changelog.md
uni_modules/luyj-tree/changelog.md
+4
-0
uni_modules/luyj-tree/components/luyj-tree-search/icon.css
uni_modules/luyj-tree/components/luyj-tree-search/icon.css
+5
-1
uni_modules/luyj-tree/components/luyj-tree-search/luyj-tree-search.vue
...uyj-tree/components/luyj-tree-search/luyj-tree-search.vue
+110
-25
uni_modules/luyj-tree/components/luyj-tree/luyj-tree.vue
uni_modules/luyj-tree/components/luyj-tree/luyj-tree.vue
+70
-14
uni_modules/luyj-tree/package.json
uni_modules/luyj-tree/package.json
+14
-12
uni_modules/luyj-tree/readme.md
uni_modules/luyj-tree/readme.md
+58
-12
未找到文件。
common/data.js
浏览文件 @
9cb7baf1
...
@@ -1112,7 +1112,91 @@ let dataList = [{
...
@@ -1112,7 +1112,91 @@ let dataList = [{
pid
:
"
-1
"
,
pid
:
"
-1
"
,
user
:
true
user
:
true
}]
}]
}
},
{
id
:
66421777884366998
,
name
:
"
校长44443
"
,
pid
:
"
-1
"
,
checked
:
false
,
user
:
false
,
children
:
[{
id
:
88565444444346556678
,
name
:
"
小陆
"
,
checked
:
false
,
pid
:
"
-1
"
,
user
:
true
}]
},
{
id
:
66421777884366998
,
name
:
"
校长44443
"
,
pid
:
"
-1
"
,
checked
:
false
,
user
:
false
,
children
:
[{
id
:
88565444444346556678
,
name
:
"
小陆
"
,
checked
:
false
,
pid
:
"
-1
"
,
user
:
true
}]
},
{
id
:
66421777884366998
,
name
:
"
校长44443
"
,
pid
:
"
-1
"
,
checked
:
false
,
user
:
false
,
children
:
[{
id
:
88565444444346556678
,
name
:
"
小陆
"
,
checked
:
false
,
pid
:
"
-1
"
,
user
:
true
}]
},
{
id
:
66421777884366998
,
name
:
"
校长44443
"
,
pid
:
"
-1
"
,
checked
:
false
,
user
:
false
,
children
:
[{
id
:
88565444444346556678
,
name
:
"
小陆
"
,
checked
:
false
,
pid
:
"
-1
"
,
user
:
true
}]
},
{
id
:
66421777884366998
,
name
:
"
校长44443
"
,
pid
:
"
-1
"
,
checked
:
false
,
user
:
false
,
children
:
[{
id
:
88565444444346556678
,
name
:
"
小陆
"
,
checked
:
false
,
pid
:
"
-1
"
,
user
:
true
}]
},
{
id
:
66421777884366998
,
name
:
"
校长44443
"
,
pid
:
"
-1
"
,
checked
:
false
,
user
:
false
,
children
:
[{
id
:
88565444444346556678
,
name
:
"
小陆
"
,
checked
:
false
,
pid
:
"
-1
"
,
user
:
true
}]
},
]
]
...
...
pages.json
浏览文件 @
9cb7baf1
...
@@ -15,6 +15,15 @@
...
@@ -15,6 +15,15 @@
}
}
}
}
,{
"path"
:
"pages/search-test/luyj-search-test"
,
"style"
:
{
"navigationBarTitleText"
:
"输入框"
,
"enablePullDownRefresh"
:
false
}
}
],
],
"globalStyle"
:
{
"globalStyle"
:
{
"navigationBarTextStyle"
:
"black"
,
"navigationBarTextStyle"
:
"black"
,
...
@@ -29,6 +38,11 @@
...
@@ -29,6 +38,11 @@
"name"
:
"首页"
,
//模式名称
"name"
:
"首页"
,
//模式名称
"path"
:
"pages/index/index"
,
//启动页面,必选
"path"
:
"pages/index/index"
,
//启动页面,必选
"query"
:
""
//启动参数,在页面的onLoad函数里面得到
"query"
:
""
//启动参数,在页面的onLoad函数里面得到
},
{
"name"
:
"测试-搜索"
,
//模式名称
"path"
:
"pages/search-test/luyj-search-test"
,
//启动页面,必选
"query"
:
""
//启动参数,在页面的onLoad函数里面得到
}
}
]
]
}
}
...
...
pages/chooseUser/chooseUser.vue
浏览文件 @
9cb7baf1
<
template
>
<
template
>
<view>
<view>
<luyj-tree-search></luyj-tree-search>
<luyj-tree
v-slot:default=
"
{item}" :checkList="checkList" v-if="tree.length>0" :max="max" :props="prop" @sendValue="confirm" :parent="true" :isCheck="isCheck" :trees="tree">
<luyj-tree
v-slot:default=
"
{item}" :checkList="checkList" v-if="tree.length>0" :max="max" :props="prop" @sendValue="confirm" :parent="true" :isCheck="isCheck" :trees="tree">
<!-- 内容插槽 -->
<!-- 内容插槽 -->
<view>
<
!--
<
view>
<view
class=
"content-item"
>
<view
class=
"content-item"
>
<view
class=
"word"
>
{{
item
.
name
}}
</view>
<view
class=
"word"
>
{{
item
.
name
}}
</view>
</view>
</view>
</view>
-->
<template
slot=
"body"
>
<view
class=
"content-item"
>
<view
class=
"word"
>
{{
item
.
name
}}
</view>
</view>
</view>
</
template
>
</luyj-tree>
</luyj-tree>
</view>
</view>
</template>
</template>
...
...
pages/search-test/luyj-search-test.vue
0 → 100644
浏览文件 @
9cb7baf1
<
template
>
<view
style=
"background-color: #FFFFFF;height: 100vh;"
>
<luyj-tree-search></luyj-tree-search>
</view>
</
template
>
<
script
>
/**
*
*/
export
default
{
data
()
{
return
{
}
},
methods
:
{
}
}
</
script
>
<
style
>
</
style
>
uni_modules/luyj-tree/changelog.md
浏览文件 @
9cb7baf1
## 1.1.0(2021-07-27)
为树的输入框,添加更多样式参数
## 1.0.0(2021-07-25)
无限树形结构组件。支持搜索、面包屑类型导航、选择。
uni_modules/luyj-tree/components/luyj-tree-search/icon.css
浏览文件 @
9cb7baf1
...
@@ -13,6 +13,11 @@
...
@@ -13,6 +13,11 @@
-moz-osx-font-smoothing
:
grayscale
;
-moz-osx-font-smoothing
:
grayscale
;
}
}
/* 清除图标 */
.icon-clear
:before
{
content
:
'\e606'
;
}
.icon-banxuanzhongshousuo1-shi
:before
{
.icon-banxuanzhongshousuo1-shi
:before
{
content
:
"\e682"
;
content
:
"\e682"
;
}
}
...
@@ -36,7 +41,6 @@
...
@@ -36,7 +41,6 @@
.icon-xuanzhong1
:before
{
.icon-xuanzhong1
:before
{
content
:
"\e62d"
;
content
:
"\e62d"
;
}
}
.icon-xuanzhong2
:before
{
.icon-xuanzhong2
:before
{
content
:
"\e656"
;
content
:
"\e656"
;
}
}
...
...
uni_modules/luyj-tree/components/luyj-tree-search/luyj-tree-search.vue
浏览文件 @
9cb7baf1
<
template
>
<
template
>
<view
class=
"tmp-box"
>
<view>
<!-- 搜索插件 -->
<view
class=
'filterBox'
:style=
"
{'background-color' : backgroundColor}">
<view
class=
'filterBox'
>
<view
class=
'filter-input'
:style=
"
{'background-color' :inputBackgroundColor ,'border-radius':radius + 'rpx'}">
<view
class=
'filter-input'
>
<!-- 左侧搜索图标 -->
<text
style=
"color: #b8b8b8;"
class=
"iconfont icon-sousuo filterImg"
/>
<text
:style=
"
{'color':iconColor}" class="iconfont icon-sousuo filterImg">
</text>
<input
class=
"text"
type=
'text'
v-model=
"inputVal"
confirm-type=
"搜索"
@
confirm=
'handleFllter'
:placeholder=
'placeholder'
></input>
<!-- 输入框内容 -->
<input
class=
"text"
type=
'text'
v-model=
"inputVal"
confirm-type=
"搜索"
:placeholder=
'placeholder'
:placeholder-style=
"placeholderStyle"
:maxlength=
"maxlength"
@
input=
"handleInput"
@
focus=
"handleFocus"
@
blur=
"handleBlur"
@
confirm=
'handleFllter'
></input>
<!-- 清除按钮 -->
<view
v-if=
"clearable"
class=
"padding-left-sm"
@
click=
"clears"
>
<text
:style=
"
{'color':iconColor}" class="iconfont icon-clear filterImg">
</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
/**
/**
* 树形图的搜索框样式
* 无限级树的搜索框组件
* @property {String} placeholder 搜索框提示内容
* @description 无限级树的搜索框组件
* @property {String} backgroundColor 背景色(默认#FFFFFF)
* @property {String} inputBackgroundColor 输入框背景色(默认#EEEFF0)
* @property {Number} radius 输入框圆角,单位rpx(默认40)
* @property {String} placeholder 输入框为空时占位符(默认'搜索')
* @property {String} placeholderStyle placehoder的样式
* @property {Number} maxlength 最大输入长度 ,设置为 -1 的时候不限制最大长度(默认值140)
* @property {String} iconColor 图标颜色(默认#B8B8B8)
* @property {Boolean} clearable 是否显示清除按钮 是否显示清除按钮(默认true)
* @event {Function()} input 输入框内容编号时触发
* @event {Function()} focus 输入框获得焦点时触发
* @event {Function()} blur 输入框失去焦点时触发
* @event {Function()} confirm 提交输入框内容是触发
* @event {Function()} clear 清空输入框内容时触发
*/
*/
export
default
{
export
default
{
name
:
'
luyj-tree-search
'
,
name
:
'
luyj-tree-search
'
,
props
:{
props
:
{
placeholder
:{
// 背景色
backgroundColor
:
{
type
:
String
,
default
:
'
#FFFFFF
'
},
// 输入框背景颜色
inputBackgroundColor
:
{
type
:
String
,
type
:
String
,
default
:
'
搜索
'
default
:
'
#EEEFF0
'
},
// 输入框圆角
radius
:{
type
:
Number
,
default
:
40
},
// 输入框为空时占位符
placeholder
:
{
type
:
String
,
default
:
'
搜索
'
},
// placeholder的样式
placeholderStyle
:
{
type
:
String
,
default
:
''
},
// 最大输入长度 ,设置为 -1 的时候不限制最大长度
maxlength
:{
type
:
Number
,
type
:
140
},
// 图标的颜色
iconColor
:
{
type
:
String
,
default
:
'
#B8B8B8
'
},
// 是否显示清除按钮
clearable
:{
type
:
Boolean
,
default
:
true
}
}
},
},
data
()
{
data
()
{
...
@@ -29,12 +87,36 @@
...
@@ -29,12 +87,36 @@
};
};
},
},
methods
:
{
methods
:
{
handleFllter
(
e
)
{
/** 输入框变化时方法
this
.
$emit
(
"
confirm
"
,
e
.
detail
.
value
)
* @param {Object} e
*/
handleInput
:
function
(
e
)
{
this
.
$emit
(
"
input
"
,
e
)
},
/** 输入框聚焦时触发
* @param {Object} e
*/
handleFocus
:
function
(
e
)
{
this
.
$emit
(
"
focus
"
,
e
)
},
},
clears
(){
/** 输入框失去焦点时触发
console
.
log
(
this
.
inputVal
)
* @param {Object} e
this
.
inputVal
=
""
*/
handleBlur
:
function
(
e
)
{
this
.
$emit
(
"
blur
"
,
e
)
},
/** 提交内容时触发
* @param {Object} e
*/
handleFllter
:
function
(
e
)
{
this
.
$emit
(
"
confirm
"
,
e
)
},
/**
* 清空输入框内容
*/
clears
:
function
()
{
this
.
inputVal
=
""
;
this
.
$emit
(
"
clear
"
,
this
.
inputVal
)
}
}
},
},
}
}
...
@@ -43,33 +125,36 @@
...
@@ -43,33 +125,36 @@
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.filterBox
{
.filterBox
{
padding
:
15rpx
32rpx
;
padding
:
15rpx
32rpx
;
background-color
:
#fff
;
.filter-input
{
.filter-input
{
height
:
80rpx
;
height
:
80rpx
;
background-color
:
#eeeff0
;
border-radius
:
40rpx
;
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
padding-left
:
40rpx
;
padding-left
:
40rpx
;
.filterImg
{
.filterImg
{
width
:
32rpx
;
width
:
32rpx
;
height
:
32rpx
;
height
:
32rpx
;
margin-right
:
20rpx
;
margin-right
:
20rpx
;
margin-bottom
:
5rpx
;
margin-bottom
:
5rpx
;
}
}
.filterImgs
{
.filterImgs
{
width
:
32rpx
;
width
:
32rpx
;
height
:
32rpx
;
height
:
32rpx
;
}
}
.text
{
.text
{
width
:
84%
;
width
:
100%
;
background-color
:
#eeeff0
;
font-size
:
32rpx
;
font-size
:
32rpx
;
color
:
#000
;
color
:
#000
;
}
}
}
}
}
}
// 添加左侧padding(用于扩大图标范围)
.padding-left-sm
{
padding-left
:
20rpx
;
}
@import
url("icon.css")
;
@import
url("icon.css")
;
</
style
>
</
style
>
uni_modules/luyj-tree/components/luyj-tree/luyj-tree.vue
浏览文件 @
9cb7baf1
...
@@ -2,7 +2,9 @@
...
@@ -2,7 +2,9 @@
<view>
<view>
<!-- 搜索框 -->
<!-- 搜索框 -->
<view
class=
"header"
>
<view
class=
"header"
>
<luyj-tree-search
v-if=
"searchIf"
ref=
"sea"
@
confirm=
"confirmSearch"
/>
<luyj-tree-search
v-if=
"searchIf"
ref=
"sea"
:backgroundColor=
"searchBackgroundColor"
:inputBackgroundColor=
"searchInputBackgroundColor"
:radius=
"searchRadius"
:iconColor=
"searchIconColor"
:placeholder=
"searchPlaceholder"
:placeholderStyle=
"searchPlaceholderStyle"
:maxlength=
"searchMaxlength"
:clearable=
"searchClearable"
@
confirm=
"confirmSearch"
/>
<view
class=
"title"
>
<view
class=
"title"
>
<scroll-view
scroll-x
style=
"width: 100%;white-space: nowrap;"
:scroll-left=
"scrollLeft"
>
<scroll-view
scroll-x
style=
"width: 100%;white-space: nowrap;"
:scroll-left=
"scrollLeft"
>
<view
v-for=
"(item,index) in tree_stack"
class=
"inline-item"
:key=
"index"
>
<view
v-for=
"(item,index) in tree_stack"
class=
"inline-item"
:key=
"index"
>
...
@@ -50,16 +52,18 @@
...
@@ -50,16 +52,18 @@
<i
v-if=
"newCheckList.length>0&&item.id == newCheckList[0].id"
class=
"txt iconfont icon-selected"
/>
<i
v-if=
"newCheckList.length>0&&item.id == newCheckList[0].id"
class=
"txt iconfont icon-selected"
/>
<i
style=
"color: #b8b8b8;"
v-else
class=
"txt iconfont icon-weixuanzhong1"
/>
<i
style=
"color: #b8b8b8;"
v-else
class=
"txt iconfont icon-weixuanzhong1"
/>
</view>
</view>
<view
v-if=
"item.user"
@
click.stop=
"checkboxChange(item,index,item.bx,item.qx)"
><slot
v-bind:item=
"item"
></slot></view>
<!-- body slot -->
<slot
v-else
v-bind:item=
"item"
>
<view
v-if=
"item.user"
@
click.stop=
"checkboxChange(item,index,item.bx,item.qx)"
>
</slot>
<slot
v-bind:item=
"item"
name=
"body"
></slot>
</view>
<slot
v-else
v-bind:item=
"item"
name=
"body"
></slot>
<view
class=
"right"
><i
v-if=
"!item.user&&item.children.length>0"
class=
"iconfont icon-z043"
></i></view>
<view
class=
"right"
><i
v-if=
"!item.user&&item.children.length>0"
class=
"iconfont icon-z043"
></i></view>
</label>
</label>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 确定按钮 -->
<!-- 确定按钮 -->
<view
class=
"btn box_sizing"
>
<view
v-if=
"isCheck"
class=
"btn box_sizing"
>
<button
class=
"sureBtn"
type=
"primary"
@
click=
"backConfirm"
>
确认
</button>
<button
class=
"sureBtn"
type=
"primary"
@
click=
"backConfirm"
>
确认
</button>
</view>
</view>
</view>
</view>
...
@@ -69,10 +73,18 @@
...
@@ -69,10 +73,18 @@
/**
/**
* luyj-tree 无限树形结构树、支持搜索选择。
* luyj-tree 无限树形结构树、支持搜索选择。
* @description 无限树形结构组件。支持搜索、选择(包括单选、多选)。面包屑类型导航。原插件地址:https://ext.dcloud.net.cn/plugin?id=2423。
* @description 无限树形结构组件。支持搜索、选择(包括单选、多选)。面包屑类型导航。原插件地址:https://ext.dcloud.net.cn/plugin?id=2423。
* @tutorial url
* @tutorial url https://ext.dcloud.net.cn/plugin?name=luyj-tree
* @property {Boolean} searchIf 是否开启搜索 (默认值true)
* @property {String} searchBackgroundColor 搜索框背景色(默认#FFFFFF)
* @property {String} searchInputBackgroundColor 搜索框的输入框背景色(默认#EEEFF0)
* @property {Number} searchRadius 搜索框的圆角值,单位rpx(默认40)
* @property {String} searchPlaceholder 搜索框的内容物空时提示内容
* @property {String} searchPlaceholderStyle 搜索框的placehoder的样式
* @property {Number} searchMaxlength 搜索框的最大输入长度 ,设置为 -1 的时候不限制最大长度
* @property {String} searchIconColor 搜索框的图标颜色(默认#B8B8B8)
* @property {Boolean} searchPlaceholder 搜索框是否显示清除按钮
* @property {Array} trees 传入的树形结构,每个对象必须包含唯一的id值(默认值【】)
* @property {Array} trees 传入的树形结构,每个对象必须包含唯一的id值(默认值【】)
* @property {Boolean} isCheck 是否开启选择操作(默认值false)
* @property {Boolean} isCheck 是否开启选择操作(默认值false)
* @property {Boolean} searchIf 是否开启搜索 (默认值true)
* @property {Number} max 最大的level层数(默认值-1)
* @property {Number} max 最大的level层数(默认值-1)
* @property {Array} checkList 选中列表
* @property {Array} checkList 选中列表
* @property {Boolean} parent 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)(默认值false)
* @property {Boolean} parent 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)(默认值false)
...
@@ -88,6 +100,51 @@
...
@@ -88,6 +100,51 @@
export
default
{
export
default
{
name
:
"
luyj-tree
"
,
name
:
"
luyj-tree
"
,
props
:
{
props
:
{
// 是否开启搜索
searchIf
:
{
type
:
Boolean
,
default
:
()
=>
true
},
// 搜索框背景色
searchBackgroundColor
:
{
type
:
String
,
default
:
'
#FFFFFF
'
},
// 搜索框的输入框内背景颜色
searchInputBackgroundColor
:
{
type
:
String
,
default
:
'
#EEEFF0
'
},
// 搜索框的图标的颜色
searchIconColor
:
{
type
:
String
,
default
:
'
#B8B8B8
'
},
// 搜索框的圆角值,单位rpx
searchRadius
:{
type
:
Number
,
default
:
40
},
// 搜索框的提示placeholder内容
searchPlaceholder
:
{
type
:
String
,
default
:
'
搜索
'
},
// 搜索框的placeholder的样式
searchPlaceholderStyle
:
{
type
:
String
,
default
:
''
},
// 搜索框最大输入长度 ,设置为 -1 的时候不限制最大长度
searchMaxlength
:{
type
:
Number
,
type
:
140
},
// 搜索框是否显示清除按钮
searchClearable
:{
type
:
Boolean
,
default
:
true
},
// 传入的树形结构数据,每个对象必须包含唯一的id值
// 传入的树形结构数据,每个对象必须包含唯一的id值
trees
:
{
trees
:
{
type
:
Array
,
type
:
Array
,
...
@@ -102,11 +159,7 @@
...
@@ -102,11 +159,7 @@
return
false
return
false
}
}
},
},
// 是否开启搜索
searchIf
:
{
type
:
Boolean
,
default
:
()
=>
true
},
// 最大level层数
// 最大level层数
max
:
{
max
:
{
type
:
Number
,
type
:
Number
,
...
@@ -305,8 +358,11 @@
...
@@ -305,8 +358,11 @@
if
(
this
.
props
.
checkStrictly
)
this
.
checkAllChoose
();
if
(
this
.
props
.
checkStrictly
)
this
.
checkAllChoose
();
this
.
$forceUpdate
()
this
.
$forceUpdate
()
},
},
//搜索
/** 搜索时方法
confirmSearch
(
val
)
{
* @param {Object} e
*/
confirmSearch
(
e
)
{
var
val
=
e
.
detail
.
value
;
this
.
searchResult
=
[]
this
.
searchResult
=
[]
this
.
search
(
this
.
allData
,
val
)
this
.
search
(
this
.
allData
,
val
)
this
.
isre
=
true
this
.
isre
=
true
...
...
uni_modules/luyj-tree/package.json
浏览文件 @
9cb7baf1
{
{
"id"
:
"luyj-tree"
,
"id"
:
"luyj-tree"
,
"displayName"
:
"luyj-tree"
,
"displayName"
:
"luyj-tree
无限级树形结构。
"
,
"version"
:
"1.
0
.0"
,
"version"
:
"1.
1
.0"
,
"description"
:
"
luyj-tree
"
,
"description"
:
"
无限极树形结构。支持搜索、面包屑导航、单项选择、多项选择。
"
,
"keywords"
:
[
"keywords"
:
[
"luyj-tree"
"luyj-tree"
],
],
"repository"
:
""
,
"repository"
:
"
https://github.com/luyanjie00436/luyj-tree-app
"
,
"engines"
:
{
"engines"
:
{
"HBuilderX"
:
"^3.1.0"
"HBuilderX"
:
"^3.1.0"
},
},
...
@@ -27,9 +27,9 @@
...
@@ -27,9 +27,9 @@
"qq"
:
""
"qq"
:
""
},
},
"declaration"
:
{
"declaration"
:
{
"ads"
:
""
,
"ads"
:
"
无
"
,
"data"
:
""
,
"data"
:
"
无
"
,
"permissions"
:
""
"permissions"
:
"
无
"
},
},
"npmurl"
:
""
"npmurl"
:
""
},
},
...
@@ -38,8 +38,8 @@
...
@@ -38,8 +38,8 @@
"encrypt"
:
[],
"encrypt"
:
[],
"platforms"
:
{
"platforms"
:
{
"cloud"
:
{
"cloud"
:
{
"tcb"
:
"
u
"
,
"tcb"
:
"
y
"
,
"aliyun"
:
"
u
"
"aliyun"
:
"
y
"
},
},
"client"
:
{
"client"
:
{
"App"
:
{
"App"
:
{
...
@@ -56,15 +56,17 @@
...
@@ -56,15 +56,17 @@
"Chrome"
:
"y"
,
"Chrome"
:
"y"
,
"IE"
:
"u"
,
"IE"
:
"u"
,
"Edge"
:
"u"
,
"Edge"
:
"u"
,
"Firefox"
:
"
u
"
,
"Firefox"
:
"
y
"
,
"Safari"
:
"u"
"Safari"
:
"u"
},
},
"小程序"
:
{
"小程序"
:
{
"微信"
:
"y"
,
"微信"
:
{
"minVersion"
:
"2.18.1"
},
"阿里"
:
"u"
,
"阿里"
:
"u"
,
"百度"
:
"u"
,
"百度"
:
"u"
,
"字节跳动"
:
"u"
,
"字节跳动"
:
"u"
,
"QQ"
:
"
y
"
"QQ"
:
"
u
"
},
},
"快应用"
:
{
"快应用"
:
{
"华为"
:
"u"
,
"华为"
:
"u"
,
...
...
uni_modules/luyj-tree/readme.md
浏览文件 @
9cb7baf1
...
@@ -4,6 +4,7 @@
...
@@ -4,6 +4,7 @@
## 说明
## 说明
本插件是基于
[
xiaolu-tree
](
https://ext.dcloud.net.cn/plugin?id=2423
)
进行了uni_modules模块化。并进行了一些修改。
本插件是基于
[
xiaolu-tree
](
https://ext.dcloud.net.cn/plugin?id=2423
)
进行了uni_modules模块化。并进行了一些修改。
插件在微信小程序、h5端浏览器亲测可用。其他平台,理论上可用。
### 安装方式
### 安装方式
...
@@ -39,7 +40,7 @@ export default {
...
@@ -39,7 +40,7 @@ export default {
### 功能说明
### 功能说明
1.
树形结构展示。
1.
树形结构展示。
2.
包含搜索框。能够
直接搜索树形图。
子文件的内容。
2.
包含搜索框。能够
自定义搜索框的样式,能够直接搜索树形图、
子文件的内容。
3.
包含面包屑导航。
3.
包含面包屑导航。
4.
可以仅仅展示或选择树形的项内容。
4.
可以仅仅展示或选择树形的项内容。
5.
单选状态可以回显选中位置路径。
5.
单选状态可以回显选中位置路径。
...
@@ -51,9 +52,17 @@ export default {
...
@@ -51,9 +52,17 @@ export default {
属性名 |类型 |默认值 | 说明
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
:-: |:-: |:-: | :-:
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值
trees |Array |[] | trees 传入的树形结构,每个对象必须包含唯一的id值
isCheck |Boolean |false | 是否开启选择操作
isCheck |Boolean |false | 是否开启选择操作
searchIf |Boolean |true | 是否开启搜索
max |Number |-1 | 最大的level层数
max |Number |-1 | 最大的level层数
checkList |Array |[] | 选中的列表
checkList |Array |[] | 选中的列表
parent |Boolean |false | 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)
parent |Boolean |false | 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)
...
@@ -74,3 +83,40 @@ nodes |Boolean |true | 在单选模式下,nodes为false时,可以选择
...
@@ -74,3 +83,40 @@ nodes |Boolean |true | 在单选模式下,nodes为false时,可以选择
事件名 |说明 |返回值
事件名 |说明 |返回值
:-: |:-: |:-:
:-: |:-: |:-:
@selectitem |点击项目触发的事件 |参数(索引,具体项目)
@selectitem |点击项目触发的事件 |参数(索引,具体项目)
# luyj-tree-search
### 说明
``luyj-tree-search``
是
``luyj-tree-search``
内的组件,可以单独引用。
### 基本用法
###
在
``template``
中使用组件
```
html
<luyj-tree-search></luyj-tree-search>
```
### 属性
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
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 |清空输入框内容时,触发事件 | ''