guoyao-jiankang/public/camera/component/search-input.vue

<!--输入搜索框用此组件，限制了中英文输入长度-->
<template>
    <div class="input-box">
        <!--普通输入框-->
        <el-input v-model="value" @input="searchInput($event)" :placeholder="placeholdertip" :maxlength="maxLen" :ref="inputName" v-if="mode == 'input'"></el-input>
        <!--搜索框，支持自动搜索-->
        <el-input v-if="mode == 'search' && openAutoSearch" :maxlength="maxLen" @compositionend.native="handlecompositionend" @compositionstart.native="handlecompositionstart" size="mini" class="console-tree-search" :placeholder="placeholdertip" suffix-icon="tree-search-icon" @click.native="handleClickOnTableSearchInput" @keyup.native="handleTreeEnter" v-model="value" @input="searchInput($event)" :ref="inputName">
            <i slot="suffix" v-if="value" @click="handleTreeEnter(value = '')" class="el-input__icon el-icon-circle-close el-input__clear" style="margin-right: 14px;"></i>
        </el-input>
        <!--搜索框，支持回车搜索-->
        <el-input v-if="mode == 'search' && !openAutoSearch" :maxlength="maxLen" size="mini" class="console-tree-search" :placeholder="placeholdertip" suffix-icon="tree-search-icon" @click.native="handleClickOnTableSearchInput" @keyup.enter.native="handleTreeEnter" v-model="value" @input="searchInput($event)" :ref="inputName">
            <i slot="suffix" v-if="value" @click="handleTreeEnter(value = '')" class="el-input__icon el-icon-circle-close el-input__clear" style="margin-right: 14px;"></i>
        </el-input>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                compositioning: false,
                searchTimer: null,
                keyStatus: null,
                value: ''
            }
        },
        
        props: {
            //输入框提示信息
            placeholdertip: {
                type: String,
            },
            //输入框模式 input 仅输入功能  search 输入并带搜索功能
            mode: {
                default: 'input',
                type: String
            },
            maxLen: {
                type: Number,
                default: 120
            },
            inputName: {
                type: String,
                default: 'searchInput'
            },
            //是否开启自动搜索
            openAutoSearch: {
                type: Boolean,
                default: false
            }
        },
        
        methods: {
            /**
            * @method searchInput 输入后把新的搜索值传给父组件，input模式输入后通知父组件
            */
            searchInput (value) {
                if (value.length > this.maxLen) value = value.slice(0, this.maxLen)
                value = value.trim()
                this.$emit('input', value)
            },
            /**
             * @method handlecompositionend() 中文输入法
            */
            handlecompositionstart() {
                this.compositioning = true
            },
            /**
             * @method handlecompositionend() 中文输入法输入结束
            */
            handlecompositionend() {
                this.compositioning = false
            },
            keydownEvent(e) {
                //当输入中文按下回车松开时，不会触发keyup事件
                if (e.code == 'Enter' || e.code == 'NumpadEnter') {
                    this.keyStatus = 'keyup'
                } else {
                    this.keyStatus = 'keydown'
                }
            },
            keyupEvent() {
                this.keyStatus = 'keyup'
            },
            /**
            * @method handleClickOnTableSearchInput table搜索框点击事件
            */
            handleClickOnTableSearchInput(e) {
                // 如果是点击在搜索图标上，就去查询
                if (e && e.target && e.target.className && e.target.className.includes('el-input__icon')) this.handleTreeEnter()
            },
            /**
             * @method handleTreeEnter 搜索方法，search模式输入后通知父组件
            */
            handleTreeEnter() {
                //输入防抖
                clearTimeout(this.searchTimer)
                //如果还在中文输入
                if(this.compositioning) return
                this.searchTimer = setTimeout(() => {
                    //如果键盘还是按下状态，持续输入
                    if(this.keyStatus == 'keydown') return
                    if (this.value.length > this.maxLen) this.value = this.value.slice(0, this.maxLen)
                    this.value = this.value.trim()
                    //把搜索值传到父组件
                    this.$emit('search', this.value)
                }, 600)
            }
        }
    }
</script>

<style scoped>
    .input-box {
        width: 100%;
        display: inline-block;
    }
    /deep/ i.tree-search-icon {
        top: 6px;
    }
    /deep/ .el-input--suffix .el-input__inner {
        padding-right: 40px;
    }
</style>