mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 17:48:34 +08:00
docs: ✏️ 修复基础组件文档问题 - 阶段一完成 (#1220)
* docs(button): 更新按钮组件文档对开放能力的描述 - 修改 session-message-title 和 session-message-path 属性名称 - 新增 chooseavatar 和 agreeprivacyauthorization 事件回调 * docs(icon): 更新图标组件文档 - 调整属性描述，明确 name 属性可用于图标名称或图片链接 - 添加事件列表，明确 click 事件的参数 - 移除英文示例代码中不必要的示例和图标列表 - 优化文档结构和格式，使信息更加清晰 * docs(config-provider): 更新全局配置组件文档 - 调整文档中的强调样式，使用加粗替代下划线 - 完善英文文档缺失的内容，保持和中文文档一致 * docs(component): 更新 Popup 组件文档 - 调整文档结构，优化标题层级 - 添加 v-model 使用示例，明确组件绑定值 - 移除冗余的代码示例，精简文档内容 - 更新属性表格，统一属性描述 - 添加防止滚动穿透的解决方案说明 * docs(resize): ✏️ 更新 resize 组件文档 - 修正事件名称从 `size` 改为 `resize` - 添加组件属性（Attributes）、事件（Events）和插槽（Slots）的详细说明 - 更新文档结构，使其更加完整和易于理解 * docs(transition): ✏️完善Transition 动画组件文档的属性和事件描述 - 增加自定义根节点样式类、懒渲染、动画结束后销毁子节点等属性 - 添加进入和离开过渡的开始、激活和结束状态类 - 新增点击事件和默认插槽 - 更新文档以反映新增功能 * docs(fab): ✏️更新fab组件文档 - 优化了文档结构，调整了部分格式 - 添加了 Methods 和 default Slot 相关的信息 - 更新了 custom-style 属性的命名 * docs(component): ✏️ 更新 Text 组件文档 - 优化文档格式，调整表格结构 - 添加缺失的参数说明和示例代码 - 更新参数类型和默认值 - 增加 call 参数说明 - 补充 Slots 表格 * docs(root-portal): ✏️ 更新组件文档 - 添加 Attributes 和 Events 部分，说明该组件无相关配置 - 修正 Slots 部分的版本信息，统一为 1.11.0 - 更新中文和英文文档
This commit is contained in:
TAYUN
GitHub
parent
04d0d11849
commit
9132174b11
@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
悬浮动作按钮组件，按下可显示一组动作按钮。
|
悬浮动作按钮组件，按下可显示一组动作按钮。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `fab` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
|
因为`uni-app`组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `fab` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。
|
||||||
|
|
||||||
@ -36,14 +34,9 @@
|
|||||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||||
const { show: showToast } = useToast()
|
const { show: showToast } = useToast()
|
||||||
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
|
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
|
||||||
const position = ref<'left-top'
|
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'>(
|
||||||
| 'right-top'
|
'left-bottom'
|
||||||
| 'left-bottom'
|
)
|
||||||
| 'right-bottom'
|
|
||||||
| 'left-center'
|
|
||||||
| 'right-center'
|
|
||||||
| 'top-center'
|
|
||||||
| 'bottom-center'>('left-bottom')
|
|
||||||
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
||||||
const disabled = ref<boolean>(false)
|
const disabled = ref<boolean>(false)
|
||||||
```
|
```
|
||||||
@ -90,7 +83,6 @@ const active = ref<boolean>(false)
|
|||||||
|
|
||||||
通过`trigger`插槽自定义触发器，`expandable`控制点击触发器是否展开/收起动作按钮菜单。
|
通过`trigger`插槽自定义触发器，`expandable`控制点击触发器是否展开/收起动作按钮菜单。
|
||||||
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-fab position="left-bottom" :expandable="false">
|
<wd-fab position="left-bottom" :expandable="false">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
@ -98,41 +90,49 @@ const active = ref<boolean>(false)
|
|||||||
</template>
|
</template>
|
||||||
</wd-fab>
|
</wd-fab>
|
||||||
```
|
```
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
console.log('点击了')
|
console.log('点击了')
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| -------------- | ----------------------------------------------------- | ------------ |-------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------- | ---------------- |
|
| -------------- | ----------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | -------- |
|
||||||
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
||||||
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 |
|
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 |
|
||||||
| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | left-center | right-center | top-center | bottom-center | 'right-bottom' | 0.1.57 |
|
| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | left-center | right-center | top-center | bottom-center | 'right-bottom' | 0.1.57 |
|
||||||
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
|
| draggable | 按钮能否拖动 | boolean | | false | 1.2.19 |
|
||||||
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | 'left' | 'top' | 0.1.57 |
|
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | 'left' | 'top' | 0.1.57 |
|
||||||
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
|
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
|
||||||
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
|
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
|
||||||
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
||||||
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
||||||
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
||||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
| custom-style | 自定义样式 | string | - | '' | 0.1.57 |
|
||||||
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
|
| expandable | 用于控制点击时是否展开菜单，设置为 false 时触发 click | boolean | - | true | 1.3.11 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
| -------- | -------------------------------------------- | ---- | ---------------- |
|
| -------- | -------------------------------------------- | ---- | -------- |
|
||||||
| click | expandable 设置为 false 时，点击悬浮按钮触发 | — | 1.3.11 |
|
| click | expandable 设置为 false 时，点击悬浮按钮触发 | — | 1.3.11 |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
| 方法名 | 说明 | 参数 | 最低版本 |
|
||||||
|
| ------ | -------- | ---- | -------- |
|
||||||
|
| open | 展开菜单 | - | 0.1.57 |
|
||||||
|
| close | 收起菜单 | - | 0.1.57 |
|
||||||
|
|
||||||
## Slot
|
## Slot
|
||||||
|
|
||||||
| name | 说明 | 最低版本 |
|
| name | 说明 | 最低版本 |
|
||||||
| ------- | -------------------------------------------------------------- | ---------------- |
|
| ------- | -------------------------------------------------------------- | -------- |
|
||||||
| trigger | 触发器插槽，用于自定义点击按钮，使用此插槽时组件不会抛出 click | 1.3.11 |
|
| default | 动作按钮，通常放置多个按钮 | 0.1.57 |
|
||||||
|
| trigger | 触发器插槽，用于自定义点击按钮，使用此插槽时组件不会抛出 click | 1.3.11 |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# Resize 监听元素尺寸变化
|
# Resize 监听元素尺寸变化
|
||||||
|
|
||||||
当组件包裹的文档流尺寸发生变化时，触发 `size` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化，重新获取 dom 尺寸和位置，进行内容展示的计算操作。
|
当组件包裹的文档流尺寸发生变化时，触发 `resize` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化，重新获取 dom 尺寸和位置，进行内容展示的计算操作。
|
||||||
|
|
||||||
|
|
||||||
## 基本用法
|
## 基本用法
|
||||||
@ -30,8 +30,22 @@ function handleResize(detail: Record<string, string | number>) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
|
|-----|------|-----|-------|--------|---------|
|
||||||
|
| custom-style | 自定义根节点样式 | string | - | - | - |
|
||||||
|
| custom-class | 自定义根节点样式类 | string | - | - | - |
|
||||||
|
| custom-container-class | 自定义容器样式类 | string | - | - | - |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
|--------|------|-----|---------|
|
|--------|------|-----|---------|
|
||||||
| resize | 尺寸发生变化时触发 | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
| resize | 尺寸发生变化时触发 | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名称 | 说明 | 最低版本 |
|
||||||
|
|---------|------|---------|
|
||||||
|
| default | 需要监听尺寸变化的内容 | - |
|
||||||
|
|||||||
@ -56,9 +56,16 @@ version: 1.11.0
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
该组件无属性配置。
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
该组件无事件。
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
| 名称 | 说明 | 最低版本 |
|
| 名称 | 说明 | 最低版本 |
|
||||||
| ------- | ---------------------------- | -------- |
|
| ------- | ---------------------------- | -------- |
|
||||||
| default | 默认插槽，用于渲染传送内容 | - |
|
| default | 默认插槽，用于渲染传送内容 | 1.11.0 |
|
||||||
@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
## lines
|
## lines
|
||||||
|
|
||||||
设置 `lines` 属性,文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
|
设置 `lines` 属性,文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为 5。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text :text="text" :lines="2" size="16px"></wd-text>
|
<wd-text :text="text" :lines="2" size="16px"></wd-text>
|
||||||
@ -90,14 +90,7 @@
|
|||||||
设置 `prefix` `suffix` 插槽。
|
设置 `prefix` `suffix` 插槽。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text
|
<wd-text text="12345678901" mode="phone" format type="primary" prefix="Prefix" suffix="Suffix" />
|
||||||
text="12345678901"
|
|
||||||
mode="phone"
|
|
||||||
format
|
|
||||||
type="primary"
|
|
||||||
prefix="Prefix"
|
|
||||||
suffix="Suffix"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<wd-text text="12345678901" mode="phone" format type="primary">
|
<wd-text text="12345678901" mode="phone" format type="primary">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
@ -112,13 +105,7 @@
|
|||||||
设置 `mode="price"` 。
|
设置 `mode="price"` 。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text
|
<wd-text text="16354.156" mode="price" type="success" decoration="line-through" prefix="￥" />
|
||||||
text="16354.156"
|
|
||||||
mode="price"
|
|
||||||
type="success"
|
|
||||||
decoration="line-through"
|
|
||||||
prefix="￥"
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 文字装饰
|
## 文字装饰
|
||||||
@ -126,7 +113,7 @@
|
|||||||
设置 `decoration` 文字装饰，下划线，中划线等。
|
设置 `decoration` 文字装饰，下划线，中划线等。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text :text="text" type="warning" decoration="underline"/>
|
<wd-text :text="text" type="warning" decoration="underline" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## 事件
|
## 事件
|
||||||
@ -146,32 +133,38 @@ function clickTest() {
|
|||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| ---------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------------ | ------- | ---------------- |
|
| ---------- | ------------------------------------------------------------------ | --------------- | ------------------------------------------------------- | ------- | -------- |
|
||||||
| type | 主题类型 | string | 'primary' / 'error' / 'warning' / 'success' | default | 1.3.4 |
|
| type | 主题类型 | string | 'primary' / 'error' / 'warning' / 'success' / 'default' | default | 1.3.4 |
|
||||||
| text | 文字 | string / number | - | | 1.3.4 |
|
| text | 文字 | string / number | - | - | 1.3.4 |
|
||||||
| size | 字体大小 | string | - | - | 1.3.4 |
|
| size | 字体大小 | string | - | - | 1.3.4 |
|
||||||
| mode | 文本处理的匹配模式 | string | 'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额' | text | 1.3.4+ |
|
| mode | 文本处理的匹配模式 | string | 'text' / 'date' / 'phone' / 'name' / 'price' | text | 1.3.4+ |
|
||||||
| bold | 是否粗体，默认 normal | boolean | - | false | 1.3.4 |
|
| bold | 是否粗体，默认 normal | boolean | - | false | 1.3.4 |
|
||||||
| format | 是否脱敏 | boolean | 当 mode 为 phone 和 name 时生效 | false | 1.3.4 |
|
| format | 是否脱敏 | boolean | 当 mode 为 phone 和 name 时生效 | false | 1.3.4 |
|
||||||
| color | 文字颜色 | string | - | - | 1.3.4 |
|
| color | 文字颜色 | string | - | - | 1.3.4 |
|
||||||
| lines | 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为 5。 | Number | - | - | 1.3.4 |
|
| lines | 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为 5。 | number | - | - | 1.3.4 |
|
||||||
| lineHeight | 文本行高 | string | - | | 1.3.4 |
|
| lineHeight | 文本行高 | string | - | - | 1.3.4 |
|
||||||
| decoration | 文字装饰，下划线，中划线等 | string | underline/line-through/overline | | 1.3.4+ |
|
| decoration | 文字装饰，下划线，中划线等 | string | 'underline' / 'line-through' / 'overline' | none | 1.3.4+ |
|
||||||
| prefix | 前置插槽 | string | - | | 1.3.4+ |
|
| prefix | 前置内容 | string | - | - | 1.3.4+ |
|
||||||
| suffix | 后置插槽 | string | - | | 1.3.4+ |
|
| suffix | 后置内容 | string | - | - | 1.3.4+ |
|
||||||
|
| call | mode=phone 时，点击文本是否拨打电话 | boolean | - | false | 1.3.4 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
| -------- | -------------- | ----- | ---------------- |
|
| -------- | -------------- | ----- | -------- |
|
||||||
| click | 标签点击时触发 | event | 1.3.4 |
|
| click | 标签点击时触发 | event | 1.3.4 |
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名称 | 说明 | 最低版本 |
|
||||||
|
| -------- | -------- | -------- |
|
||||||
|
| prefix | 前置插槽 | 1.3.4 |
|
||||||
|
| suffix | 后置插槽 | 1.3.4 |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
| 类名 | 说明 | 最低版本 |
|
| 类名 | 说明 | 最低版本 |
|
||||||
| ------------ | ---------- | ---------------- |
|
| ------------ | ---------- | -------- |
|
||||||
| custom-class | 根节点样式 | 1.3.4 |
|
| custom-class | 根节点样式 | 1.3.4 |
|
||||||
| custom-style | 根节点样式 | 1.3.4 |
|
| custom-style | 根节点样式 | 1.3.4 |
|
||||||
|
|||||||
@ -77,9 +77,18 @@
|
|||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
|--------------|--------------|------------------|----------------|---------|----------|
|
|--------------|--------------|------------------|----------------|---------|----------|
|
||||||
| show | 是否展示组件 | boolean | - | - | - |
|
| show | 是否展示组件 | boolean | - | - | - |
|
||||||
| name | 动画类型 | string | `TransitionName` | - | - |
|
| name | 动画类型 | string / array | `TransitionName` | - | - |
|
||||||
| duration | 动画执行时间 | number / boolean | - | 300(ms) | - |
|
| duration | 动画执行时间 | number / object / boolean | - | 300(ms) | - |
|
||||||
| custom-style | 自定义样式 | string | - | - | - |
|
| custom-style | 自定义样式 | string | - | - | - |
|
||||||
|
| custom-class | 自定义根节点样式类 | string | - | - | - |
|
||||||
|
| lazy-render | 弹层内容懒渲染 | boolean | - | false | - |
|
||||||
|
| destroy | 是否在动画结束时销毁子节点 | boolean | - | true | - |
|
||||||
|
| enter-class | 进入过渡的开始状态 | string | - | - | - |
|
||||||
|
| enter-active-class | 进入过渡的激活状态 | string | - | - | - |
|
||||||
|
| enter-to-class | 进入过渡的结束状态 | string | - | - | - |
|
||||||
|
| leave-class | 离开过渡的开始状态 | string | - | - | - |
|
||||||
|
| leave-active-class | 离开过渡的激活状态 | string | - | - | - |
|
||||||
|
| leave-to-class | 离开过渡的结束状态 | string | - | - | - |
|
||||||
| disable-touch-move | 是否阻止触摸滚动 | boolean | - | false | 1.11.0 |
|
| disable-touch-move | 是否阻止触摸滚动 | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
### TransitionName 动画类型
|
### TransitionName 动画类型
|
||||||
@ -103,12 +112,19 @@
|
|||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
| ---------------- | ---------- | ---- | -------- |
|
| ---------------- | ---------- | ---- | -------- |
|
||||||
| beforeenter | 进入前触发 | - | - |
|
| before-enter | 进入前触发 | - | - |
|
||||||
| enter | 进入时触发 | - | - |
|
| enter | 进入时触发 | - | - |
|
||||||
| afterenter | 进入后触发 | - | - |
|
| after-enter | 进入后触发 | - | - |
|
||||||
| beforeleave | 离开前触发 | - | - |
|
| before-leave | 离开前触发 | - | - |
|
||||||
| leave | 离开时触发 | - | - |
|
| leave | 离开时触发 | - | - |
|
||||||
| afterleave | 离开后触发 | - | - |
|
| after-leave | 离开后触发 | - | - |
|
||||||
|
| click | 点击时触发 | - | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名称 | 说明 | 最低版本 |
|
||||||
|
|---------|------|---------|
|
||||||
|
| default | 需要应用动画效果的内容 | - |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
|
|||||||
@ -115,7 +115,7 @@ const handleClick = () => {
|
|||||||
| activeIcon | Icon when floating button is expanded | string | - | 'close' | 0.1.57 |
|
| activeIcon | Icon when floating button is expanded | string | - | 'close' | 0.1.57 |
|
||||||
| zIndex | Custom floating button layer level | number | - | 99 | 0.1.57 |
|
| zIndex | Custom floating button layer level | number | - | 99 | 0.1.57 |
|
||||||
| gap | Custom gap between floating button and viewport edges | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
| gap | Custom gap between floating button and viewport edges | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
||||||
| customStyle | Custom style | string | - | '' | 0.1.57 |
|
| custom-style | Custom style | string | - | '' | 0.1.57 |
|
||||||
| expandable | Controls whether to expand menu when clicked, triggers click when set to false | boolean | - | true | 1.3.11 |
|
| expandable | Controls whether to expand menu when clicked, triggers click when set to false | boolean | - | true | 1.3.11 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
@ -124,10 +124,18 @@ const handleClick = () => {
|
|||||||
|------------|----------------------------------------------------------------|------------|----------|
|
|------------|----------------------------------------------------------------|------------|----------|
|
||||||
| click | Triggered when clicking the floating button when expandable is false | — | 1.3.11 |
|
| click | Triggered when clicking the floating button when expandable is false | — | 1.3.11 |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
| Method Name | Description | Parameters | Version |
|
||||||
|
|-------------|-------------|------------|----------|
|
||||||
|
| open | Expand menu | - | 0.1.57 |
|
||||||
|
| close | Collapse menu | - | 0.1.57 |
|
||||||
|
|
||||||
## Slot
|
## Slot
|
||||||
|
|
||||||
| name | Description | Version |
|
| name | Description | Version |
|
||||||
|---------|------------------------------------------------------------------------------------------------------------|----------|
|
|---------|------------------------------------------------------------------------------------------------------------|----------|
|
||||||
|
| default | Action buttons, usually contains multiple buttons | 0.1.57 |
|
||||||
| trigger | Trigger slot, used for custom click button, component won't emit click when using this slot | 1.3.11 |
|
| trigger | Trigger slot, used for custom click button, component won't emit click when using this slot | 1.3.11 |
|
||||||
|
|
||||||
## External Classes
|
## External Classes
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# Resize
|
# Resize
|
||||||
|
|
||||||
When the size of the document flow wrapped by the component changes, it triggers the `size` event. Generally used to monitor changes in DOM dimensions and positions caused by DOM content updates, re-acquire DOM dimensions and positions, and perform calculations for content display.
|
When the size of the document flow wrapped by the component changes, it triggers the `resize` event. Generally used to monitor changes in DOM dimensions and positions caused by DOM content updates, re-acquire DOM dimensions and positions, and perform calculations for content display.
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
@ -29,8 +29,22 @@ function handleResize(detail: Record<string, string | number>) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| Parameter | Description | Type | Optional Values | Default | Version |
|
||||||
|
| ---------------------- | ---------------------------- | ------ | --------------- | ------- | ------- |
|
||||||
|
| custom-style | Custom root node style | string | - | - | - |
|
||||||
|
| custom-class | Custom root node style class | string | - | - | - |
|
||||||
|
| custom-container-class | Custom container style class | string | - | - | - |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| Event Name | Description | Parameters | Version |
|
| Event Name | Description | Parameters | Version |
|
||||||
|------------|-------------|------------|----------|
|
| ---------- | --------------------------- | ------------------------------------------------------------------------------------------- | ------- |
|
||||||
| resize | Triggered when size changes | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
| resize | Triggered when size changes | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| Slot Name | Description | Version |
|
||||||
|
| --------- | ----------------------------------- | ------- |
|
||||||
|
| default | Content to monitor for size changes | - |
|
||||||
|
|||||||
@ -54,8 +54,16 @@ Use `wd-root-portal` to render content to the root node, avoiding style interfer
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
This component has no attribute configuration.
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
This component has no events.
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
| Name | Description | Version |
|
| Name | Description | Version |
|
||||||
| ------- | ------------------------------ | ------- |
|
| ------- | ------------------------------ | ------- |
|
||||||
| default | Default slot for portal content | - |
|
| default | Default slot for portal content | 1.11.0 |
|
||||||
@ -148,18 +148,19 @@ function clickTest() {
|
|||||||
|
|
||||||
| Parameter | Description | Type | Options | Default | Version |
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
|-----------|-------------|------|----------|---------|----------|
|
|-----------|-------------|------|----------|---------|----------|
|
||||||
| type | Theme type | string | 'primary' / 'error' / 'warning' / 'success' | default | 1.3.4 |
|
| type | Theme type | string | 'primary' / 'error' / 'warning' / 'success' / 'default' | default | 1.3.4 |
|
||||||
| text | Text content | string / number | - | | 1.3.4 |
|
| text | Text content | string / number | - | - | 1.3.4 |
|
||||||
| size | Font size | string | - | - | 1.3.4 |
|
| size | Font size | string | - | - | 1.3.4 |
|
||||||
| mode | Text processing mode | string | 'text-normal text' / 'date' / 'phone' / 'name' / 'price' | text | 1.3.4+ |
|
| mode | Text processing mode | string | 'text' / 'date' / 'phone' / 'name' / 'price' | text | 1.3.4+ |
|
||||||
| bold | Whether bold, default normal | boolean | - | false | 1.3.4 |
|
| bold | Whether bold, default normal | boolean | - | false | 1.3.4 |
|
||||||
| format | Whether to mask data | boolean | Effective when mode is phone or name | false | 1.3.4 |
|
| format | Whether to mask data | boolean | Effective when mode is phone or name | false | 1.3.4 |
|
||||||
| color | Text color | string | - | - | 1.3.4 |
|
| color | Text color | string | - | - | 1.3.4 |
|
||||||
| lines | Number of lines to display, if set, ellipsis will show when exceeding. Max value is 5. | Number | - | - | 1.3.4 |
|
| lines | Number of lines to display, if set, ellipsis will show when exceeding. Max value is 5. | number | - | - | 1.3.4 |
|
||||||
| lineHeight | Text line height | string | - | | 1.3.4 |
|
| lineHeight | Text line height | string | - | - | 1.3.4 |
|
||||||
| decoration | Text decoration, underline, line-through, etc. | string | underline/line-through/overline | | 1.3.4+ |
|
| decoration | Text decoration, underline, line-through, etc. | string | 'underline' / 'line-through' / 'overline' | none | 1.3.4+ |
|
||||||
| prefix | Prefix slot | string | - | | 1.3.4+ |
|
| prefix | Prefix content | string | - | - | 1.3.4+ |
|
||||||
| suffix | Suffix slot | string | - | | 1.3.4+ |
|
| suffix | Suffix content | string | - | - | 1.3.4+ |
|
||||||
|
| call | Whether to make a call when clicking text in phone mode | boolean | - | false | 1.3.4 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
@ -169,6 +170,11 @@ function clickTest() {
|
|||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
|
| Slot Name | Description | Version |
|
||||||
|
|-----------|-------------|---------|
|
||||||
|
| prefix | Prefix slot | 1.3.4 |
|
||||||
|
| suffix | Suffix slot | 1.3.4 |
|
||||||
|
|
||||||
## External Classes
|
## External Classes
|
||||||
|
|
||||||
| Class Name | Description | Version |
|
| Class Name | Description | Version |
|
||||||
|
|||||||
@ -77,9 +77,18 @@ When the animation leaves, the tag will be set with `leave-class` and `leave-act
|
|||||||
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
||||||
|--------------------|------------------------------------|------------------|------------------|---------------|------------------|
|
|--------------------|------------------------------------|------------------|------------------|---------------|------------------|
|
||||||
| show | Whether to display the component | boolean | - | - | - |
|
| show | Whether to display the component | boolean | - | - | - |
|
||||||
| name | Animation type | string | `TransitionName` | - | - |
|
| name | Animation type | string / array | `TransitionName` | - | - |
|
||||||
| duration | Animation duration | number / boolean | - | 300(ms) | - |
|
| duration | Animation duration | number / object / boolean | - | 300(ms) | - |
|
||||||
| custom-style | Custom styles | string | - | - | - |
|
| custom-style | Custom styles | string | - | - | - |
|
||||||
|
| custom-class | Custom root node style class | string | - | - | - |
|
||||||
|
| lazy-render | Lazy render content | boolean | - | false | - |
|
||||||
|
| destroy | Whether to destroy child nodes after animation ends | boolean | - | true | - |
|
||||||
|
| enter-class | Starting state of enter transition | string | - | - | - |
|
||||||
|
| enter-active-class | Active state of enter transition | string | - | - | - |
|
||||||
|
| enter-to-class | Ending state of enter transition | string | - | - | - |
|
||||||
|
| leave-class | Starting state of leave transition | string | - | - | - |
|
||||||
|
| leave-active-class | Active state of leave transition | string | - | - | - |
|
||||||
|
| leave-to-class | Ending state of leave transition | string | - | - | - |
|
||||||
| disable-touch-move | Whether to prevent touch scrolling | boolean | - | false | 1.11.0 |
|
| disable-touch-move | Whether to prevent touch scrolling | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
### TransitionName Animation Types
|
### TransitionName Animation Types
|
||||||
@ -102,12 +111,19 @@ When the animation leaves, the tag will be set with `leave-class` and `leave-act
|
|||||||
|
|
||||||
| Event Name | Description | Parameters | Version |
|
| Event Name | Description | Parameters | Version |
|
||||||
|------------|-------------|------------|----------|
|
|------------|-------------|------------|----------|
|
||||||
| beforeenter | Triggered before enter | - | - |
|
| before-enter | Triggered before enter | - | - |
|
||||||
| enter | Triggered during enter | - | - |
|
| enter | Triggered during enter | - | - |
|
||||||
| afterenter | Triggered after enter | - | - |
|
| after-enter | Triggered after enter | - | - |
|
||||||
| beforeleave | Triggered before leave | - | - |
|
| before-leave | Triggered before leave | - | - |
|
||||||
| leave | Triggered during leave | - | - |
|
| leave | Triggered during leave | - | - |
|
||||||
| afterleave | Triggered after leave | - | - |
|
| after-leave | Triggered after leave | - | - |
|
||||||
|
| click | Triggered when clicked | - | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| Slot Name | Description | Version |
|
||||||
|
|-----------|-------------|---------|
|
||||||
|
| default | Content to apply animation effects | - |
|
||||||
|
|
||||||
## External Style Classes
|
## External Style Classes
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user