common/data.js

@@ -1112,7 +1112,91 @@ let dataList = [{
 			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
+		}]
+	},
+	{
+		id: 66421777884366998,
+		name: "校长44443",
+		pid: "-1",
+		checked: false,
+		user: false,
+		children: [{
+			id: 88565444444346556678,
+			name: "小陆",
+			checked: false,
+			pid: "-1",
+			user: true
+		}]
+	},
 
 ]
 

pages.json

@@ -15,6 +15,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/search-test/luyj-search-test",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "输入框",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -29,6 +38,11 @@
 				"name": "首页", //模式名称
 				"path": "pages/index/index", //启动页面，必选
 				"query": "" //启动参数，在页面的onLoad函数里面得到
+			},
+			{
+				"name": "测试-搜索", //模式名称
+				"path": "pages/search-test/luyj-search-test", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
 			}			
 		]
 	}

pages/chooseUser/chooseUser.vue

 <template>
 	<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">
 			<!-- 内容插槽 -->
-			<view>
+			<!-- <view>
 				<view class="content-item">
 					<view class="word">{{item.name}}</view>
 				</view>
-			</view>
+			</view> -->
+			<template slot="body">
+				<view class="content-item">
+					<view class="word">{{item.name}}</view>
+				</view>
+			</template>
 		</luyj-tree>
 	</view>
 </template>

pages/search-test/luyj-search-test.vue

+<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

+## 1.1.0（2021-07-27）
+为树的输入框，添加更多样式参数
+## 1.0.0（2021-07-25）
+无限树形结构组件。支持搜索、面包屑类型导航、选择。

uni_modules/luyj-tree/components/luyj-tree-search/icon.css

@@ -13,6 +13,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* 清除图标 */
+.icon-clear:before{
+	content: '\e606';
+}
+
 .icon-banxuanzhongshousuo1-shi:before {
   content: "\e682";
 }
@@ -36,7 +41,6 @@
 .icon-xuanzhong1:before {
   content: "\e62d";
 }
-
 .icon-xuanzhong2:before {
   content: "\e656";
 }

uni_modules/luyj-tree/components/luyj-tree-search/luyj-tree-search.vue

 <template>
-	<view class="tmp-box">
-		<!-- 搜索插件 -->
-		<view class='filterBox'>
-			<view class='filter-input'>
-				<text style="color: #b8b8b8;"  class="iconfont icon-sousuo filterImg"/>
-				<input class="text" type='text' v-model="inputVal" confirm-type="搜索" @confirm='handleFllter' :placeholder='placeholder'></input>
+	<view>
+		<view class='filterBox' :style="{'background-color' : backgroundColor}">
+			<view class='filter-input' :style="{'background-color' :inputBackgroundColor ,'border-radius':radius + 'rpx'}">
+				<!-- 左侧搜索图标 -->
+				<text :style="{'color':iconColor}" class="iconfont icon-sousuo filterImg"></text>
+				<!-- 输入框内容 -->
+				<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>
 </template>
 
 <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 {
-		name:'luyj-tree-search',
-		props:{
-			placeholder :{
+		name: 'luyj-tree-search',
+		props: {
+			// 背景色
+			backgroundColor: {
+				type: String,
+				default: '#FFFFFF'
+			},
+			// 输入框背景颜色
+			inputBackgroundColor: {
+				type: String,
+				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:'搜索'
+				default: '#B8B8B8'
+			},
+			// 是否显示清除按钮
+			clearable :{
+				type: Boolean,
+				default:true
 			}
 		},
 		data() {
 			return {
-				inputVal: "",			// 输入内容
+				inputVal: "", // 输入内容
 			};
 		},
 		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)
+			},
+			/** 输入框失去焦点时触发
+			 * @param {Object} e
+			 */
+			handleBlur: function(e) {
+				this.$emit("blur", e)
 			},
-			clears(){
-				console.log(this.inputVal)
-				this.inputVal=""
+			/** 提交内容时触发
+			 * @param {Object} e
+			 */
+			handleFllter: function(e) {
+				this.$emit("confirm", e)
+			},
+			/**
+			 * 清空输入框内容
+			 */
+			clears: function() {
+				this.inputVal = "";
+				this.$emit("clear" , this.inputVal)
 			}
 		},
 	}
@@ -43,33 +125,36 @@
 <style lang="scss" scoped>
 	.filterBox {
 		padding: 15rpx 32rpx;
-		background-color: #fff;
+
 		.filter-input {
 			height: 80rpx;
-			background-color: #eeeff0;
-			border-radius: 40rpx;
 			display: flex;
 			align-items: center;
-			
 			padding-left: 40rpx;
+
 			.filterImg {
 				width: 32rpx;
 				height: 32rpx;
 				margin-right: 20rpx;
 				margin-bottom: 5rpx;
 			}
+
 			.filterImgs {
 				width: 32rpx;
 				height: 32rpx;
-				
 			}
+
 			.text {
-				width: 84%;
-				background-color: #eeeff0;
+				width: 100%;
 				font-size: 32rpx;
 				color: #000;
 			}
 		}
 	}
+	 // 添加左侧padding(用于扩大图标范围)
+	 .padding-left-sm{
+		padding-left: 20rpx;
+	}
+
 	@import url("icon.css");
 </style>

uni_modules/luyj-tree/components/luyj-tree/luyj-tree.vue

@@ -2,7 +2,9 @@
 	<view>
 		<!-- 搜索框 -->
 		<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">
 				<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">
@@ -50,16 +52,18 @@
 							<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"/>
 						</view>
-						<view v-if="item.user" @click.stop="checkboxChange(item,index,item.bx,item.qx)"><slot v-bind:item="item"></slot></view>
-						<slot v-else v-bind:item="item">
-						</slot>
+						<!-- body slot -->
+						<view v-if="item.user" @click.stop="checkboxChange(item,index,item.bx,item.qx)">
+							<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>
 					</label>
 				</view>
 			</view>
 		</view>
 		<!-- 确定按钮 -->
-		<view class="btn box_sizing">
+		<view v-if="isCheck" class="btn box_sizing">
 			<button class="sureBtn" type="primary" @click="backConfirm">确认</button>
 		</view>
 	</view>
@@ -69,10 +73,18 @@
 	/**
 	 * luyj-tree 无限树形结构树、支持搜索选择。
 	 * @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 {Boolean} isCheck 是否开启选择操作（默认值false）
-	 * @property {Boolean} searchIf 是否开启搜索 （默认值true）
 	 * @property {Number} max 最大的level层数（默认值-1）
 	 * @property {Array} checkList 选中列表
 	 * @property {Boolean} parent 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)(默认值false)
@@ -88,6 +100,51 @@
 	export default {
 		name: "luyj-tree",
 		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值
 			trees: {
 				type: Array,
@@ -102,11 +159,7 @@
 					return false
 				}
 			},
-			// 是否开启搜索
-			searchIf: {
-				type: Boolean,
-				default: () => true
-			},
+			
 			// 最大level层数
 			max: {
 				type: Number,
@@ -305,8 +358,11 @@
 				if (this.props.checkStrictly) this.checkAllChoose();
 				this.$forceUpdate()
 			},
-			//搜索
-			confirmSearch(val) {
+			/** 搜索时方法
+			 * @param {Object} e
+			 */
+			confirmSearch(e) {
+				var val = e.detail.value;
 				this.searchResult = []
 				this.search(this.allData, val)
 				this.isre = true

uni_modules/luyj-tree/package.json

 {
   "id": "luyj-tree",
-  "displayName": "luyj-tree",
-  "version": "1.0.0",
-  "description": "luyj-tree",
+  "displayName": "luyj-tree 无限级树形结构。",
+  "version": "1.1.0",
+  "description": "无限极树形结构。支持搜索、面包屑导航、单项选择、多项选择。",
   "keywords": [
     "luyj-tree"
 ],
-  "repository": "",
+  "repository": "https://github.com/luyanjie00436/luyj-tree-app",
   "engines": {
     "HBuilderX": "^3.1.0"
   },
@@ -27,9 +27,9 @@
       "qq": ""
     },
     "declaration": {
-      "ads": "",
-      "data": "",
-      "permissions": ""
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
     },
     "npmurl": ""
   },
@@ -38,8 +38,8 @@
     "encrypt": [],
     "platforms": {
       "cloud": {
-        "tcb": "u",
-        "aliyun": "u"
+        "tcb": "y",
+        "aliyun": "y"
       },
       "client": {
         "App": {
@@ -56,15 +56,17 @@
           "Chrome": "y",
           "IE": "u",
           "Edge": "u",
-          "Firefox": "u",
+          "Firefox": "y",
           "Safari": "u"
         },
         "小程序": {
-          "微信": "y",
+          "微信": {
+            "minVersion": "2.18.1"
+        },
           "阿里": "u",
           "百度": "u",
           "字节跳动": "u",
-          "QQ": "y"
+          "QQ": "u"
         },
         "快应用": {
           "华为": "u",

uni_modules/luyj-tree/readme.md

@@ -4,6 +4,7 @@
 ## 说明
 
 本插件是基于[xiaolu-tree](https://ext.dcloud.net.cn/plugin?id=2423)进行了uni_modules模块化。并进行了一些修改。
+插件在微信小程序、h5端浏览器亲测可用。其他平台，理论上可用。
 
 ### 安装方式
 
@@ -39,7 +40,7 @@ export default {
 ### 功能说明
 
 1. 树形结构展示。
-2. 包含搜索框。能够直接搜索树形图。子文件的内容。
+2. 包含搜索框。能够自定义搜索框的样式,能够直接搜索树形图、子文件的内容。
 3. 包含面包屑导航。
 4. 可以仅仅展示或选择树形的项内容。
 5. 单选状态可以回显选中位置路径。
@@ -49,16 +50,24 @@ export default {
 
 ### 属性
 
-属性名			|类型		|默认值		|	说明																									
-:-:				|:-:		|:-:		|	:-:	
-trees			|Array		|[]			|	trees 传入的树形结构，每个对象必须包含唯一的id值
-isCheck			|Boolean	|false		|	是否开启选择操作
-searchIf		|Boolean	|true		|	是否开启搜索
-max				|Number		|-1			|	最大的level层数
-checkList		|Array		|[]			|	选中的列表
-parent			|Boolean	|false		|	当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)
-parentList		|Array		|[]			|	父级列表
-props			|Object		|{label:'name',children:'children'}	|	参数配置，详细见下表
+属性名						|类型		|默认值		|	说明																									
+:-:							|:-:		|:-:		|	:-:	
+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 参数说明
 参数				|类型		|默认值		|	说明																									
@@ -73,4 +82,41 @@ nodes			|Boolean	|true		|	在单选模式下，nodes为false时，可以选择
 
 事件名			|说明		|返回值																								
 :-:				|:-:		|:-:
-@selectitem		|点击项目触发的事件	|参数（索引，具体项目）
+@selectitem		|点击项目触发的事件	|参数（索引，具体项目）
\ No newline at end of file
+
+# 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			|清空输入框内容时，触发事件	| ''
+