vue element Tooltip套用Popover

 需求:同一个图标,鼠标移入显示提示语,点击显示列表

鼠标移入:

鼠标点击:

 

 

<template>
  <div class="table-list">
 <!-- 注意点1: 使用 tooltip 将 popover 包裹住, 如果是 popover 包裹 tooltip 会导致显示问题  --
    <el-tooltip
      class="item"
      effect="dark"
      content="Top Center 提示文字"
      placement="bottom"
      ref="tooltip"
      :disabled="tooltipShow"
    >
      <!-- popover -->
      <!-- 注意点2: 使用ref来命中指定的作用域 -->
      <el-popover width="160" :ref="popover">
        <div style="position: relative">
          <template>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >列表展示</el-checkbox
            >
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="city in checkedOptions"
                :label="city"
                :key="city"
                >{{city}}</el-checkbox>
            </el-checkbox-group>
          </template>
          <span
            style="position: absolute;top: 0;right: 0;color: rgb(64, 158, 255)"
            >重置</span
          >
        </div>
        <!-- popover 触发源 -->
        <img
          class="ser-img"
          slot="reference"
          src="@/assets/img/set.png"
          alt=""
          @click="closeToolip"
        >
      </el-popover>
    </el-tooltip>
  </div>

</template>

<script>
import { createExportData } from '@/api/commonAPI'
export default {
  name: 'TableList',
  components: {},
  props: {
    checkedOptions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      tooltipShow: false,
      checkAll: true,
      isIndeterminate: true,
      checkedCities:[] // 勾选的数据
    }
  },
  created() {},
  mounted() {},
  methods: {
    closeToolip() {
      this.tooltipShow = !this.tooltipShow
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.checkedOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.checkedOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedOptions.length;
    },
    exportExcel() {
      this.exporting = true
      let _event = event
      const data = {
        params: this.filterForm,
        exportUrl: this.exportUrl
      }
      createExportData(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
          this.$store.dispatch('app/SetDownloadIconCoord', {
            x: _event.x,
            y: _event.y
          })
          this.$store.dispatch('app/ToggleShowDownloadIcon', true)
        })
        .finally(() => {
          this.exporting = false
        })
    }
  }
}
</script>

<style lang="scss">
.table-list {
  display: inline-block;
  float: right;
  .el-tooltip {
    float: right; //解决整体右浮动.提示语位置偏差
  }
  .ser-img {
    width: 40px;
    height: 40px;
  }
  .reset {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>