當我在代碼上使用 hover 時彈出框不起作用

Question

這是我的 vue js 代碼，我正在嘗試使用 Element ui 添加一個彈出框。

但每次我 HOVER 超過它時，它都不起作用

<template v-else-if="column.prop == 'Documents'"> 
            <div class="Profile__historical-btn">
              <el-popover 
                ref="popoverRef"
                trigger="hover"
                placement="left"
                width="400" 
              >
                <span>Changes cannot be applied </span>
              </el-popover>
              <span>yes</span>
              <button ref='popoverRef' disabled class="AccProfile__btnDiv" @click="open(row)" v-if="editP">
                <svg-icon icon="edit" width="14px" height="12px"/>
              </button>
            </div>
          </template>

據我所知，代碼與我在元素 UI 庫中看到的完全相同，但是當我使用 hover 時它不起作用，它是否需要任何方法/屬性

Answer 1

您在按鈕中有ref ，這是錯誤的。 您應該使用文檔中所述的v-popover指令。

在你這樣的情況下：

<button
  v-popover:popoverRef
  disabled class="AccProfile__btnDiv" 
  @click="open(row)"
  v-if="editP"
>
  <svg-icon icon="edit" width="14px" height="12px"/>
</button>

如果它仍然無法正常工作，那么您應該檢查您使用的版本。
從 2.3 版開始，element-ui 使用不同的方式引用 popover。