admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 修复 Tooltip 文档显示异常的问题

Browse Source
This commit is contained in:
不如摸鱼去 2024-12-10 22:06:52 +08:00
parent fc3d7ad6b7
commit c89eb927a2
2 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/component/tooltip.md
View File

@ -148,15 +148,16 @@ const control = () => {
## Tooltip Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | ------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
| show | 状态是否可见 | boolean | - | false | - |
| content | 显示的内容，也可以通过 `slot#content` 传入 | string / array | - | - | - |
| placement | Tooltip 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - |
| disabled | Tooltip 是否可用 | boolean | - | false | - |
| visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - |
| offset | 出现位置的偏移量 | number | number[] | {x:0, y:0} | - | 0 | 1.3.12 |
| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|---------------|--------------------------------------------|-------------------|---------------------------------------------------------------------------------------------------------------------------------|--------------|----------|
| show | 状态是否可见 | boolean | - | false | - |
| content | 显示的内容，也可以通过 `slot#content` 传入 | string / array | - | - | - |
| placement | Tooltip 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - |
| disabled | Tooltip 是否可用 | boolean | - | false | - |
| visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - |
| offset | 出现位置的偏移量 | number / number[] | - | `{x:0, y:0}` | 1.3.12 |
| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - |
## Events

35
src/pages/tooltip/Index.vue
View File

@ -1,7 +1,6 @@
<template>
<page-wraper>
<wd-toast />
<view style="overflow: hidden" @click.stop="closeOutside">
<view style="overflow: hidden" class="page-tooltip" @click.stop="closeOutside">
<demo-block title="基本用法">
<view class="top">
<wd-tooltip placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
@ -74,10 +73,10 @@
</demo-block>
<demo-block title="控制显隐">
<view @click.stop="control">
<wd-button plain size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button>
<wd-button plain size="small" class="button-control">{{ show ? '关闭' : '打开' }}</wd-button>
</view>
<view class="demo-left demo-control">
<wd-tooltip placement="top" content="控制显隐" v-model="show15">
<wd-tooltip placement="top" content="控制显隐" v-model="show">
<wd-button :round="false">top</wd-button>
</wd-tooltip>
</view>
@ -103,23 +102,7 @@
import { useToast, useQueue } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue'
const show1 = ref<boolean>(false)
const show2 = ref<boolean>(false)
const show3 = ref<boolean>(false)
const show4 = ref<boolean>(false)
const show5 = ref<boolean>(false)
const show6 = ref<boolean>(false)
const show7 = ref<boolean>(false)
const show8 = ref<boolean>(false)
const show9 = ref<boolean>(false)
const show10 = ref<boolean>(false)
const show11 = ref<boolean>(false)
const show12 = ref<boolean>(false)
const show13 = ref<boolean>(false)
const show14 = ref<boolean>(false)
const show15 = ref<boolean>(false)
const show16 = ref<boolean>(false)
const show17 = ref<boolean>(false)
const show = ref<boolean>(false)
const content = ref<string>('显示内容')
const toast = useToast()
@ -127,8 +110,7 @@ const toast = useToast()
const { closeOutside } = useQueue()
function control() {
show15.value = !show15.value
// this.setData({ show15: !this.data.show15 })
show.value = !show.value
}
function onShow() {
console.log('显示')
@ -189,6 +171,13 @@ function handleChange17(event: any) {
}
</script>
<style lang="scss" scoped>
.page-tooltip {
:deep() {
.wd-button {
min-width: auto;
}
}
}
.position-wrap {
position: relative;
}