我正在使用此组件https://element.eleme.io/#/en-US/component/popover
与触发元素有关的问题(用于计算弹出窗口的位置)
对于触发元素,您可以用两种不同的方式编写它:使用
slot="reference"
命名插槽,或使用v-popover
指令并将其设置为Popover的引用。
一切正常,带有默认示例。但是我将transparent wrapper用于el-popover
组件,就像这样。
<script id="my-popover" type="x-template">
<el-popover
ref="mypopover"
transition="el-zoom-in-top"
v-bind="$attrs"
v-on="$listeners"
>
<!-- Pass on all named slots -->
<slot
v-for="slot in Object.keys($slots)"
:slot="slot"
:name="slot"
/>
<span> My popover </span>
</el-popover>
</script>
在名为slot="reference"
的插槽中可以正常工作。
<my-popover
placement="bottom"
title="Title"
width="200"
trigger="manual"
v-model="visible"
>
<el-button
slot="reference"
@click="visible = !visible"
>
Click me
</el-button>
</my-popover>
但是由于布局复杂,我需要使用v-popover
指令。包裹的组件没有运气。
<my-popover
ref="popover"
placement="right"
title="Title2"
width="200"
trigger="manual"
v-model="visible2"
>
</my-popover>
<el-button
v-popover:popover
@click="visible2 = !visible2"
>
Click me too
</el-button>
因此,我需要以某种方式从包装的组件中传递对v-popover
的{{1}}引用。即直接在模板中将ref传递给孩子。
我尝试过ref="mypopover"
,但这没用。
相关的密码笔https://codepen.io/anon/pen/rgRNZr
单击按钮v-popover:popover.$refs.mypopover
应该显示连接到该按钮的弹出窗口。
答案 0 :(得分:0)
问题是所需的ref是el-popover上的那个,但是您使用的是my-popover组件上设置的ref,而不是所需的。
这有点奇怪,因为该组件需要引用,但是从组件内部的组件中获取一个引用会很烦人。
我会将按钮和弹出式窗口放在同一个组件中。