Vue 利用popover做成下拉框的功能同时可以进行增删操作

最近项目有个功能点是下拉框赋值同时具有添加和删除的功能。当时第一反应就是普通的下拉框满足不了这些，查阅了elementUI文档发现可以将popover组件改造一下。

首先我们来看下UI设计图

image.png

其中的下拉框列表数据通过循环接口数据

<el-popover

          placement="bottom"

          width="160"

          trigger="click"

          ref="mainpoolPopover"

          >

          <div class="pool-main">

            <ul class="pool-height">

              <li class="poolli" v-for="(item,index) in poolmainList" :key="index" @click="selectmainPool(item)">

                <img :src="getMiningPoolById(item.id).image" alt="">

                <div class="poolTitle">

                  <span>{{item.title}}</span>

                  <span v-if="item.isDefault == 0" @click="deletePool(item)"><i class="okkong icon-058"></i></span>

                </div>

              </li>

            </ul>

            <div class="poolAdd" @click="openPool(1)"><i class="el-icon-plus" style="margin-left:60px"></i> 添加</div>

          </div>

          <el-button class="poolButton" :class="normalButton" slot="reference" style="color:#000000;font-weight:400;padding-left: 11px;border-color: #D4D4D4;width:150px;height:36px;text-align: left;" type="info" plain :disabled="isDisable" @click="onShowMainpool">

            <span :class="mainpoolStyle">{{mainpool}}</span>

            <span v-if="showDownmainpool"><i class="el-icon-arrow-down pool-icon"></i></span>

            <span v-else><i class="el-icon-arrow-up pool-icon"></i></span>

          </el-button>

          </el-popover>

其中有个交互问题就是点击选中改造下拉框值时需要关闭popover，但是查阅popover文档显然没能找到关闭事件，这时我们想到的是手动去关闭它，我们通过ref取到popover元素可以发现好像含有打开和关闭的方法

image

接下来我们就可以直接拿来用了，效果就完成了，代码如下图

//选择主矿池下拉框赋值

    selectmainPool(item){

      this.showDownmainpool = !this.showDownmainpool//主矿池箭头图标转换

      this.$refs['mainpoolPopover'].doClose()//关闭主矿池popover

      this.mainpool = item.title

      this.mainPoolId = item.id

    },

最后效果就出来了

image