由于业务需要，需要一个可输入也可下拉的组件，看了iview没有现成的组件用，就自己封装了个小组件~~
组件input-select.vue代码：
<template>
<div class="input-container">
<!-- 显示的输入框，用v-model绑定数据，并且绑定focus事件 -->
<Input class="input-number" v-model="inputData" @on-focus="_showInputNumber" />
<!-- -->
<div class="input-dropdown-wrap">
<Dropdown trigger="custom" :visible="visibNormal" class="input-dropdown">
<Dropdown-menu slot="list">
<div class="dropdown-list">
<Row class="item" v-fot="item of arrayList" :value="item.code" :key="item.code" @click.native="_inputNumChange(item.code)">{{item.text}}</Row>
</div>
</Dropdown-menu>
</Dropdown>
</div>
</div>
</template> <script>
/**
* 输入下拉框
* @author mino
* @version 1.0.0
* @description 可输入，也可展开下拉框进行选择
*/
export default {
data() {
return {
inputData: '1', //输入框的默认值
visibNormal: false //下拉显示控制
}
},
props: {
arrayList: { //下拉列表的数据
type: Array,
default: []
}
},
watch: {
inputData(newVal) {
this.$emit('getInputNum', newVal);
}
},
methods: {
//展示下拉选项
_showInputNumber(e) {
let _this = this;
if(this.visibNormal) return; this.visibNormal = true;
//给输入框元素加入阻止冒泡事件
e.target.addEventListener('click', (e) => {
e.stopPropagation();
});
document.addEventListener('click', _this._hideNormal);
},
//下拉框列表的点击事件
_inputNumChange(data) {
this.$emit('getInputNum', data);
},
//隐藏下拉框
_hideNormal() {
let curTarget = event.target;
if(curTarget.nodeName === 'SPAN' && curTarget.classList.contains('switch)) {
return;
} this.visibNormal = false;
document.removeEventListener('click', this._hideNormal);
}
}
}
</script> <style scoped lang="less">
.input-container {
/deep/ .input-dropdown-wrap {
height: 0 !important;
overflow: hidden;
}
.dropdown-list {
height: 1.3rem;
overflow: auto;
border-bottom: .01rem solid #E4E4E4;
.item {
line-height: .25rem;
padding-left: .15rem;
&:hover {
background: grey;
}
}
}
.input-number {
width: 2.2rem;
}
.input-dropdown {
width: 2.2rem;
/deep/ .ivu-select-dropdown {
margin-top: -.2rem;
}
}
}
</style>
调用该组件的组件index.vue代码块为：
<template>
<div class="main-container">
<inputSelect :arrayList="_arrayList" @getInputNum="_getInputNum" />
</div>
</template> <script>
/**
* 输入下拉组件引用主入口
* @author mino
* @version 1.0.0
* @description 引用输入下拉组件
*/
import inputSelect from './input-select';
export default {
data() {
return {
_arrayList: [
{
code: '1',
text: '111'
},
{
code: '3',
text: '333'
},
{
code: '5',
text: '555'
}
],
inputSelectData: '' //接收子组件的值
}
},
components: {
inputSelect
},
methods: {
//获取子组件的值
_getInputNum(data) {
console.log('this is data of input-select: ', data);
this.inputSelectData = data;
}
}
}
</script>