3.4 KiB
3.4 KiB
::: anchor :::
::: title 基础使用 :::
::: demo
tooltip <style> </style>:::
::: title 显示位置 :::
::: demo
上边
左边
右边
下边
:::
::: title 浅色主题 :::
::: demo
tooltip <script> </script>:::
::: title 是否禁用/动态属性 :::
::: demo
tooltip <script> import { ref } from 'vue'; export default { setup() { const contentArr = [ "不明白是是非非，只知我不会不在。", "千山万水，去程是你，归程也是你。", "一约既定，万山无阻。", "时光都淡了，我还伴着你。", "只问深情，不问西东。", "感谢曾经在我身边的，一直在我身边。", "经年再相逢，魂梦与子同。" ]; const rendonCotent = function(){ return contentArr[Math.floor(Math.random() * contentArr.length)]; }; const content = ref(rendonCotent()) const isDark = ref(false) const disabled = ref(true) setInterval(()=> content.value = rendonCotent(), 1000) return { content, isDark, disabled } } } </script> <style> </style>:::
::: title Tooltip 属性 :::
::: table
| 属性 | 描述 | 可选值 |
|---|---|---|
| content | 显示内容 | -- |
| position | 显示位置 | top(默认值)、bottom、left、right |
| isDark | 是否为黑色主题 | true(默认值)、false(浅色) |
| disabled | 是否禁用 | false(默认值)、true(禁用) |
| isCanHide | 控制是否可以隐藏,可参考lay-slider组件 |
true(默认值)、false |
:::
::: comment :::
::: previousNext tooltip :::