初次提交
This commit is contained in:
346
uni_modules/luyj-tree/components/luyj-tree-search/icon.css
Normal file
346
uni_modules/luyj-tree/components/luyj-tree-search/icon.css
Normal file
@ -0,0 +1,346 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2009600 */
|
||||
src: url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.woff2?t=1620633089023') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.woff?t=1620633089023') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.ttf?t=1620633089023') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 清除图标 */
|
||||
.icon-clear:before{
|
||||
content: '\e606';
|
||||
}
|
||||
|
||||
.icon-banxuanzhongshousuo1-shi:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.icon-xuanzhong3:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.icon-weixuanzhong2:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-danxuanxuanzhong:before {
|
||||
content: "\e631";
|
||||
}
|
||||
|
||||
.icon-xuanzhong4:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-xuanzhong1:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
.icon-xuanzhong2:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.icon-selected:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-weixuanzhong1:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-xingzhuang6kaobei3-copy-copy:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-radio-checked:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-huifu:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.icon-dizhi:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.icon-kuaijiecaidan:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-z043:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-guanbi:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-xuanze:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-caidanzhaolinggan:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-xitongshezhi:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-xitongshezhi1:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-lunbo:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.icon-shuping:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.icon-tongzhi:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-pinglunguanlishezhi:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.icon-icon:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-liuyanguanli:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-xuanzhong:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.icon--:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-tushu:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-huishouzhan:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-yonghutouxiang:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-liebiao:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.icon-fenlei:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-tushu1:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-tubiao-:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-weixuanze:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-tushujieyue:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.icon-lunbo1:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.icon-shanchu:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.icon-lunbo2:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-huaban:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.icon-kehuan:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-icon02:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-huishouzhan1:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-huishouzhan2:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-xingzhuang:before {
|
||||
content: "\e625";
|
||||
}
|
||||
|
||||
.icon-lunbobankuai:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.icon-shangchuan:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-yonghu:before {
|
||||
content: "\e761";
|
||||
}
|
||||
|
||||
.icon-tongzhi1:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-jingsong:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.icon-fenlei1:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.icon-xieshupingicon:before {
|
||||
content: "\e72d";
|
||||
}
|
||||
|
||||
.icon-liuyan:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.icon-weixuanzhong:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-youxiang:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-lunboguanggao:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.icon-xuanze1:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-chushaixuanxiang:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-liuyanguanli1:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-shanchu1:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-huishouzhan3:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-shangchuan1:before {
|
||||
content: "\e823";
|
||||
}
|
||||
|
||||
.icon-huishouzhan4:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-chuangzuo:before {
|
||||
content: "\e8ad";
|
||||
}
|
||||
|
||||
.icon-dianzan:before {
|
||||
content: "\e8ae";
|
||||
}
|
||||
|
||||
.icon-paihangbang:before {
|
||||
content: "\e8b3";
|
||||
}
|
||||
|
||||
.icon-shouye:before {
|
||||
content: "\e8b9";
|
||||
}
|
||||
|
||||
.icon-shoucang:before {
|
||||
content: "\e8c6";
|
||||
}
|
||||
|
||||
.icon-addApp:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.icon-huishouzhan5:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.icon-add1:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-shoucang1:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-canshutongji:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.icon-rizhiguanli:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-shanchu2:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.icon-xinzeng:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.icon-zhankailiebiao:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-xiala-copy:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-shangla:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.icon-xianxingshezhi:before {
|
||||
content: "\e611";
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='filterBox' :style="{'background-color' : backgroundColor}">
|
||||
<view class='filter-input'
|
||||
:style="{'background-color' :inputBackgroundColor ,'border-radius':radius + 'rpx'}">
|
||||
<!-- 左侧搜索图标 -->
|
||||
<u-icon name="search" color="#009C77!important" size="40"></u-icon>
|
||||
<!-- 输入框内容 -->
|
||||
<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'/>
|
||||
<!-- 清除按钮 -->
|
||||
<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>
|
||||
/**
|
||||
* 无限级树的搜索框组件
|
||||
* @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: {
|
||||
// 背景色
|
||||
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,
|
||||
default: 140
|
||||
},
|
||||
// 图标的颜色
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#009C77'
|
||||
},
|
||||
// 是否显示清除按钮
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputVal: "", // 输入内容
|
||||
};
|
||||
},
|
||||
components: {
|
||||
test: function() {
|
||||
return 120;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 输入框变化时方法
|
||||
* @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)
|
||||
},
|
||||
/** 提交内容时触发
|
||||
* @param {Object} e
|
||||
*/
|
||||
handleFllter: function(e) {
|
||||
this.$emit("confirm", e)
|
||||
},
|
||||
/**
|
||||
* 清空输入框内容
|
||||
*/
|
||||
clears: function() {
|
||||
this.inputVal = "";
|
||||
this.$emit("clear", this.inputVal)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filterBox {
|
||||
padding: 15rpx 32rpx;
|
||||
|
||||
.filter-input {
|
||||
height: 80rpx;
|
||||
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: 100%;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加左侧padding(用于扩大图标范围)
|
||||
.padding-left-sm {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
@import url("icon.css");
|
||||
</style>
|
||||
Reference in New Issue
Block a user