ElementUI组件Popover动态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

 可以看到, 整个步骤列表循环是通过 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这个属性按道理也可以, 只是文档没说具体写法

下面就是最终实现方式了 

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

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

asdf博客园你啊347

的adf