点击div，选中内部内容组件光标，点击div外的内容，隐藏内容输入框框组件

点击div光标选中

 

循环组件：

html

<template>
    <div class="expression" @click="divFocusClick">
        <div style="margin:2px 4px">
            <div ref="expression" v-for="(item, index) in expressionList" :key="index" class="expression_component">
                <!--      运算符-->
                <operator-select v-if="item.indexSymbol == 'OP_EXP'" :scale="scale" :code="item.code" :isDisabled="isDisabled"
                                 @deleteClick="(i) => deleteClick(i, index)"
                                 @contentAdjustmentChange="(i) => contentAdjustmentChange(i, index)"></operator-select>
                <!--      常规字符-->
                <dynamic-symbol v-if="item.indexSymbol == 'CON_EXP'" :scale="scale" :code="item.code" :isDisabled="isDisabled"
                                @deleteClick="(i) => deleteClick(i, index)"
                                @contentAdjustmentChange="(i) => contentAdjustmentChange(i, index)"></dynamic-symbol>
                <!--      常量-->
                <const-input v-if="item.indexSymbol == 'CONST'" :scale="scale" :code="item.code" :isDisabled="isDisabled"
                             @deleteClick="(i) => deleteClick(i, index)"
                             @contentAdjustmentChange="(i) => contentAdjustmentChange(i, index)"></const-input>
                <!--      判断符 符号 -->
                <calculator-select v-if="item.indexSymbol == 'COM_OP_EXP'" :scale="scale" :code="item.code" :isDisabled="isDisabled"
                                   @deleteClick="(i) => deleteClick(i, index)"
                                   @contentAdjustmentChange="(i) => contentAdjustmentChange(i, index)"></calculator-select>
                <!--       字符串-->
                <text-input v-if="item.indexSymbol == 'TEXT'" :scale="scale" :code="item.code" :isDisabled="isDisabled"
                            @deleteClick="(i) => deleteClick(i, index)"
                            @contentAdjustmentChange="(i) => contentAdjustmentChange(i, index)"></text-input>
                <!--      科目-->
                <subject-select v-if="['SUBJECT', 'OFF', 'SINGLE', 'AMT$'].indexOf(item.indexSymbol) > -1" :scale="scale" :value="item" :modelType="modelType"
                                :indexSymbol="indexSymbol" :reportTheme="reportTheme" :isDisabled="isDisabled"
                                @contentAdjustmentChange="(i) => contentAdjustmentChange(i, index)"
                                @deleteClick="(i) => deleteClick(i, index)"></subject-select>

                <input ref="focusTag" class="inp" maxlength="0" @click.stop="focusClick(index)" :disabled="isDisabled"/>
                <index-field-list-dialog v-show="isShowInput && !isDisabled" ref="inputValue2" v-if="index==inputLocationIndex" @setList="setList"
                                         :reportTheme="reportTheme" @divBlurClick="divBlurClick"></index-field-list-dialog>

            </div>
            <index-field-list-dialog v-show="isShowInput && !isDisabled " ref="inputValue" v-if="expressionList.length==0" @setList="setList" :reportTheme="reportTheme"
                                     @divBlurClick="divBlurClick"></index-field-list-dialog>
        </div>
    </div>
</template>

 

js ：

    //点击div控制展示输入框组件在集合最后
        divFocusClick(e) {
            this.isShowInput=true
            if(this.$refs.expression && Array.isArray(this.$refs.expression)){
                let isInside=false
                for(let i=0; i<this.$refs.expression.length; i++){
                    if(this.$refs.expression[i].contains(e.target)){
                        isInside=true
                    }
                }
                if(!isInside){
                    this.inputLocationIndex=this.expressionList.length-1
                    this.focusClick2()
                }
            }
            if(this.expressionList.length==0){
                this.inputLocationIndex=this.expressionList.length-1
                this.focusClick2()
            }
        },

// 控制input光标展示
focusClick2() {
    if(this.expressionList.length==0){
        this.$nextTick(()=>{
            this.$refs.inputValue.focusClick()
        })
    }else{
        this.$nextTick(()=>{
            this.$refs.inputValue2[0].focusClick()
        })
    }
},

点击div外的元素隐藏div内的输入框

 

html

  <div style="height: 290px" @click="divBlurClick">
    <expression-config
      ref="expressInputRef"
      :list="form.indexRuleRely"
      :minType="formulaType"
      :dialog="isFormulaDialog"
      :scale="scale"
      :modelType="modelType"
      :reportTheme="form.reportTheme"
      @setIndexCountRuleSystem="setIndexCountRuleSystem"
      :style="{ minHeight: scale == true ? '225px' : '80px' }"
    >
    </expression-config>
  </div>

js

//公式失焦
divBlurClick(e) {
    if(this.$refs.expressInputRef){
        if(!this.$refs.expressInputRef.$el.contains(e.target)){
            this.$refs.expressInputRef.divBlurClick()
        }
    }
},