Vue 可输入可下拉组件的封装

由于业务需要，需要一个可输入也可下拉的组件，看了iview没有现成的组件用，就自己封装了个小组件~~

组件input-select.vue代码：

<template>
　　<div class="input-container">
　　　　<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-for="(item, index) of arrayList" :value="item.code" :key="index" @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>