多个dom节点共用同一个el-popover改造

多个不同的dom使用同一个el-popover时,且popover是否显示根据后端返回的状态或者某些规则改变状态来显示。

html

<div>
    <el-input ref="popinput"  @input='showPop()'/>
</div>

<el-popover
          title="这是标题" 
          popper-class="PopName" 
          width="320"
          ref="companyPop"
          placement="top"
          v-model="innerVisible">
          <div class="popverCont">
             这是popover的内容
          </div>
          <div style="text-align: right; margin: 0" class="footer">
            <el-button size="mini" type="dialog-cancel"  @mousedown.native="innerVisible = false;">取消</el-button>
            <el-button type="primary" size="mini"  @mousedown.native="handleSubmitReport('dynamicValidateForm')">确定</el-button>
          </div> 
    </el-popover>

showPop(){
    //先获取当触发pop的dom
    let nowpopDom=this.$refs.popinput.$el
    //先隐藏并销毁之前popover显示 
    this.innerVisible = false
    let popStone = this.$refs.companyPop
    popStone.doDestroy(true)
    this.$nextTick(() => {
        //显示新的Popover
        this.innerVisible = true
        popStone.referenceElm = popStone.$refs.reference = nowpopDom
        
    }) 
    
    
}

另外一种写法通过e/event来获取当前触发的dom节点

<div>
    <el-input ref="popinput"  @input='showPop(e)'/>
</div>

showPop(e){ 
    //先隐藏并销毁之前popover显示 
    this.innerVisible = false
    let popStone = this.$refs.companyPop
    popStone.doDestroy(true)
    this.$nextTick(() => {
        //显示新的Popover
        this.innerVisible = true
        popStone.referenceElm = popStone.$refs.reference = e.target
        
    })