varletjs / varlet

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

https://varletjs.org/#/en-US/index

MIT License

4.82k stars 607 forks source link

Tooltip 组件的teleport属性有示例可以参考吗 #1556

Closed estoi closed 3 months ago

estoi commented 3 months ago

About `docs`

chouchouji commented 3 months ago

参考 https://cn.vuejs.org/guide/built-ins/teleport.html#teleport

对应的这里的 to

estoi commented 3 months ago

参考 https://cn.vuejs.org/guide/built-ins/teleport.html#teleport

对应的这里的 to

<var-tooltip
    placement="right-end"
    trigger="click"
    teleport="#tooltip"
  />

是这样吗

chouchouji commented 3 months ago

参考 https://cn.vuejs.org/guide/built-ins/teleport.html#teleport 对应的这里的 to
<var-tooltip
    placement="right-end"
    trigger="click"
    teleport="#tooltip"
  />
是这样吗

你这个 #tooltip 是真实存在于页面上的 id为 tooltip 的 dom元素嘛？

estoi commented 3 months ago

参考 https://cn.vuejs.org/guide/built-ins/teleport.html#teleport 对应的这里的 to
<var-tooltip
    placement="right-end"
    trigger="click"
    teleport="#tooltip"
  />
是这样吗
你这个 #tooltip 是真实存在于页面上的 id为 tooltip 的 dom元素嘛？

是的，页面中有一个id是tooltip的元素，我设置了teleport为#tooltip，但是报错了

<div
    id="tooltip"
    class="h-screen w-full bg-#e8e8e9 pt-50px flex flex-col flex-items-center"
  >
</div>

chouchouji commented 3 months ago

方便debug一下嘛？看看具体的报错原因

estoi commented 3 months ago

方便debug一下嘛？看看具体的报错原因

我在playground里测试了一下也报错地址

chouchouji commented 3 months ago

方便debug一下嘛？看看具体的报错原因

我在playground里测试了一下也报错地址

方便截个图嘛，我看控制台没报错

estoi commented 3 months ago

方便debug一下嘛？看看具体的报错原因

我在playground里测试了一下也报错地址

方便截个图嘛，我看控制台没报错

不好意思保存的时候报错了刷新之后好了

但是在我的项目中也是这么用的在页面中有一个id是tooltip的div，我也是这么用的，不知道为什么报错

estoi commented 3 months ago

方便debug一下嘛？看看具体的报错原因

我在playground里测试了一下也报错地址

方便截个图嘛，我看控制台没报错

不好意思保存的时候报错了刷新之后好了

但是在我的项目中也是这么用的在页面中有一个id是tooltip的div，我也是这么用的，不知道为什么报错

estoi commented 3 months ago

这是DOM

chouchouji commented 3 months ago

这是DOM

试试获取dom节点呢？

chouchouji commented 3 months ago

这是DOM

试试获取dom节点呢？通过ref

estoi commented 3 months ago

onMounted(() => {
  console.log(tooltip.value)
})

estoi commented 3 months ago

这是DOM

试试获取dom节点呢？通过ref

打印可以获取到用document.querySelector('#tooltip')也能找到

chouchouji commented 3 months ago

这是DOM

试试获取dom节点呢？通过ref

打印可以获取到用document.querySelector('#tooltip')也能找到

你把这个传给teleport属性看看还有没有报错

estoi commented 3 months ago

这是DOM

试试获取dom节点呢？通过ref

打印可以获取到用document.querySelector('#tooltip')也能找到

那先这样解决吧，这个问题我们后面遇到了会关注下

好的，另外var-tooltip组件支持自定义class吗，我用到多个var-toolip组件，需要处理不同的样式

chouchouji commented 3 months ago

这是DOM

试试获取dom节点呢？通过ref

打印可以获取到用document.querySelector('#tooltip')也能找到

那先这样解决吧，这个问题我们后面遇到了会关注下

好的，另外var-tooltip组件支持自定义class吗，我用到多个var-toolip组件，需要处理不同的样式

可以尝试一下 content 插槽，看看能不能满足你的需求

estoi commented 3 months ago

这是DOM

试试获取dom节点呢？通过ref

打印可以获取到用document.querySelector('#tooltip')也能找到

那先这样解决吧，这个问题我们后面遇到了会关注下

好的，另外var-tooltip组件支持自定义class吗，我用到多个var-toolip组件，需要处理不同的样式

可以尝试一下 content 插槽，看看能不能满足你的需求

varletjs / varlet

Tooltip 组件的teleport属性有示例可以参考吗 #1556

About docs

About `docs`