技術標籤：前端javascriptcssvue.jshtml

這個功能是在下拉框選項裡做的，下拉框的id要自己修改，滑鼠懸浮在選項框裡的選項，右側出現一個資訊框，資訊框裡的內容是兩列
HTML內容這裡是用的下拉框，因此要把懸浮框置頂z-index: 99999;
關鍵就是這3個函式*@mouseenter=“mouseIn()”
@mouseleave=“mouseOut()”
@mousemove=“mouseMove($event)”*監聽滑鼠
實現效果如圖

 <a-select-option
                    v-for="oil in oilList"
 

                    :key="oil.abbr"
                    @mouseenter="mouseIn()"
                    @mouseleave="mouseOut()"
                    @mousemove="mouseMove($event)"
                    >{{ oil.name }}</a-select-option
                  >

為了實現多行兩列，這裡把右側元素設定為float:right，左側不動，這樣就不會浮動到一起。

  mouseIn() {
      var focusTooltip = $('#optionFocus')
      focusTooltip.css('display', 'block')
    },
    mouseOut() {
      var focusTooltip = $('#optionFocus')
      focusTooltip.css('display', 'none')
    },
    mouseMove(e) {
      var self = this
      var focusTooltip = $('#optionFocus')
 

      let testData = this.toolTopbodyData
      let evaluationDate = 'yyyy-MM-dd'
      focusTooltip.css('top', e.clientY - 80 + 'px')
      focusTooltip.css('left', e.clientX + 100 + 'px')
      var headerHtml =
        "<div style='font-size:12px;color: #f2f2f2;font-weight: bold;font-family: system-ui;'>" +
        "<div>日期: <div style='float:right';>"+
        evaluationDate +
        '</div></div>' +
        "<div>標籤:<div style='float:right';>" +
        testData +
        '</div></div>' +
        "<div>標籤:<div style='float:right';>" +
        testData +
        '</div></div>' +
        "<div>標籤:<div style='float:right';>" +
        testData +
        '</div></div>' +
        "<div>標籤:<div style='float:right';>" +
        testData +
        '</div></div>' +
        '</div>'
      var effectHtml = "<div style='font-size:12px;margin-top:5px;'>" + '</div>'
      self.toolTopbody = headerHtml + effectHtml
    },

.special_focus_toolTip {
  z-index: 7;
  position: absolute;
  display: none;
  width: auto;
  height: auto;
  border-style: solid;
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: rgba(50, 50, 50, 0.702);
  border-width: 0px;
  border-color: #5697f8;
  border-radius: 4px;
  color: #ffffff;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 14px;
  font-family: 'system-ui';
  line-height: 21px;
  padding: 10px 10px;
  z-index: 99999;
}

很多程式碼借鑑了這篇文章https://blog.csdn.net/qq_38355969/article/details/104752022