封装一个按住Crtl显示气泡的组件

神奇的需求年年有, 当然是基于el-tooltip了直接上代码:

留一个自定义插槽嵌入 html格式的提示内容
留一个默认插槽作为显示提示的载体
用一个input来获取焦点 注册事件判断是否按下了键盘ctrl
通过鼠标进入和离开时 改变判断字段的值. 需要鼠标移入且键盘被按下才触发
// 鼠标移向并按ctrl键时 气泡提示
<template>
  <el-tooltip v-bind="$attrs" :content="content" placement="top" :value="showTooltip" :manual="true" class="tooltip-wrap">
    <!-- 嵌入html格式的提示内容 -->
    <div slot="content" v-if="!content">
      <slot name="content"></slot>
    </div>
    <div @mouseenter="mouseoverHandle" @mouseleave="mouseleaveHandle">
      <slot></slot>
      <i class="icon el-icon-info" v-if="showIcon"></i>
      <!-- 不显示 为了使页面获得焦点 -->
      <input type="text" ref="tooltipInput" class="tooltip-input">
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    content: String,
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showTooltip: false,
      isMouseover: false
    }
  },
  methods: {
    mouseoverHandle () {
      this.isMouseover = true
      this.showTooltip = window.event.ctrlKey
    },
    mouseleaveHandle () {
      this.isMouseover = false
      this.showTooltip = false
    }
  },
  mounted () {
    // 使当前页面获得焦点，否则监听keydown事件不触发
    this.$refs['tooltipInput'].focus()
    window.addEventListener('keydown', (e) => {
      if (e.ctrlKey && this.isMouseover) {
        this.showTooltip = true
      } else {
        this.showTooltip = false
      }
    }, false)
    window.addEventListener('keyup', (e) => {
      this.showTooltip = false
    }, false)
  }
}
</script>

<style lang="stylus">
.tooltip-wrap
  display inline
  .tooltip-input
    position: absolute
    width 0
    height 0
    padding 0
    border 0
.tooltip-middle
  max-width 250px!important
</style>

组件使用:

<ctrl-tooltip content="操作后，可实时向erp系统同步一次全量的库存数据" :showIcon="false">
  <el-button @click="syncStock" :disabled="!stockDisabled">同步库存</el-button>
</ctrl-tooltip>
或者这样
  <div>
        领取限制：<el-checkbox v-model="moduleItem.activityCouponList[0].limitType" true-label="1" false-label="0">
        <ctrl-tooltip :showIcon="false">
             <template slot="content">
                  <div>不勾选，活动周期内，每用户只能领取一次</div>
                  <div>勾选后，活动周期内，每用户每天可领一次</div>
              </template>
              1人1天限领取1次
         </ctrl-tooltip>
        </el-checkbox>
</div>

xuanweiH / Project-issue

封装一个按住Crtl显示气泡的组件 #9