Vue 可輸入可下拉組件的封裝

由於業務需要，需要一個可輸入也可下拉的組件，看了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>