封装组件
<template>
<view class="uni-combox">
<!-- 输入查询选择器 -->
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder" @click="toggleSelector" :disabled="isDisabled" v-model="inputVal"
@input="onInput" @focus="onFocus" @blur="onBlur" />
<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" ></uni-icons>
<view class="uni-combox__selector" v-if="showSelector">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)"
:style="isCheck(index)?'color:'+selectColor+';background-color:'+selectBgColor+';':'color:'+color+';'">
<text>{{isJSON?(isAloneShow?item[keyName]:item[keyCode]+' _ '+item[keyName]):item}}</text>
<!-- <text>{{isJSON?isAloneShow?(item.enumCode?item.enumCode: item.usercode):(item.enumCode?(item.enumCode+' _ '+item.enumValue) : item.usercode+' _ '+item.username):item}}</text> -->
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
/**
* Combox 组合输入框
* @description 组合输入框一般用于既可以输入也可以选择的场景
* @property {String} label 左侧文字
* @property {String} labelWidth 左侧内容宽度
* @property {String} placeholder 输入框占位符
* @property {Array} candidates 候选项列表
* @property {String} emptyTips 筛选结果为空时显示的文字
* @property {String} value 单选时组合框的初始值
* @property {Array} initValue 多选时组合框的初始值(下标集合)
* @property {String} keyName json数组显示的字段值
* @property {String} keyCode json数组传参的字段值
* @property {Boolean} isJSON 是否是json数组,默认不是isAloneShow
* @property {Boolean} isAloneShow 是否单独显示
* @property {Boolean} isDisabled 是否是禁用输入,默认不禁用
* @property {Boolean} isCheckBox 是否是多选,默认不是,多选时不能输入查询
* @property {String} color 默认字体颜色,默认#000000
* @property {String} selectColor 选中字体颜色,默认#0081ff
* @property {String} selectBgColor 选中背景颜色,默认#e8e8e8
*/
export default {
name: 'comboxSearch',
props: {
label: {
type: String,
default: ''
},
labelWidth: {
type: String,
default: 'auto'
},
placeholder: {
type: String,
default: ''
},
candidates: {
type: Array,
default () {
return []
}
},
emptyTips: {
type: String,
default: '无匹配项'
},
value: {
type: String,
default: ''
},
initValue: {
type: Array,
default: null
},
keyName: {
type: String,
default: ''
},
keyCode: {
type: String,
default: ''
},
isJSON: {
type: Boolean,
default: false
},
isAloneShow: {
type: Boolean,
default: false
},
isDisabled: {
type: Boolean,
default: false
},
isCheckBox: {
type: Boolean,
default: false
},
color: {
default: "#000000",
type: String
},
selectColor: {
default: "#0081ff",
type: String
},
selectBgColor: {
default: "#e8e8e8",
type: String
},
indexVal:{
type:[Number,String],
default:()=>{
return 0
}
}
},
data() {
return {
showSelector: false,
inputVal: '',
arrays: [],
gid: `sm-org-dropDown-${(new Date()).getTime()}${Math.random()}`
}
},
computed: {
labelStyle() {
if (this.labelWidth === 'auto') {
return {}
}
return {
width: this.labelWidth
}
},
//下拉列表数据
filterCandidates() {
let _this = this
if (!this.isDisabled) {
if (this.isJSON) {
let index = 0;
return this.candidates.filter((item) => {
item.index = index;
index++;
return item[_this.keyName].indexOf(this.inputVal) > -1 || item[_this.keyCode].indexOf(this.inputVal) > -1
})
} else {
return this.candidates.filter((item) => {
return item.indexOf(this.inputVal) > -1
})
}
} else {
if (this.isJSON) {
let index = 0;
return this.candidates.filter((item) => {
item.index = index;
index++;
return item[_this.keyCode] != undefined ||item[_this.keyName] != undefined;
})
} else {
return this.candidates
}
}
},
filterCandidatesLength() {
return this.filterCandidates.length
}
},
created() {
if (this.initValue != null) {
this.arrays = this.initValue;
this.inputVal = this.getInpuevals();
// this.inputVal = '北京';
}
//在created的时候,给子组件放置一个监听,这个时候只是监听器被建立,此时这段代码不会生效
//uni.$on接收一个sm-org-dropDown-show的广播
uni.$on('sm-org-dropDown-show', (targetId) => {
//接收广播,当该组件处于下拉框被打开的状态,并且跟下一个被点击的下拉框的gid不同时,将该组件的下拉框关闭,产生一个互斥效果。
if (this.showSelector && this.gid != targetId) {
this.showSelector = false
}
})
},
//当子组件销毁的时候,将建立的监听销毁,这里不会影响代码效果,但是在多次反复引用组件时,会在根节点定义越来越多的监听,长此以往影响性能,所以在不用的时候及时销毁,养成好习惯
beforeDestroy() {
uni.$off('sm-org-dropDown-show')
},
watch: {
value: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
}
},
methods: {
toggleSelector() {
this.showSelector = !this.showSelector
if (this.showSelector) {
uni.$emit('sm-org-dropDown-show', this.gid)
}
},
onFocus() {
this.showSelector = true;
uni.$emit('sm-org-dropDown-show', this.gid)
},
onBlur() {
/* setTimeout(() => {
this.showSelector = false;
}, 50) */
},
onSelectorClick(index) {
if (this.isCheckBox) {
let flag = this.arrays.indexOf(index);
if (flag != -1) {
let x = (this.arrays || []).findIndex((item) => item === index)
this.arrays.splice(x, 1);
} else {
this.arrays.push(index);
}
this.inputVal = this.getInpuevals();
if (this.isJSON) {
this.$emit('getValue', this.arrays);
} else {
this.$emit('getValue', this.trimSpace(this.inputVal.split(" ")));
}
} else {
this.showSelector = false
if (this.isJSON) {
this.$emit('getValue', this.filterCandidates[index].index);
this.inputVal = this.filterCandidates[index].username;
} else {
this.$emit('getValue', this.filterCandidates[index]);
this.inputVal = this.filterCandidates[index]
}
}
this.$emit('inputVal', this.inputVal,this.indexVal)
},
trimSpace(array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == "") {
array.splice(i, 1);
i = i - 1;
}
}
return array;
},
onInput() {
setTimeout(() => {
// this.$emit('input', this.inputVal)
this.$emit('inputVal', this.inputVal)
})
},
clearInputValue() {
this.inputVal = "";
this.showSelector = false;
},
getInpuevals() {
if (this.arrays.length == 0) {
this.inputVal = "";
} else {
this.arrays.sort(function(a, b) {
return a - b
})
this.inputVal = "";
if (this.isJSON) {
this.arrays.forEach(v => {
this.inputVal += this.candidates[v].username+ ",";
});
} else {
this.arrays.forEach(v => {
this.inputVal += this.candidates[v] + " ";
});
}
}
if(this.isJSON){
this.inputVal = this.inputVal.substr(0, this.inputVal.length - 1);
}
return this.inputVal;
},
isCheck(index) {
return this.arrays.indexOf(index) != -1;
}
}
}
</script>
<style scoped>
.uni-combox {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
height: 40px;
flex-direction: row;
align-items: center;
width: 100% ;
/* border-bottom: solid 1px #DDDDDD; */
}
.uni-combox__label {
font-size: 16px;
line-height: 22px;
padding-right: 10px;
color: #999999;
}
.uni-combox__input-box {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-combox__input {
flex: 1;
font-size: 16px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-arrow {
padding: 10px;
}
.uni-combox__selector {
box-sizing: border-box;
position: absolute;
top: 42px;
left: 0;
width: 100%;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
z-index: 2;
}
.uni-combox__selector-scroll {
max-height: 200px;
box-sizing: border-box;
}
.uni-combox__selector::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: solid 6px #FFFFFF;
border-right: solid 6px transparent;
border-left: solid 6px transparent;
left: 50%;
top: -6px;
margin-left: -6px;
}
.uni-combox__selector-empty,
.uni-combox__selector-item {
/* #ifdef APP-NVUE */
display: flex;
/* #endif */
line-height: 36px;
font-size: 14px;
text-align: center;
border-bottom: solid 1px #DDDDDD;
/* margin: 0px 10px; */
}
.uni-combox__selector-empty:last-child,
.uni-combox__selector-item:last-child {
border-bottom: none;
}
</style>
readme.md
<template>
<view class="allInputOrder">
<uni-forms label-align="right">
<uni-forms-item label="推送人" name="pusher">
<combox-search
label=""
labelWidth="100px"
:value="defaulPusher"
emptyTips="无匹配选项"
:isJSON="true"
:keyName="keyName"
:keyCode="keyCode"
:candidates="candidates"
placeholder="请选择"
@inputVal="inputVal"
@getValue="getValue($event,'json')"
style="width: 90%;display: inline-block;"
></combox-search>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
import comboxSearch from "@/components/cuihai-combox/common-combox.vue"
import {getUserList,} from "@/api/InjectionMoldingApi.js"//烘料扫码,提交
export default{
data(){
return{
candidates: [{usercode:uni.getStorageSync('usercode'),username:uni.getStorageSync('username')}], // 查询列表
keyName:'username', // 显示字段
keyCode:'usercode', // 上传字段
defaulPusher:uni.getStorageSync('username'), // 默认显示
form:{
pusher:uni.getStorageSync('usercode'),//推送人
},
}
},
components:{
comboxSearch
},
methods:{
// 点击选择的值
getValue(e,type){
switch (type){
case 'json':
this.form.pusher=this.candidates[e].usercode; // usercode为定义的字段,点击选择的值赋值给传参
break;
case 'common':
this.city=e;
break;
default:
break;
}
console.log(e);
},
// 输入框参数,
inputVal(data){
this.getUserList(data)
},
// 查询接口
getUserList(val){
let data = {
keyword:val,
pageNum:1,
pageSize:5
}
getUserList(data).then(res=>{
if(res.code == 'Y'){
this.candidates = [];
res.data.list.map(item =>{
this.candidates.push({
usercode:item.usercode,
username:item.username
})
})
}
}).catch(()=>{
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .uni-combox{
width: 80%;
border: solid 1px #DDDDDD;
border-radius: 3px;
}
</style>
标签:uniapp,封装,String,item,default,index,inputVal,uni,远程
From: https://www.cnblogs.com/axingya/p/17671852.html