ElementPopover组件的动态ref参数

最终实现方式在最后面

博客园你啊347

在开发的时候有一个小需求
在一个步骤列表中, 每个步骤有步骤id,步骤描述, 步骤图片, 步骤视频这几个基本元素
其中, 步骤视频是非必要的, 可以为空(null 或 empty, 这个有点扯, 居然没有统一)

然后具体需求是: 当鼠标悬浮在图片上时, 利用popover, 在图片的右侧(placement="right") 显示视频
(视频组件直接用的video标签实现的) 博客园你啊347

那么查看elementUI的组件文档可以知道, 触发Popover的元素有两种写法
1. 使用slot="reference"博客园你啊347
2. 使用自定义指令v-popover指向Popover的索引ref博客园你啊347

(参考elementUI文档https://element.eleme.cn/2.13/#/zh-CN/component/popover)

一开始用的是第一种, 但是后面发现在这个需求里面会有点问题博客园你啊347

点击查看代码

<div
  class="item"
  v-for="(item, index) in array.steps"
  :key="index"
>
  <el-popover
    v-if="item.video && item.video !== ''"
    placement="right"
    title="步骤视频"
    trigger="hover"
  >
    <video
      :src="item.video"
      controls="controls"
      style=" 400px; height: 300"
    ></video>
    
    <!--这里是做popover的slot-->
    <div class="image" slot="reference">
      <el-image
        :src="item.photo"
        style=" 100%; height: 100%"
        fit="cover"
        :z-index="2030"
      >
      </el-image>
    </div>
  </el-popover>
</div>

 可以看到, 整个步骤列表循环是通过 v-for="(item, index) in array.steps" 进行控制的
然后把el-popover放在里面就可以实现 每个步骤一个popover,
再把slot指定为el-image外面那个盒子, 以此实现悬浮显示对应步骤视频的需求

但是, 这里有个问题, 就是 v-if="item.video && item.video !== ''" 这段代码如果不成立的话, 那么图片也会跟着不显示博客园你啊347
所以这个需求用slot这个方式是不行的

---

 那么还可以用自定义指令 v-popover的方式实现博客园你啊347
但是elementUI文档里面没提到可以使用动态参数的方式设置v-popover:ref的值博客园你啊347

可以看到文档里面 v-popover:popover是写死上面组件ref的值的, 如果想要实现动态效果就得从这里下手

一般来说如果想要在element的组件属性绑定动态参数(data里面的或者其他局部变量) 直接在变量前面加个冒号就好了  :src="`http://`+domain + suffix" 类似于这样的 
那么v-popover这个属性按道理也可以, 只是文档没说具体写法

下面就是最终实现方式了 

点击查看代码

<div
  class="item"
  v-for="(item, index) in array.steps"
  :key="index"
>
  <el-popover
    v-if="item.video && item.video !== ''"
    placement="right"
    title="步骤视频"
    trigger="hover"
    注意这里ref参数的stepVideoRef是被单引号(ESC正下方那个按键), 解释成字符串, 然后跟最外层for循环的index进行绑定, 形成不同的内容
    :ref="`stepVideoRef` + index"
  >
    <video
      :src="item.video"
      controls="controls"
      style=" 400px; height: 300"
    ></video>
  </el-popover>
      
  <!--这里是用的是动态的自定义指令, 就是没一个步骤对应的popover的索引都不一样了, 因为是用index做了控制-->
  <!--之后每一个popover的ref就是stepVideoRef0 stepVideoRef1 stepVideoRef2 stepVideoRef3 ... 这样了-->
  <div class="image"  v-popover="`stepVideoRef` + index">
    <el-image	
      :src="item.photo"
      style=" 100%; height: 100%"
      fit="cover"
      :z-index="2030"
    >
    </el-image>
  </div>
</div>

以上就解决了el-popover循环动态自定义指令v-popover的需求

v-popover:refName 改成 v-popover="`refNameTemplate` + index"  index可以任意变量, 但必须与ref保持一致
然后<el-popover :ref="`refNameTemplate` + index"> 和 v-popover指令的索引名称保持一致即可

asdf博客园你啊347

的adf