@wot-ui/cli 0.0.1-beta.10 → 0.0.1-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -23
- package/data/v2.0.0.json +19838 -0
- package/data/v2.0.0.json.gz +0 -0
- package/data/v2.0.1.json +19818 -0
- package/data/v2.0.1.json.gz +0 -0
- package/data/v2.0.2.json +19818 -0
- package/data/v2.0.2.json.gz +0 -0
- package/data/v2.0.3.json +19824 -0
- package/data/v2.0.3.json.gz +0 -0
- package/data/v2.0.4.json +19829 -0
- package/data/v2.0.4.json.gz +0 -0
- package/data/v2.json +314 -312
- package/data/v2.json.gz +0 -0
- package/data/versions.json +7 -4
- package/data/versions.json.gz +0 -0
- package/dist/index.mjs +8 -5
- package/dist/{scanner-_isnOGJK.mjs → scanner-Dsl3i2de.mjs} +86 -8
- package/dist/{server-BLoIUV7u.mjs → server-CbHpaCNz.mjs} +1 -1
- package/package.json +5 -5
package/data/v2.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.0.
|
|
3
|
-
"generatedAt": "2026-04-
|
|
2
|
+
"version": "2.0.4",
|
|
3
|
+
"generatedAt": "2026-04-24T03:55:31.760Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "ActionSheet",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"category": "未分类",
|
|
10
10
|
"description": "从底部弹出的动作菜单面板。",
|
|
11
11
|
"descriptionZh": "从底部弹出的动作菜单面板。",
|
|
12
|
-
"since": "2.0.
|
|
12
|
+
"since": "2.0.4",
|
|
13
13
|
"doc": "# ActionSheet 动作面板\n\n从底部弹出的动作菜单面板。\n\n## 组件类型\n\n### 基本用法\n\n通过 `v-model` 设置显示隐藏。\n\n`actions` 类型为 `Array`，数组内部对象结构如下：\n\n| 参数 | 说明 | 类型 |\n| --- | --- | --- |\n| name | 选项名称 | string |\n| description | 描述信息 | string |\n| color | 颜色 | string |\n\n```html\n<wd-toast />\n<wd-button @click=\"showActions\">弹出菜单</wd-button>\n<wd-action-sheet v-model=\"show\" :actions=\"actions\" @close=\"close\" @select=\"select\" />\n```\n\n```typescript\nconst show = ref<boolean>(false)\nconst actions = ref([\n {\n name: '选项1'\n },\n {\n name: '选项2'\n },\n {\n name: '选项3',\n description: '描述信息'\n }\n])\n\nfunction showActions() {\n show.value = true\n}\n\nfunction close() {\n show.value = false\n}\n\nconst toast = useToast()\n\nfunction select({ item, index }) {\n toast.show(`当前选中项: ${item.name}, 下标: ${index}`)\n}\n```\n\n### 自定义单行面板\n\n自定义单行面板时，`panels` 类型为一维数组，数组内部对象结构如下：\n\n| 参数 | 说明 | 类型 |\n| --- | --- | --- |\n| icon | 图标名或图片地址 | string |\n| title | 标题 | string |\n\n```html\n<wd-button @click=\"showActions\">弹出菜单</wd-button>\n<wd-action-sheet v-model=\"show\" :panels=\"panels\" @close=\"close\" @select=\"select\" />\n```\n\n```typescript\nconst show = ref<boolean>(false)\nconst panels = ref([\n {\n icon: 'user',\n title: '微信好友'\n },\n {\n icon: 'share-internal',\n title: '朋友圈'\n },\n {\n icon: 'message',\n title: 'QQ 好友'\n },\n {\n icon: 'star-fill',\n title: '收藏'\n },\n {\n icon: 'share-internal',\n title: '更多分享'\n },\n {\n icon: 'user-add',\n title: '邀请好友'\n }\n])\nfunction showActions() {\n show.value = true\n}\n\nfunction close() {\n show.value = false\n}\nconst toast = useToast()\n\nfunction select({ item, index }) {\n toast.show(`当前选中项: ${item.title}, 下标: ${index}`)\n}\n```\n\n### 自定义多行面板\n\n自定义多行面板时，`panels` 类型为多维数组，每个数组内部对象结构如下：\n\n| 参数 | 说明 | 类型 |\n| --- | --- | --- |\n| icon | 图标名或图片地址 | string |\n| title | 标题 | string |\n\n```html\n<wd-button @click=\"showActions\">弹出菜单</wd-button>\n<wd-action-sheet v-model=\"show\" :panels=\"panels\" @close=\"close\" @select=\"select1\" />\n```\n\n```typescript\nconst show = ref<boolean>(false)\nconst panels = ref([\n [\n {\n icon: 'user',\n title: '微信好友'\n },\n {\n icon: 'share-internal',\n title: '朋友圈'\n },\n {\n icon: 'message',\n title: 'QQ 好友'\n },\n {\n icon: 'star-fill',\n title: '收藏'\n },\n {\n icon: 'user-add',\n title: '邀请'\n },\n {\n icon: 'share-external',\n title: '外部分享'\n },\n {\n icon: 'qrcode',\n title: '生成二维码'\n },\n {\n icon: 'save',\n title: '保存图片'\n }\n ],\n [\n {\n icon: 'file-image',\n title: '图片'\n },\n {\n icon: 'download',\n title: '下载'\n },\n {\n icon: 'copy',\n title: '复制链接'\n }\n ]\n])\n\nfunction showActions() {\n show.value = true\n}\n\nfunction close() {\n show.value = false\n}\nconst toast = useToast()\n\nfunction select1({ item, rowIndex, colIndex }) {\n toast.show(`当前选中项: ${item.title}, 行下标: ${rowIndex}, 列下标: ${colIndex}`)\n}\n```\n\n## 组件状态\n\n### 选项状态\n\n可以设置颜色、禁用、加载等状态。\n\n```html\n<wd-button @click=\"showActions\">弹出菜单</wd-button>\n<wd-action-sheet v-model=\"show\" :actions=\"actions\" @close=\"close\" />\n```\n\n```typescript\nconst show = ref<boolean>(false)\nconst actions = ref([\n {\n name: '颜色',\n color: '#0083ff'\n },\n {\n name: '禁用',\n disabled: true\n },\n {\n loading: true\n }\n])\nfunction showActions() {\n show.value = true\n}\n\nfunction close() {\n show.value = false\n}\n```\n\n## 组件变体\n\n### 取消按钮\n\n设置 `cancel-text` 取消按钮文案，展示取消按钮。\n\n```html\n<wd-action-sheet v-model=\"show\" :actions=\"actions\" @close=\"close\" cancel-text=\"取消\" />\n```\n\n### 标题\n\n设置 `title` 展示标题。\n\n```html\n<wd-action-sheet v-model=\"show\" title=\"标题\" @close=\"close\">\n <view style=\"padding: 15px 15px 150px 15px;\">内容</view>\n</wd-action-sheet>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 设置菜单显示隐藏 | boolean | false |\n| actions | 菜单选项，详见下方 Action 数据结构 | `Action[]` | `[]` |\n| panels | 自定义宫格面板项，支持一维 `Panel[]` 与二维 `Panel[][]`（多行） | `Array<Panel \\| Panel[]>` | `[]` |\n| title | 标题 | string | - |\n| cancel-text | 取消按钮文案 | string | - |\n| close-on-click-action | 点击选项后是否关闭菜单 | boolean | true |\n| close-on-click-modal | 点击遮罩是否关闭 | boolean | true |\n| duration | 动画持续时间（ms） | number | 200 |\n| z-index | 菜单层级 | number | 10 |\n| lazy-render | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | true |\n| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iPhone X 类型机型） | boolean | true |\n| root-portal | 是否从页面中脱离出来（H5: teleport，App: renderjs，小程序: root-portal） | boolean | false |\n| custom-title-class | 标题区域自定义类名 | string | - |\n| custom-class | 根节点自定义类名 | string | - |\n| custom-style | 根节点自定义样式 | string | - |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| select | 点击选项时触发 | 菜单选项或自定义面板一维数组：`{ item, index }`；自定义面板二维数组：`{ item, rowIndex, colIndex }` |\n| enter | 打开动画开始时触发 | - |\n| after-enter | 打开动画结束时触发 | - |\n| leave | 关闭动画开始时触发 | - |\n| after-leave | 关闭动画结束时触发 | - |\n| close | 面板关闭时触发 | - |\n| click-modal | 点击遮罩时触发 | - |\n| cancel | 点击取消按钮时触发 | - |\n\n## Action 数据结构\n\n| 键名 | 说明 | 类型 |\n| --- | --- | --- |\n| name | 选项名称 | string |\n| description | 描述信息 | string |\n| color | 颜色 | string |\n| disabled | 禁用 | boolean |\n| loading | 加载中状态 | boolean |\n\n## Panel 数据结构\n\n| 键名 | 说明 | 类型 |\n| --- | --- | --- |\n| icon | 图标名或图片地址 | string |\n| title | 标题内容 | string |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义内容区，传入后会覆盖默认 actions/panels 渲染 | - |\n| close | 自定义标题栏右侧关闭区域 | `{ close }` |\n",
|
|
14
14
|
"props": [
|
|
15
15
|
{
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
},
|
|
179
179
|
{
|
|
180
180
|
"name": "--wot-action-sheet-action-line-height",
|
|
181
|
-
"defaultValue": "$typography-title-line
|
|
181
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
182
182
|
"description": "操作项行高"
|
|
183
183
|
},
|
|
184
184
|
{
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "--wot-action-sheet-cancel-line-height",
|
|
211
|
-
"defaultValue": "$typography-title-line
|
|
211
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
212
212
|
"description": "取消按钮行高"
|
|
213
213
|
},
|
|
214
214
|
{
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
},
|
|
234
234
|
{
|
|
235
235
|
"name": "--wot-action-sheet-description-line-height",
|
|
236
|
-
"defaultValue": "$typography-body-line
|
|
236
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
237
237
|
"description": "描述文本行高"
|
|
238
238
|
},
|
|
239
239
|
{
|
|
@@ -293,7 +293,7 @@
|
|
|
293
293
|
},
|
|
294
294
|
{
|
|
295
295
|
"name": "--wot-action-sheet-panel-title-line-height",
|
|
296
|
-
"defaultValue": "$typography-label-line
|
|
296
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
297
297
|
"description": "面板标题行高"
|
|
298
298
|
},
|
|
299
299
|
{
|
|
@@ -323,7 +323,7 @@
|
|
|
323
323
|
},
|
|
324
324
|
{
|
|
325
325
|
"name": "--wot-action-sheet-title-line-height",
|
|
326
|
-
"defaultValue": "$typography-title-line
|
|
326
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
327
327
|
"description": "标题行高"
|
|
328
328
|
},
|
|
329
329
|
{
|
|
@@ -408,7 +408,7 @@
|
|
|
408
408
|
"category": "未分类",
|
|
409
409
|
"description": "用来代表用户或事物，支持图片、文本或图标展示。",
|
|
410
410
|
"descriptionZh": "用来代表用户或事物，支持图片、文本或图标展示。",
|
|
411
|
-
"since": "2.0.
|
|
411
|
+
"since": "2.0.4",
|
|
412
412
|
"doc": "# Avatar 头像\n\n用来代表用户或事物，支持图片、文本或图标展示。\n\n## 组件类型\n\n### 基础用法\n\n头像支持三种类型：图片、文本、图标。\n\n```typescript\nconst avatarURL = 'https://wot-ui.cn/assets/panda.jpg'\n```\n\n```html\n<wd-avatar :src=\"avatarURL\" />\n<wd-avatar text=\"U\" />\n<wd-avatar icon=\"user\" />\n```\n\n### 头像组基础用法\n\n使用 `wd-avatar-group` 组件可以展示一组头像。\n\n```html\n<wd-avatar-group>\n <wd-avatar :src=\"avatarURL\" />\n <wd-avatar icon=\"star-fill\" />\n <wd-avatar text=\"A\" bg-color=\"#1E90FF\" />\n <wd-avatar text=\"B\" bg-color=\"#228B22\" />\n</wd-avatar-group>\n```\n\n## 组件状态\n\n### 可点击\n\n通过监听 `click` 事件实现点击功能。\n\n```html\n<wd-avatar size=\"large\" :src=\"avatarURL\" @click=\"handleClick\" />\n<wd-avatar size=\"large\" text=\"点我\" bg-color=\"#1E90FF\" @click=\"handleClick\" />\n```\n\n```typescript\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst toast = useToast()\n\nconst handleClick = () => {\n toast.show('点击头像')\n}\n```\n\n## 组件样式\n\n### 头像形状\n\n使用 `shape` 属性设置头像形状，支持 `round`（圆形）和 `square`（方形），默认为 `round`。\n\n```html\n<wd-avatar :src=\"avatarURL\" shape=\"square\" />\n<wd-avatar :src=\"avatarURL\" shape=\"round\" />\n```\n\n### 头像尺寸\n\n支持预设尺寸：`large`、`medium`、`normal`、`small`，默认为 `normal`。也可以传入数字或带单位的字符串（如 `40px`、`100rpx`）自定义尺寸。\n\n```html\n<wd-avatar :src=\"avatarURL\" size=\"large\" />\n<wd-avatar :src=\"avatarURL\" size=\"medium\" />\n<wd-avatar :src=\"avatarURL\" size=\"normal\" />\n<wd-avatar :src=\"avatarURL\" size=\"small\" />\n<wd-avatar :src=\"avatarURL\" :size=\"80\" />\n<wd-avatar :src=\"avatarURL\" :size=\"60\" />\n<wd-avatar :src=\"avatarURL\" size=\"40px\" />\n```\n\n### 自定义颜色\n\n使用 `bg-color` 和 `color` 属性自定义背景色和文字颜色。\n\n```html\n<wd-avatar bg-color=\"#DC143C\" color=\"#fff\" text=\"W\" />\n<wd-avatar bg-color=\"#228B22\" color=\"#fff\" text=\"O\" />\n<wd-avatar bg-color=\"#1E90FF\" color=\"#fff\" text=\"T\" />\n<wd-avatar bg-color=\"#EEEEEE\" color=\"#7B8198\" icon=\"user\" />\n```\n\n## 特殊样式\n\n### 带徽记的头像\n\n结合 Badge 组件展示徽记。\n\n```html\n<wd-badge modelValue=\"10\" type=\"primary\">\n <wd-avatar :src=\"avatarURL\" shape=\"square\" />\n</wd-badge>\n<wd-badge modelValue=\"20\" type=\"danger\">\n <wd-avatar :src=\"avatarURL\" shape=\"square\" />\n</wd-badge>\n<wd-badge is-dot>\n <wd-avatar :src=\"avatarURL\" shape=\"square\" />\n</wd-badge>\n<wd-badge is-dot>\n <wd-avatar text=\"A\" shape=\"square\" bg-color=\"#1E90FF\" />\n</wd-badge>\n```\n\n## 内容形态\n\n### 自定义内容\n\n使用默认插槽自定义头像内容。\n\n```html\n<wd-avatar>\n <view class=\"custom-content\">VIP</view>\n</wd-avatar>\n<wd-avatar>\n <wd-icon name=\"star-fill\" size=\"24px\" color=\"#f0883a\" />\n</wd-avatar>\n```\n\n## 布局能力\n\n### 头像组最大数量\n\n使用 `max-count` 属性限制显示的头像数量，超出部分会以 `+N` 形式展示。\n\n```html\n<wd-avatar-group :max-count=\"3\">\n <wd-avatar :src=\"avatarURL\" />\n <wd-avatar icon=\"star-fill\" />\n <wd-avatar text=\"A\" bg-color=\"#1E90FF\" />\n <wd-avatar text=\"B\" bg-color=\"#228B22\" />\n <wd-avatar text=\"C\" bg-color=\"#DC143C\" />\n</wd-avatar-group>\n```\n\n### 头像组叠层方向\n\n使用 `cascading` 属性设置叠层方向，支持 `left-up`（左侧叠在上层）和 `right-up`（右侧叠在上层）。\n\n```html\n<wd-avatar-group cascading=\"left-up\" :max-count=\"4\">\n <wd-avatar :src=\"avatarURL\" />\n <wd-avatar icon=\"star-fill\" />\n <wd-avatar text=\"A\" bg-color=\"#1E90FF\" />\n <wd-avatar text=\"B\" bg-color=\"#228B22\" />\n <wd-avatar text=\"C\" bg-color=\"#DC143C\" />\n</wd-avatar-group>\n\n<wd-avatar-group cascading=\"right-up\" :max-count=\"4\">\n <wd-avatar :src=\"avatarURL\" />\n <wd-avatar icon=\"star-fill\" />\n <wd-avatar text=\"A\" bg-color=\"#1E90FF\" />\n <wd-avatar text=\"B\" bg-color=\"#228B22\" />\n <wd-avatar text=\"C\" bg-color=\"#DC143C\" />\n</wd-avatar-group>\n```\n\n### 头像组垂直堆叠\n\n使用 `vertical` 属性开启垂直方向堆叠展示。\n\n```html\n<wd-avatar-group vertical :max-count=\"4\">\n <wd-avatar :src=\"avatarURL\" />\n <wd-avatar icon=\"star-fill\" />\n <wd-avatar text=\"A\" bg-color=\"#1E90FF\" />\n <wd-avatar text=\"B\" bg-color=\"#228B22\" />\n <wd-avatar text=\"C\" bg-color=\"#DC143C\" />\n</wd-avatar-group>\n\n<wd-avatar-group vertical cascading=\"right-up\" :max-count=\"4\">\n <wd-avatar :src=\"avatarURL\" />\n <wd-avatar icon=\"star-fill\" />\n <wd-avatar text=\"A\" bg-color=\"#1E90FF\" />\n <wd-avatar text=\"B\" bg-color=\"#228B22\" />\n <wd-avatar text=\"C\" bg-color=\"#DC143C\" />\n</wd-avatar-group>\n```\n\n## Avatar Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| src | 图片地址 | string | `''` |\n| text | 文本内容 | string | `''` |\n| icon | 图标名称，使用 wd-icon 组件 | string | `''` |\n| size | 头像尺寸，支持 `large / medium / normal / small` 或自定义数值/单位字符串 | string \\| number | normal |\n| shape | 头像形状，支持 `round / square` | string | round |\n| bg-color | 背景颜色 | string | `''` |\n| color | 文字颜色 | string | `''` |\n| alt | 图片加载失败时的占位文本 | string | `''` |\n| mode | 图片填充模式，同 uni-app image 组件的 mode | string | aspectFill |\n| custom-class | 根节点自定义类名 | string | - |\n| custom-style | 根节点自定义样式 | string | - |\n\n## Avatar Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击头像时触发 | - |\n| error | 图片加载失败时触发 | `event` |\n\n## Avatar Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 自定义头像内容 |\n\n## AvatarGroup Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| max-count | 最大显示数量，超出后显示折叠头像 | number | - |\n| cascading | 叠层方向，可选值为 `left-up`、`right-up` | string | left-up |\n| shape | 统一设置组内头像形状，可选值为 `round`、`square` | string | round |\n| size | 统一设置组内头像尺寸，支持预设尺寸或自定义数值/单位字符串 | string \\| number | normal |\n| collapse-avatar | 超出最大数量时折叠头像显示文本 | string | `''` |\n| vertical | 是否垂直展示 | boolean | false |\n| custom-class | 根节点自定义类名 | string | - |\n| custom-style | 根节点自定义样式 | string | - |\n\n## AvatarGroup Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 头像列表，放置 wd-avatar 组件 |\n",
|
|
413
413
|
"props": [
|
|
414
414
|
{
|
|
@@ -549,22 +549,22 @@
|
|
|
549
549
|
},
|
|
550
550
|
{
|
|
551
551
|
"name": "--wot-avatar-line-height",
|
|
552
|
-
"defaultValue": "$typography-title-line
|
|
552
|
+
"defaultValue": "$typography-title-line-height-size-large",
|
|
553
553
|
"description": "默认文字行高"
|
|
554
554
|
},
|
|
555
555
|
{
|
|
556
556
|
"name": "--wot-avatar-line-height-large",
|
|
557
|
-
"defaultValue": "$typography-title-line
|
|
557
|
+
"defaultValue": "$typography-title-line-height-size-extra-large",
|
|
558
558
|
"description": "大尺寸文字行高"
|
|
559
559
|
},
|
|
560
560
|
{
|
|
561
561
|
"name": "--wot-avatar-line-height-medium",
|
|
562
|
-
"defaultValue": "$typography-title-line
|
|
562
|
+
"defaultValue": "$typography-title-line-height-size-large",
|
|
563
563
|
"description": "中尺寸文字行高"
|
|
564
564
|
},
|
|
565
565
|
{
|
|
566
566
|
"name": "--wot-avatar-line-height-small",
|
|
567
|
-
"defaultValue": "$typography-title-line
|
|
567
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
568
568
|
"description": "小尺寸文字行高"
|
|
569
569
|
},
|
|
570
570
|
{
|
|
@@ -579,7 +579,7 @@
|
|
|
579
579
|
},
|
|
580
580
|
{
|
|
581
581
|
"name": "--wot-avatar-border-radius-full",
|
|
582
|
-
"defaultValue": "$radius-
|
|
582
|
+
"defaultValue": "$radius-full",
|
|
583
583
|
"description": "全圆角"
|
|
584
584
|
},
|
|
585
585
|
{
|
|
@@ -663,7 +663,7 @@
|
|
|
663
663
|
"category": "未分类",
|
|
664
664
|
"description": "用于返回页面顶部的操作按钮。",
|
|
665
665
|
"descriptionZh": "用于返回页面顶部的操作按钮。",
|
|
666
|
-
"since": "2.0.
|
|
666
|
+
"since": "2.0.4",
|
|
667
667
|
"doc": "# Backtop 回到顶部\n\n用于返回页面顶部的操作按钮。\n\n## 组件类型\n\n### 基本用法\n\n由于回到顶部需要实时监听页面滚动位置，通常需要在页面的 `onPageScroll` 生命周期中获取滚动距离，再通过 `scroll-top` 传递给组件。\n\n::: code-group\n\n```html [vue]\n<wd-backtop :scroll-top=\"scrollTop\"></wd-backtop>\n```\n\n```ts [ts]\nimport { onPageScroll } from '@dcloudio/uni-app'\nimport { ref } from 'vue'\n\nconst scrollTop = ref(0)\n\nonPageScroll((event) => {\n scrollTop.value = event.scrollTop\n})\n```\n\n:::\n\n## 组件变体\n\n### 形状与文字\n\n通过 `shape` 切换圆形或方形按钮，通过 `text` 显示按钮文字。\n\n```html\n<wd-backtop :scroll-top=\"scrollTop\" shape=\"square\" text=\"TOP\"></wd-backtop>\n```\n\n### 自定义图标\n\n默认插槽可以替换按钮内部内容。\n\n```html\n<wd-backtop :scroll-top=\"scrollTop\">\n <text>TOP</text>\n</wd-backtop>\n```\n\n## 组件样式\n\n### 自定义显示距离\n\n通过 `top` 设置滚动距离超过多少时显示按钮。\n\n```html\n<wd-backtop :scroll-top=\"scrollTop\" :top=\"600\"></wd-backtop>\n```\n\n### 自定义样式\n\n通过 `custom-style` 和 `icon-style` 调整按钮与图标样式。\n\n```html\n<wd-backtop :scroll-top=\"scrollTop\" custom-style=\"background: #007aff;color:white;\" icon-style=\"color: white;\"></wd-backtop>\n```\n\n### 自定义滚动时间\n\n通过 `duration` 设置返回顶部滚动时长，单位为毫秒。\n\n```html\n<wd-backtop :scroll-top=\"scrollTop\" :duration=\"1000\"></wd-backtop>\n```\n\n## Backtop Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| scroll-top | 页面滚动距离 | `number` | - |\n| text | 按钮文字 | `string` | - |\n| top | 滚动距离超过该值时显示按钮，单位为 `px` | `number` | `300` |\n| duration | 返回顶部滚动时间，单位为 `ms` | `number` | `100` |\n| z-index | 组件层级 | `number` | `10` |\n| icon-style | 自定义图标样式 | `string` | `''` |\n| shape | 按钮形状，可选值为 `circle`、`square` | string | `circle` |\n| bottom | 距离屏幕底部的距离，单位为 `px` | `number` | `100` |\n| right | 距离屏幕右侧的距离，单位为 `px` | `number` | `20` |\n| custom-style | 自定义根节点样式 | `string` | `''` |\n| custom-class | 自定义根节点样式类 | `string` | `''` |\n\n## Backtop Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 自定义按钮内容 |\n",
|
|
668
668
|
"props": [
|
|
669
669
|
{
|
|
@@ -768,7 +768,7 @@
|
|
|
768
768
|
},
|
|
769
769
|
{
|
|
770
770
|
"name": "--wot-backtop-radius-circle",
|
|
771
|
-
"defaultValue": "$radius-
|
|
771
|
+
"defaultValue": "$radius-full",
|
|
772
772
|
"description": "圆形模式圆角"
|
|
773
773
|
},
|
|
774
774
|
{
|
|
@@ -793,7 +793,7 @@
|
|
|
793
793
|
},
|
|
794
794
|
{
|
|
795
795
|
"name": "--wot-backtop-text-line-height",
|
|
796
|
-
"defaultValue": "$typography-label-line
|
|
796
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
797
797
|
"description": "文本行高"
|
|
798
798
|
},
|
|
799
799
|
{
|
|
@@ -842,7 +842,7 @@
|
|
|
842
842
|
"category": "未分类",
|
|
843
843
|
"description": "出现在按钮、图标旁的数字或状态标记。",
|
|
844
844
|
"descriptionZh": "出现在按钮、图标旁的数字或状态标记。",
|
|
845
|
-
"since": "2.0.
|
|
845
|
+
"since": "2.0.4",
|
|
846
846
|
"doc": "# Badge 徽标\n\n\n出现在按钮、图标旁的数字或状态标记。\n\n## 组件类型\n\n### 展示消息数量\n\n通过 `value` 展示消息数量，支持数字或文本。\n\n```html\n<wd-badge custom-class=\"badge\" :value=\"12\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">评论</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"3\" bg-color=\"green\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"1\" type=\"primary\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">评论</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"2\" type=\"warning\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"1\" type=\"success\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">评论</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"2\" type=\"info\">\n <wd-button :round=\"false\" type=\"danger\" size=\"small\">回复</wd-button>\n</wd-badge>\n```\n\n## 组件状态\n\n### 点状类型\n\n设置 `is-dot` 以红点形式标注。\n\n```html\n<wd-badge custom-class=\"badge\" is-dot>数据查询</wd-badge>\n<wd-badge custom-class=\"badge\" is-dot>\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n```\n\n### 展示 0 值\n\n通过 `show-zero` 控制 `value=0` 时是否显示。`is-dot` 优先级高于 `show-zero`。\n\n```html\n<wd-badge custom-class=\"badge\" :value=\"0\" show-zero>\n <wd-button :round=\"false\" type=\"info\" size=\"small\">评论</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"0\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"0\" is-dot>\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n```\n\n## 组件变体\n\n### 徽标形状\n\n设置 `shape` 切换徽标形状。\n\n```html\n<wd-badge custom-class=\"badge\" :value=\"12\" shape=\"square\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">方形</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"12\" shape=\"bubble\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">气泡</wd-button>\n</wd-badge>\n```\n\n## 组件样式\n\n### 可定义消息最大值\n\n通过 `max` 设置最大显示值。仅当 `value` 为数字时生效。\n\n```html\n<wd-badge custom-class=\"badge\" :value=\"200\" :max=\"99\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">评论</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"200\" :max=\"10\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n```\n\n## 特殊样式\n\n### 描边徽标\n\n设置 `border` 可展示描边徽标。\n\n```html\n<wd-badge custom-class=\"badge\" :value=\"12\" border>\n <wd-button :round=\"false\" type=\"primary\" size=\"small\">描边</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"1\" border type=\"primary\">\n <wd-button :round=\"false\" type=\"danger\" size=\"small\">描边</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" :value=\"999\" border type=\"warning\">\n <wd-button :round=\"false\" type=\"success\" size=\"small\">描边</wd-button>\n</wd-badge>\n```\n\n## 内容形态\n\n### 自定义内容\n\n设置字符串 `value` 显示数字以外的文本内容。\n\n```html\n<wd-badge custom-class=\"badge\" value=\"new\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">评论</wd-button>\n</wd-badge>\n<wd-badge custom-class=\"badge\" value=\"hot\">\n <wd-button :round=\"false\" type=\"info\" size=\"small\">回复</wd-button>\n</wd-badge>\n```\n\n```scss\n:deep(.badge) {\n margin: 0 30px 20px 0;\n display: inline-block;\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value | 显示值 | string \\| number | - |\n| max | 最大值，超过后显示 `{max}+`，仅当 `value` 为 number 时生效 | number | - |\n| top | 为正时，角标向下偏移对应像素 | string \\| number | - |\n| right | 为正时，角标向左偏移对应像素 | string \\| number | - |\n| is-dot | 红色点状标注 | boolean | false |\n| hidden | 隐藏 badge | boolean | false |\n| type | 类型，支持 `primary / success / warning / danger / info` | string | - |\n| bg-color | 背景色 | string | - |\n| show-zero | 是否显示 0 | boolean | false |\n| shape | 徽标形状，支持 `circle / square / bubble` | string | circle |\n| border | 是否显示白色描边 | boolean | false |\n| custom-class | 根节点自定义类名 | string | - |\n| custom-style | 根节点自定义样式 | string | - |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 徽标包裹的内容 |\n",
|
|
847
847
|
"props": [
|
|
848
848
|
{
|
|
@@ -989,12 +989,12 @@
|
|
|
989
989
|
},
|
|
990
990
|
{
|
|
991
991
|
"name": "--wot-badge-line-height",
|
|
992
|
-
"defaultValue": "$typography-label-line
|
|
992
|
+
"defaultValue": "$typography-label-line-height-size-extra-small",
|
|
993
993
|
"description": "徽标文本行高"
|
|
994
994
|
},
|
|
995
995
|
{
|
|
996
996
|
"name": "--wot-badge-border-radius",
|
|
997
|
-
"defaultValue": "$radius-
|
|
997
|
+
"defaultValue": "$radius-full",
|
|
998
998
|
"description": "默认圆角"
|
|
999
999
|
},
|
|
1000
1000
|
{
|
|
@@ -1080,8 +1080,8 @@
|
|
|
1080
1080
|
"category": "未分类",
|
|
1081
1081
|
"description": "按钮用于触发一个操作，如提交表单或打开链接。",
|
|
1082
1082
|
"descriptionZh": "按钮用于触发一个操作，如提交表单或打开链接。",
|
|
1083
|
-
"since": "2.0.
|
|
1084
|
-
"doc": "# Button 按钮\n\n按钮用于触发一个操作，如提交表单或打开链接。\n\n## 组件类型\n\n### 类型\n\n```html\n<wd-button>主要按钮</wd-button>\n<wd-button type=\"success\">成功按钮</wd-button>\n<wd-button type=\"info\">信息按钮</wd-button>\n<wd-button type=\"warning\">警告按钮</wd-button>\n<wd-button type=\"danger\">危险按钮</wd-button>\n```\n\n## 组件状态\n\n### 禁用\n\n设置 `disabled` 属性。\n\n```html\n<wd-button disabled>默认按钮</wd-button>\n```\n\n### 加载\n\n设置 `loading` 属性，让按钮处于加载中状态。加载中的按钮是禁止点击的。\n\n```html\n<wd-button loading>加载中</wd-button>\n```\n\n## 组件变体\n\n### 镂空\n\n设置 `variant=\"plain\"`。\n\n```html\n<wd-button variant=\"plain\">主要按钮</wd-button>\n```\n\n### 虚线\n\n设置 `variant=\"dashed\"`。\n\n```html\n<wd-button variant=\"dashed\">主要按钮</wd-button>\n```\n\n### 柔和\n\n设置 `variant=\"soft\"`。\n\n```html\n<wd-button variant=\"soft\">主要按钮</wd-button>\n```\n\n### 文字\n\n设置 `variant=\"text\"`。\n\n```html\n<wd-button variant=\"text\">文字按钮</wd-button>\n```\n\n## 组件样式\n\n### 尺寸\n\n设置 `size` ，支持 'mini'、'small'、'medium'、'large'，默认为 'medium'。\n\n```html\n<wd-button size=\"mini\">迷你按钮</wd-button>\n<wd-button size=\"small\">小号按钮</wd-button>\n<wd-button size=\"medium\">中号按钮</wd-button>\n<wd-button size=\"large\">大号按钮</wd-button>\n```\n\n### 细边框与圆角\n\n设置 `hairline` 与 `round` 属性。\n\n```html\n<wd-button variant=\"plain\" hairline>细边框</wd-button>\n<wd-button variant=\"plain\" round>圆角按钮</wd-button>\n```\n\n## 特殊样式\n\n### custom-class 阴影\n\n通过 `custom-class` 和 `custom-style` 属性可以自定义按钮样式，这里使用 `custom-class` 添加 `Material Design 3` 风格 `box-shadow`。\n\n```html\n<view class=\"page-class\">\n <wd-button custom-class=\"custom-shadow\">主要按钮</wd-button>\n <wd-button type=\"success\" custom-class=\"custom-shadow\">成功按钮</wd-button>\n <wd-button type=\"info\" custom-class=\"custom-shadow\">信息按钮</wd-button>\n <wd-button type=\"warning\" custom-class=\"custom-shadow\">警告按钮</wd-button>\n <wd-button type=\"danger\" custom-class=\"custom-shadow\">危险按钮</wd-button>\n</view>\n```\n\n```scss\n.page-class {\n :deep() {\n .custom-shadow {\n box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);\n }\n }\n}\n```\n\n## 内容形态\n\n### 纯图标按钮\n\n设置 `icon` 属性可展示图标按钮。\n\n```html\n<wd-button icon=\"edit-outline\"></wd-button>\n```\n\n### 图文按钮\n\n结合 `icon` 与内容展示图文按钮；结合 `
|
|
1083
|
+
"since": "2.0.4",
|
|
1084
|
+
"doc": "# Button 按钮\n\n按钮用于触发一个操作，如提交表单或打开链接。\n\n## 组件类型\n\n### 类型\n\n```html\n<wd-button>主要按钮</wd-button>\n<wd-button type=\"success\">成功按钮</wd-button>\n<wd-button type=\"info\">信息按钮</wd-button>\n<wd-button type=\"warning\">警告按钮</wd-button>\n<wd-button type=\"danger\">危险按钮</wd-button>\n```\n\n## 组件状态\n\n### 禁用\n\n设置 `disabled` 属性。\n\n```html\n<wd-button disabled>默认按钮</wd-button>\n```\n\n### 加载\n\n设置 `loading` 属性，让按钮处于加载中状态。加载中的按钮是禁止点击的。\n\n```html\n<wd-button loading>加载中</wd-button>\n```\n\n## 组件变体\n\n### 镂空\n\n设置 `variant=\"plain\"`。\n\n```html\n<wd-button variant=\"plain\">主要按钮</wd-button>\n```\n\n### 虚线\n\n设置 `variant=\"dashed\"`。\n\n```html\n<wd-button variant=\"dashed\">主要按钮</wd-button>\n```\n\n### 柔和\n\n设置 `variant=\"soft\"`。\n\n```html\n<wd-button variant=\"soft\">主要按钮</wd-button>\n```\n\n### 文字\n\n设置 `variant=\"text\"`。\n\n```html\n<wd-button variant=\"text\">文字按钮</wd-button>\n```\n\n## 组件样式\n\n### 尺寸\n\n设置 `size` ，支持 'mini'、'small'、'medium'、'large'，默认为 'medium'。\n\n```html\n<wd-button size=\"mini\">迷你按钮</wd-button>\n<wd-button size=\"small\">小号按钮</wd-button>\n<wd-button size=\"medium\">中号按钮</wd-button>\n<wd-button size=\"large\">大号按钮</wd-button>\n```\n\n### 细边框与圆角\n\n设置 `hairline` 与 `round` 属性。\n\n```html\n<wd-button variant=\"plain\" hairline>细边框</wd-button>\n<wd-button variant=\"plain\" round>圆角按钮</wd-button>\n```\n\n## 特殊样式\n\n### custom-class 阴影\n\n通过 `custom-class` 和 `custom-style` 属性可以自定义按钮样式，这里使用 `custom-class` 添加 `Material Design 3` 风格 `box-shadow`。\n\n```html\n<view class=\"page-class\">\n <wd-button custom-class=\"custom-shadow\">主要按钮</wd-button>\n <wd-button type=\"success\" custom-class=\"custom-shadow\">成功按钮</wd-button>\n <wd-button type=\"info\" custom-class=\"custom-shadow\">信息按钮</wd-button>\n <wd-button type=\"warning\" custom-class=\"custom-shadow\">警告按钮</wd-button>\n <wd-button type=\"danger\" custom-class=\"custom-shadow\">危险按钮</wd-button>\n</view>\n```\n\n```scss\n.page-class {\n :deep() {\n .custom-shadow {\n box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);\n }\n }\n}\n```\n\n## 内容形态\n\n### 纯图标按钮\n\n设置 `icon` 属性可展示图标按钮。\n\n```html\n<wd-button icon=\"edit-outline\"></wd-button>\n```\n\n### 图文按钮\n\n结合 `icon` 与内容展示图文按钮；结合 `class-prefix` 可使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。\n\n```html\n<wd-button icon=\"download\">下载</wd-button>\n<wd-button class-prefix=\"fish\" icon=\"kehuishouwu\">可回收</wd-button>\n```\n\n## 布局能力\n\n### 块状按钮\n\n设置 `block` 属性。\n\n```html\n<wd-button block>主要按钮</wd-button>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 按钮类型，可选值为 `primary`、`success`、`info`、`warning`、`danger` | string | primary |\n| variant | 按钮变体，可选值为 `base`、`plain`、`dashed`、`soft`、`text` | string | base |\n| size | 按钮尺寸，可选值为 `mini`、`small`、`medium`、`large` | string | medium |\n| round | 圆角按钮 | boolean | false |\n| disabled | 禁用按钮 | boolean | false |\n| hairline | 细边框 | boolean | false |\n| block | 块状按钮 | boolean | false |\n| loading | 加载中按钮 | boolean | false |\n| text | 按钮文本 | string | - |\n| icon | 图标类名 | string | - |\n| class-prefix | 类名前缀，用于使用自定义图标，用法参考 Icon 组件 | string | wd-icon |\n| css-icon | CSS 图标，用法参考 Icon 组件 | `boolean \\| string` | false |\n| loading-props | 加载配置项 | `Partial<LoadingProps>` | - |\n| open-type | 开放能力类型，详见下方 `ButtonOpenType` | string | - |\n| hover-stop-propagation | 阻止祖先节点点击态 | boolean | false |\n| hover-start-time | 按下后多久出现点击态（ms） | number | 20 |\n| hover-stay-time | 松开后多久移除点击态（ms） | number | 70 |\n| lang | 用户信息语言，可选值为 `zh_CN`、`zh_TW`、`en` | string | - |\n| session-from | 会话来源（`open-type=contact` 时有效） | string | - |\n| send-message-title | 会话消息卡片标题（`open-type=contact` 时有效） | string | 当前标题 |\n| send-message-path | 会话消息卡片路径（`open-type=contact` 时有效） | string | 当前分享路径 |\n| send-message-img | 会话消息卡片图片（`open-type=contact` 时有效） | string | 截图 |\n| app-parameter | 打开 APP 传参（`open-type=launchApp` 时有效） | string | - |\n| show-message-card | 显示会话消息卡片（`open-type=contact` 时有效） | boolean | false |\n| button-id | 按钮唯一标识 | string | - |\n| scope | 支付宝授权范围，可选值为 `phoneNumber`、`userInfo`（open-type=getAuthorize 时有效） | string | - |\n| loading-color | 加载图标颜色 | string | - |\n| custom-class | 根节点自定义类名 | string | - |\n| custom-style | 根节点自定义样式 | string | - |\n\n### ButtonOpenType 开放能力\n\n<!-- prettier-ignore -->\n| 属性 | 说明 |\n| --- | --- |\n| feedback | 打开“意见反馈”页 |\n| share | 触发用户转发 |\n| getUserInfo | 获取用户信息 |\n| contact | 打开客服会话 |\n| getPhoneNumber | 获取手机号 |\n| getRealtimePhoneNumber | 实时获取手机号（仅微信） |\n| launchApp | 在小程序中打开 APP |\n| openSetting | 打开授权设置页 |\n| chooseAvatar | 获取用户头像 |\n| getAuthorize | 支持支付宝授权（配合 `scope`） |\n| lifestyle | 关注生活号（支付宝） |\n| contactShare | 分享到通讯录（支付宝） |\n| openGroupProfile | 打开群资料卡（微信） |\n| openGuildProfile | 打开频道资料卡（微信） |\n| openPublicProfile | 打开公众号资料卡（微信） |\n| shareMessageToFriend | 分享消息给朋友（微信） |\n| addFriend | 添加好友（微信） |\n| addColorSign | 添加彩签（微信） |\n| addGroupApp | 添加群应用（微信） |\n| addToFavorites | 收藏（微信） |\n| chooseAddress | 选择收货地址（微信） |\n| chooseInvoiceTitle | 选择发票抬头（微信） |\n| login | 授权登录（平台能力） |\n| subscribe | 订阅（平台能力） |\n| favorite | 收藏（平台能力） |\n| watchLater | 稍后再看（平台能力） |\n| openProfile | 打开个人主页（平台能力） |\n| agreePrivacyAuthorization | 用户同意隐私协议 |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击事件 | `event` |\n| getuserinfo | 获取用户信息回调 | `event` |\n| contact | 客服消息回调（`open-type=contact`） | `event` |\n| getphonenumber | 获取手机号回调（`open-type=getPhoneNumber`） | `event` |\n| getrealtimephonenumber | 实时获取手机号回调（`open-type=getRealtimePhoneNumber`） | `event` |\n| error | 开放能力错误回调（`open-type=launchApp`） | `event` |\n| launchapp | 打开 APP 成功回调（`open-type=launchApp`） | `event` |\n| opensetting | 打开授权设置页回调（`open-type=openSetting`） | `event` |\n| chooseavatar | 获取用户头像回调（`open-type=chooseAvatar`） | `event` |\n| agreeprivacyauthorization | 同意隐私协议回调（`open-type=agreePrivacyAuthorization`） | `event` |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 按钮内容 |\n",
|
|
1085
1085
|
"props": [
|
|
1086
1086
|
{
|
|
1087
1087
|
"name": "type",
|
|
@@ -1145,10 +1145,16 @@
|
|
|
1145
1145
|
},
|
|
1146
1146
|
{
|
|
1147
1147
|
"name": "class-prefix",
|
|
1148
|
-
"description": "
|
|
1148
|
+
"description": "类名前缀，用于使用自定义图标，用法参考 Icon 组件",
|
|
1149
1149
|
"type": "string",
|
|
1150
1150
|
"default": "wd-icon"
|
|
1151
1151
|
},
|
|
1152
|
+
{
|
|
1153
|
+
"name": "css-icon",
|
|
1154
|
+
"description": "CSS 图标，用法参考 Icon 组件",
|
|
1155
|
+
"type": "`boolean | string`",
|
|
1156
|
+
"default": "false"
|
|
1157
|
+
},
|
|
1152
1158
|
{
|
|
1153
1159
|
"name": "loading-props",
|
|
1154
1160
|
"description": "加载配置项",
|
|
@@ -1617,64 +1623,44 @@
|
|
|
1617
1623
|
"description": "large 尺寸文字字号"
|
|
1618
1624
|
},
|
|
1619
1625
|
{
|
|
1620
|
-
"name": "--wot-button-
|
|
1621
|
-
"defaultValue": "$
|
|
1622
|
-
"description": "mini
|
|
1623
|
-
},
|
|
1624
|
-
{
|
|
1625
|
-
"name": "--wot-button-line-height-small",
|
|
1626
|
-
"defaultValue": "$typography-body-line--height-size-main",
|
|
1627
|
-
"description": "small 尺寸文字行高"
|
|
1628
|
-
},
|
|
1629
|
-
{
|
|
1630
|
-
"name": "--wot-button-line-height-medium",
|
|
1631
|
-
"defaultValue": "$typography-body-line--height-size-extra-large",
|
|
1632
|
-
"description": "medium 尺寸文字行高"
|
|
1633
|
-
},
|
|
1634
|
-
{
|
|
1635
|
-
"name": "--wot-button-line-height-large",
|
|
1636
|
-
"defaultValue": "$typography-body-line--height-size-extra-large",
|
|
1637
|
-
"description": "large 尺寸文字行高"
|
|
1638
|
-
},
|
|
1639
|
-
{
|
|
1640
|
-
"name": "--wot-button-left-right-padding-mini",
|
|
1641
|
-
"defaultValue": "$padding-loose",
|
|
1642
|
-
"description": "mini 尺寸左右内边距"
|
|
1626
|
+
"name": "--wot-button-padding-mini",
|
|
1627
|
+
"defaultValue": "$padding-zero $padding-loose",
|
|
1628
|
+
"description": "mini 尺寸内边距"
|
|
1643
1629
|
},
|
|
1644
1630
|
{
|
|
1645
|
-
"name": "--wot-button-
|
|
1646
|
-
"defaultValue": "$padding-loose",
|
|
1647
|
-
"description": "small
|
|
1631
|
+
"name": "--wot-button-padding-small",
|
|
1632
|
+
"defaultValue": "$padding-zero $padding-loose",
|
|
1633
|
+
"description": "small 尺寸内边距"
|
|
1648
1634
|
},
|
|
1649
1635
|
{
|
|
1650
|
-
"name": "--wot-button-
|
|
1651
|
-
"defaultValue": "$padding-extra-loose",
|
|
1652
|
-
"description": "medium
|
|
1636
|
+
"name": "--wot-button-padding-medium",
|
|
1637
|
+
"defaultValue": "$padding-zero $padding-extra-loose",
|
|
1638
|
+
"description": "medium 尺寸内边距"
|
|
1653
1639
|
},
|
|
1654
1640
|
{
|
|
1655
|
-
"name": "--wot-button-
|
|
1656
|
-
"defaultValue": "$padding-super-loose",
|
|
1657
|
-
"description": "large
|
|
1641
|
+
"name": "--wot-button-padding-large",
|
|
1642
|
+
"defaultValue": "$padding-zero $padding-super-loose",
|
|
1643
|
+
"description": "large 尺寸内边距"
|
|
1658
1644
|
},
|
|
1659
1645
|
{
|
|
1660
|
-
"name": "--wot-button-
|
|
1661
|
-
"defaultValue": "$
|
|
1662
|
-
"description": "mini
|
|
1646
|
+
"name": "--wot-button-height-mini",
|
|
1647
|
+
"defaultValue": "$n-28",
|
|
1648
|
+
"description": "mini 尺寸高度"
|
|
1663
1649
|
},
|
|
1664
1650
|
{
|
|
1665
|
-
"name": "--wot-button-
|
|
1666
|
-
"defaultValue": "$
|
|
1667
|
-
"description": "small
|
|
1651
|
+
"name": "--wot-button-height-small",
|
|
1652
|
+
"defaultValue": "$n-32",
|
|
1653
|
+
"description": "small 尺寸高度"
|
|
1668
1654
|
},
|
|
1669
1655
|
{
|
|
1670
|
-
"name": "--wot-button-
|
|
1671
|
-
"defaultValue": "$
|
|
1672
|
-
"description": "medium
|
|
1656
|
+
"name": "--wot-button-height-medium",
|
|
1657
|
+
"defaultValue": "$n-40",
|
|
1658
|
+
"description": "medium 尺寸高度"
|
|
1673
1659
|
},
|
|
1674
1660
|
{
|
|
1675
|
-
"name": "--wot-button-
|
|
1676
|
-
"defaultValue": "$
|
|
1677
|
-
"description": "large
|
|
1661
|
+
"name": "--wot-button-height-large",
|
|
1662
|
+
"defaultValue": "$n-44",
|
|
1663
|
+
"description": "large 尺寸高度"
|
|
1678
1664
|
},
|
|
1679
1665
|
{
|
|
1680
1666
|
"name": "--wot-button-only-icon-padding-mini",
|
|
@@ -1693,7 +1679,7 @@
|
|
|
1693
1679
|
},
|
|
1694
1680
|
{
|
|
1695
1681
|
"name": "--wot-button-only-icon-padding-large",
|
|
1696
|
-
"defaultValue": "$padding-
|
|
1682
|
+
"defaultValue": "$padding-main",
|
|
1697
1683
|
"description": "large 尺寸仅图标按钮内边距"
|
|
1698
1684
|
},
|
|
1699
1685
|
{
|
|
@@ -1728,7 +1714,7 @@
|
|
|
1728
1714
|
},
|
|
1729
1715
|
{
|
|
1730
1716
|
"name": "--wot-button-radius-full",
|
|
1731
|
-
"defaultValue": "$radius-
|
|
1717
|
+
"defaultValue": "$radius-full",
|
|
1732
1718
|
"description": "圆形圆角"
|
|
1733
1719
|
},
|
|
1734
1720
|
{
|
|
@@ -1808,7 +1794,7 @@
|
|
|
1808
1794
|
"name": "demo-12",
|
|
1809
1795
|
"title": "图文按钮",
|
|
1810
1796
|
"description": "图文按钮",
|
|
1811
|
-
"code": "<wd-button icon=\"download\">下载</wd-button>\n<wd-button
|
|
1797
|
+
"code": "<wd-button icon=\"download\">下载</wd-button>\n<wd-button class-prefix=\"fish\" icon=\"kehuishouwu\">可回收</wd-button>"
|
|
1812
1798
|
},
|
|
1813
1799
|
{
|
|
1814
1800
|
"name": "demo-13",
|
|
@@ -1825,7 +1811,7 @@
|
|
|
1825
1811
|
"category": "未分类",
|
|
1826
1812
|
"description": "提供单选、多选、范围、周/月、日期时间等日历选择能力。",
|
|
1827
1813
|
"descriptionZh": "提供单选、多选、范围、周/月、日期时间等日历选择能力。",
|
|
1828
|
-
"since": "2.0.
|
|
1814
|
+
"since": "2.0.4",
|
|
1829
1815
|
"doc": "# Calendar 日历选择器\n\n提供单选、多选、范围、周/月、日期时间等日历选择能力。\n\n::: tip 性能提示\n`min-date` 与 `max-date` 不建议设置差距过大，避免大量日期计算影响性能。若业务需要较大时间跨度，建议配合 `switch-mode`（如 `month` / `year-month`）减少一次性渲染压力。\n:::\n\n## 组件类型\n\n### 单个日期选择\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"单个日期选择\" :value=\"formatValue(value1, 'date')\" is-link @click=\"show1 = true\" />\n</wd-cell-group>\n<wd-calendar v-model=\"value1\" v-model:visible=\"show1\" @confirm=\"handleConfirm\" />\n```\n\n### 多个日期选择\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"多个日期选择\" :value=\"formatValue(value2, 'dates')\" is-link @click=\"show2 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"dates\" v-model=\"value2\" v-model:visible=\"show2\" />\n```\n\n### 范围选择\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"日期范围选择\" :value=\"formatValue(value3, 'daterange')\" is-link @click=\"show3 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"daterange\" v-model=\"value3\" v-model:visible=\"show3\" />\n```\n\n### 日期时间类型\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"日期时间选择\" :value=\"formatValue(value4, 'datetime')\" is-link @click=\"show4 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"datetime\" v-model=\"value4\" v-model:visible=\"show4\" />\n```\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"日期时间范围选择\" :value=\"formatValue(value5, 'datetimerange')\" is-link @click=\"show5 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"datetimerange\" v-model=\"value5\" v-model:visible=\"show5\" />\n```\n\n### 周与月类型\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"周选择\" :value=\"formatValue(value6, 'week')\" is-link @click=\"show6 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"week\" v-model=\"value6\" v-model:visible=\"show6\" />\n```\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"月选择\" :value=\"formatValue(value7, 'month')\" is-link @click=\"show7 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"month\" :min-date=\"minDate\" v-model=\"value7\" v-model:visible=\"show7\" />\n```\n\n### 周范围与月范围选择\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"周范围选择\" :value=\"formatValue(value8, 'weekrange')\" is-link @click=\"show8 = true\" />\n</wd-cell-group>\n<wd-calendar :first-day-of-week=\"1\" type=\"weekrange\" v-model=\"value8\" v-model:visible=\"show8\" />\n```\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"月范围选择\" :value=\"formatValue(value9, 'monthrange')\" is-link @click=\"show9 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"monthrange\" v-model=\"value9\" v-model:visible=\"show9\" />\n```\n\n## 组件状态\n\n### 快捷操作\n\n设置 `show-confirm=\"false\"` 后，选中即确认。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"快捷操作\" :value=\"formatValue(value16, 'date')\" is-link @click=\"show16 = true\" />\n</wd-cell-group>\n<wd-calendar v-model=\"value16\" v-model:visible=\"show16\" :show-confirm=\"false\" />\n```\n\n### before-confirm\n\n设置 `before-confirm` 在确认前拦截，返回 `false` 或 `Promise<false>` 可阻止确认。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"before-confirm\" :value=\"formatValue(value14, 'date')\" is-link @click=\"show14 = true\" />\n</wd-cell-group>\n<wd-calendar v-model=\"value14\" v-model:visible=\"show14\" :before-confirm=\"beforeConfirm\" />\n```\n\n## 组件变体\n\n### 切换模式\n\n设置 `switch-mode` 控制面板切换行为：\n- `none`：平铺，不展示切换按钮\n- `month`：按月切换\n- `year-month`：支持按年与按月切换\n\n```html\n<wd-radio-group v-model=\"switchMode\" type=\"button\">\n <wd-radio value=\"none\">none</wd-radio>\n <wd-radio value=\"month\">month</wd-radio>\n <wd-radio value=\"year-month\">year-month</wd-radio>\n</wd-radio-group>\n```\n\n### 日周月切换\n\n设置 `show-type-switch` 开启日/周/月切换。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"日周月切换\" :value=\"formatValue(value10, 'date')\" is-link @click=\"show10 = true\" />\n</wd-cell-group>\n<wd-calendar :first-day-of-week=\"1\" show-type-switch v-model=\"value10\" v-model:visible=\"show10\" :switch-mode=\"switchMode\" />\n```\n\n## 组件样式\n\n### 日期格式化\n\n设置 `formatter` 可定制日期单元格文案与状态展示。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"日期格式化\" :value=\"formatValue(value11, 'daterange')\" is-link @click=\"show11 = true\" />\n</wd-cell-group>\n<wd-calendar type=\"daterange\" v-model=\"value11\" v-model:visible=\"show11\" :formatter=\"formatter\" />\n```\n\n### 自定义展示\n\n设置 `inner-display-format` 自定义范围选择面板中的起止文案。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"自定义展示\" :value=\"displayFormat(value13)\" is-link @click=\"show13 = true\" />\n</wd-cell-group>\n<wd-calendar\n type=\"daterange\"\n v-model=\"value13\"\n v-model:visible=\"show13\"\n :inner-display-format=\"innerDisplayFormat\"\n/>\n```\n\n## 特殊样式\n\n### 快捷选项\n\n设置 `shortcuts` 与 `on-shortcuts-click` 实现快捷日期区间。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"快捷选项\" :value=\"formatValue(value12, 'daterange')\" is-link @click=\"show12 = true\" />\n</wd-cell-group>\n<wd-calendar\n :shortcuts=\"shortcuts\"\n :on-shortcuts-click=\"onShortcutsClick\"\n type=\"daterange\"\n v-model=\"value12\"\n v-model:visible=\"show12\"\n/>\n```\n\n### 拓展确定区域\n\n通过 `confirm-left` / `confirm-right` 插槽拓展确定区按钮。\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"拓展确定区域\" :value=\"formatValue(value19, 'date')\" is-link @click=\"show19 = true\" />\n</wd-cell-group>\n<wd-calendar v-model=\"value19\" v-model:visible=\"show19\">\n <template #confirm-right>\n <wd-button block plain custom-style=\"margin-left: 10px;\" @click=\"selectToday\">选择今天</wd-button>\n </template>\n</wd-calendar>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 选中值，13 位时间戳或时间戳数组 | `number \\| number[] \\| null` | - |\n| v-model:visible | 是否显示弹层 | boolean | false |\n| type | 日期类型，支持 `date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange` | string | date |\n| min-date | 最小日期时间戳 | number | 当前日期往前 6 个月 |\n| max-date | 最大日期时间戳 | number | 当前日期往后 6 个月 |\n| first-day-of-week | 周起始日（0 表示周日） | number | 0 |\n| formatter | 日期格式化函数 | `CalendarFormatter` | - |\n| max-range | 范围类型的最大可选范围 | number | - |\n| range-prompt | 超出最大范围提示文案 | string | - |\n| allow-same-day | 范围类型是否允许同一天/同一周/同一月 | boolean | false |\n| default-time | 日期默认时分秒 | `string \\| string[]` | - |\n| time-filter | 时间选项过滤函数（datetime / datetimerange） | `CalendarTimeFilter` | - |\n| hide-second | 是否隐藏秒选择（datetime / datetimerange） | boolean | false |\n| title | 弹层标题 | string | 选择日期（内置文案） |\n| close-on-click-modal | 点击遮罩是否关闭 | boolean | true |\n| z-index | 弹层层级 | number | 15 |\n| show-confirm | 是否显示确认按钮 | boolean | true |\n| confirm-text | 确认按钮文案 | string | 确定（内置文案） |\n| inner-display-format | 自定义范围面板内部回显 | `CalendarInnerDisplayFormat` | - |\n| ellipsis | 范围文案是否省略显示 | boolean | false |\n| show-type-switch | 是否显示日周月切换 | boolean | false |\n| shortcuts | 快捷选项列表（项需包含 `text`） | `Record<string, any>[]` | `[]` |\n| on-shortcuts-click | 快捷选项点击回调 | `CalendarOnShortcutsClick` | - |\n| safe-area-inset-bottom | 是否开启底部安全区 | boolean | true |\n| before-confirm | 确认前校验函数 | `CalendarBeforeConfirm` | - |\n| custom-view-class | 面板内部视图类名 | string | `''` |\n| immediate-change | 是否手指松开即触发时间选择 change 事件 | boolean | false |\n| root-portal | 是否脱离页面渲染 | boolean | false |\n| panel-height | 可滚动面板高度 | number | 316 |\n| show-panel-title | 是否展示滚动面板标题 | boolean | true |\n| switch-mode | 切换模式，可选值为`none`、`month`、`year-month`，`none` 平铺展示所有月份/年份且不展示切换按钮；`month` 支持按月切换并展示上个月/下个月按钮；`year-month` 支持按年与按月切换并展示上一年/下一年、上个月/下个月按钮。大跨度日期场景建议使用 `month` 或 `year-month` 以降低渲染压力 | string | none |\n| duration | 弹层动画时长 | number | 200 |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| confirm | 点击确认后触发 | `{ value, type }` |\n| change | 面板日期变化时触发 | `{ value }` |\n| cancel | 关闭且未确认时触发 | - |\n| open | 日历打开时触发 | - |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开日历弹层 | - |\n| close | 关闭日历弹层 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| confirm-left | 确认区域左侧插槽 |\n| confirm-right | 确认区域右侧插槽 |\n\n## CalendarDayItem 数据结构\n\n| 属性 | 说明 | 类型 |\n| --- | --- | --- |\n| type | 日期状态类型 | CalendarDayType |\n| date | 13 位时间戳 | number |\n| text | 日期文本内容 | string |\n| topInfo | 上方提示信息 | string |\n| bottomInfo | 下方提示信息 | string |\n| disabled | 是否禁用 | boolean |\n\n### CalendarDayType\n\n| 类型 | 说明 |\n| --- | --- |\n| selected | 单日期选中 |\n| start | 范围开始日期 |\n| end | 范围结束日期 |\n| middle | 范围开始与结束之间的日期 |\n| same | 范围开始与结束日期同一天 |\n| current | 当前日期 |\n| multiple-middle | 多日期范围选择，开始与结束之间的日期 |\n| multiple-selected | 多日期范围选择，选中的日期 |\n",
|
|
1830
1816
|
"props": [
|
|
1831
1817
|
{
|
|
@@ -2113,7 +2099,7 @@
|
|
|
2113
2099
|
},
|
|
2114
2100
|
{
|
|
2115
2101
|
"name": "--wot-calendar-range-item-line-height",
|
|
2116
|
-
"defaultValue": "$typography-body-line
|
|
2102
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
2117
2103
|
"description": "-"
|
|
2118
2104
|
},
|
|
2119
2105
|
{
|
|
@@ -2266,7 +2252,7 @@
|
|
|
2266
2252
|
"category": "未分类",
|
|
2267
2253
|
"description": "提供单选、多选、范围、周/月、日期时间等日历选择能力，可作为业务日历选择器的底层面板组件。",
|
|
2268
2254
|
"descriptionZh": "提供单选、多选、范围、周/月、日期时间等日历选择能力，可作为业务日历选择器的底层面板组件。",
|
|
2269
|
-
"since": "2.0.
|
|
2255
|
+
"since": "2.0.4",
|
|
2270
2256
|
"doc": "# CalendarView 日历面板组件\n\n提供单选、多选、范围、周/月、日期时间等日历选择能力，可作为业务日历选择器的底层面板组件。\n\n::: tip 性能提示\n`min-date` 与 `max-date` 不建议设置差距过大。若业务需要较大时间跨度，建议配合 `switch-mode`（`month` / `year-month`）降低一次性渲染压力。\n:::\n\n## 组件类型\n\n### 单个日期选择\n\n```html\n<wd-calendar-view type=\"date\" v-model=\"value\" @change=\"handleChange\" />\n```\n\n### 多个日期选择\n\n```html\n<wd-calendar-view type=\"dates\" v-model=\"value\" @change=\"handleChange\" />\n```\n\n### 日期范围选择\n\n```html\n<wd-calendar-view type=\"daterange\" v-model=\"value\" @change=\"handleChange\" />\n```\n\n### 日期时间类型\n\n```html\n<wd-calendar-view type=\"datetime\" v-model=\"value\" @change=\"handleChange\" />\n<wd-calendar-view type=\"datetimerange\" v-model=\"valueRange\" @change=\"handleChange\" />\n```\n\n### 周与月类型\n\n```html\n<wd-calendar-view type=\"week\" v-model=\"value\" :first-day-of-week=\"1\" @change=\"handleChange\" />\n<wd-calendar-view type=\"month\" v-model=\"value\" @change=\"handleChange\" />\n<wd-calendar-view type=\"weekrange\" v-model=\"valueRange\" @change=\"handleChange\" />\n<wd-calendar-view type=\"monthrange\" v-model=\"valueRange\" @change=\"handleChange\" />\n```\n\n## 组件状态\n\n### 范围选择允许同一天\n\n```html\n<wd-calendar-view type=\"daterange\" v-model=\"valueRange\" allow-same-day @change=\"handleChange\" />\n```\n\n## 组件变体\n\n### 切换模式\n\n设置 `switch-mode` 控制面板切换行为：\n- `none`：平铺展示所有月份/年份，不展示切换按钮\n- `month`：支持按月切换，展示上个月/下个月按钮\n- `year-month`：支持按年与按月切换，展示上一年/下一年、上个月/下个月按钮\n\n```html\n<wd-calendar-view type=\"date\" v-model=\"value\" switch-mode=\"month\" @change=\"handleChange\" />\n```\n\n## 组件样式\n\n### 格式化日期\n\n设置 `formatter` 可定制日期单元格文案与状态。\n\n```html\n<wd-calendar-view type=\"daterange\" v-model=\"valueRange\" allow-same-day :formatter=\"formatter\" @change=\"handleChange\" />\n```\n\n### 设置周起始日\n\n```html\n<wd-calendar-view :first-day-of-week=\"1\" v-model=\"value\" @change=\"handleChange\" />\n```\n\n### 展示面板标题\n\n```html\n<wd-calendar-view type=\"daterange\" :show-panel-title=\"false\" v-model=\"valueRange\" @change=\"handleChange\" />\n```\n\n## 特殊样式\n\n### 最大范围限制\n\n```html\n<wd-calendar-view type=\"daterange\" :max-range=\"3\" v-model=\"valueRange\" @change=\"handleChange\" />\n```\n\n### 时间选项过滤\n\n设置 `hide-second` 与 `time-filter` 过滤时分秒选项。\n\n```html\n<wd-calendar-view type=\"datetime\" v-model=\"value\" hide-second :time-filter=\"timeFilter\" @change=\"handleChange\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 选中值，13 位时间戳或时间戳数组 | `number \\| number[] \\| null` | - |\n| type | 日期类型，支持 `date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange` | string | date |\n| min-date | 最小日期时间戳 | number | 当前日期往前 6 个月 |\n| max-date | 最大日期时间戳 | number | 当前日期往后 6 个月 |\n| first-day-of-week | 周起始日（0 表示周日） | number | 0 |\n| formatter | 日期格式化函数 | `CalendarFormatter` | - |\n| max-range | 范围类型的最大可选范围 | number | - |\n| range-prompt | 超出最大范围提示文案 | string | - |\n| allow-same-day | 范围类型是否允许同一天/同一周/同一月 | boolean | false |\n| show-panel-title | 是否展示面板标题 | boolean | true |\n| default-time | 日期默认时分秒 | `string \\| string[]` | `00:00:00` |\n| panel-height | 可滚动面板高度 | number | 316 |\n| time-filter | 时间选项过滤函数（datetime / datetimerange） | `CalendarTimeFilter` | - |\n| time-item-height | 时间选项高度 | number | 44 |\n| time-visible-item-count | 时间可见项数量 | number | 3 |\n| hide-second | 是否隐藏秒选择（datetime / datetimerange） | boolean | false |\n| immediate-change | 是否手指松开即触发时间选择 change 事件 | boolean | false |\n| switch-mode | 切换模式，可选值为`none`、`month`、`year-month`，`none` 平铺展示所有月份/年份且不展示切换按钮；`month` 支持按月切换并展示上个月/下个月按钮；`year-month` 支持按年与按月切换并展示上一年/下一年、上个月/下个月按钮。大跨度日期场景建议使用 `month` 或 `year-month` 以降低渲染压力 | string | none |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 面板值变化时触发 | `{ value }` |\n| pickstart | 时间选择滚动开始时触发 | - |\n| pickend | 时间选择滚动结束时触发 | - |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| scrollIntoView | 使当前日期或选中日期滚动到可视区域（面板隐藏到显示时建议调用） | - |\n\n## CalendarDayItem 数据结构\n\n| 属性 | 说明 | 类型 |\n| --- | --- | --- |\n| type | 日期状态类型 | CalendarDayType |\n| date | 13 位时间戳 | number |\n| text | 日期文本内容 | string |\n| topInfo | 上方提示信息 | string |\n| bottomInfo | 下方提示信息 | string |\n| disabled | 是否禁用 | boolean |\n\n### CalendarDayType\n\n| 类型 | 说明 |\n| --- | --- |\n| selected | 单日期选中 |\n| start | 范围开始日期 |\n| end | 范围结束日期 |\n| middle | 范围开始与结束之间的日期 |\n| same | 范围开始与结束日期同一天 |\n| current | 当前日期 |\n| multiple-middle | 多日期范围选择，开始与结束之间的日期 |\n| multiple-selected | 多日期范围选择，选中的日期 |\n",
|
|
2271
2257
|
"props": [
|
|
2272
2258
|
{
|
|
@@ -2416,7 +2402,7 @@
|
|
|
2416
2402
|
},
|
|
2417
2403
|
{
|
|
2418
2404
|
"name": "--wot-calendar-view-panel-title-line-height",
|
|
2419
|
-
"defaultValue": "$typography-body-line
|
|
2405
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
2420
2406
|
"description": "-"
|
|
2421
2407
|
},
|
|
2422
2408
|
{
|
|
@@ -2456,7 +2442,7 @@
|
|
|
2456
2442
|
},
|
|
2457
2443
|
{
|
|
2458
2444
|
"name": "--wot-calendar-view-week-line-height",
|
|
2459
|
-
"defaultValue": "$typography-body-line
|
|
2445
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
2460
2446
|
"description": "-"
|
|
2461
2447
|
},
|
|
2462
2448
|
{
|
|
@@ -2531,7 +2517,7 @@
|
|
|
2531
2517
|
},
|
|
2532
2518
|
{
|
|
2533
2519
|
"name": "--wot-calendar-view-info-line-height",
|
|
2534
|
-
"defaultValue": "$typography-label-line
|
|
2520
|
+
"defaultValue": "$typography-label-line-height-size-extra-small",
|
|
2535
2521
|
"description": "-"
|
|
2536
2522
|
},
|
|
2537
2523
|
{
|
|
@@ -2687,7 +2673,7 @@
|
|
|
2687
2673
|
"category": "未分类",
|
|
2688
2674
|
"description": "用于展示商品的图片、价格等信息。",
|
|
2689
2675
|
"descriptionZh": "用于展示商品的图片、价格等信息。",
|
|
2690
|
-
"since": "2.0.
|
|
2676
|
+
"since": "2.0.4",
|
|
2691
2677
|
"doc": "# Card 卡片\n\n用于展示商品的图片、价格等信息。\n\n## 组件类型\n\n### 基本使用\n\n通过 `title` 设置标题，默认插槽传入内容，`footer` 插槽用于底部操作区。\n\n```html\n<wd-card title=\"岳阳楼记\">\n <view class=\"content-text\">\n 至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。\n </view>\n <template #footer>\n <wd-button size=\"small\" plain>阅读全文</wd-button>\n </template>\n</wd-card>\n```\n\n### 矩形卡片\n\n设置 `type=\"rectangle\"` 使用矩形卡片样式。\n\n```html\n<wd-card title=\"生活记录\" type=\"rectangle\">\n <view class=\"list-group\">\n <view class=\"list-item\">\n <image src=\"https://wot-ui.cn/assets/panda.jpg\" class=\"list-item__image\" mode=\"aspectFill\" />\n <view class=\"list-item__content\">\n <view class=\"list-item__title\">今天天气真好</view>\n <view class=\"list-item__desc\">2026年2月11日 晴天 22℃</view>\n </view>\n </view>\n </view>\n <template #footer>\n <wd-button size=\"small\" plain>点赞</wd-button>\n </template>\n</wd-card>\n```\n\n## 组件样式\n\n### 复杂卡片\n\n结合图片、标签、属性区块可构建信息密度更高的卡片内容。\n\n```html\n<wd-card title=\"宠物档案\">\n <view class=\"info-card\">...</view>\n <template #footer>\n <wd-button size=\"small\" plain>点赞 (1.2w)</wd-button>\n </template>\n</wd-card>\n```\n\n## 内容形态\n\n### 自定义标题\n\n使用 `title` 插槽自定义标题区域内容。\n\n```html\n<wd-card type=\"rectangle\">\n <template #title>\n <view class=\"custom-title\">\n <view>兴趣爱好</view>\n <view class=\"custom-title__tip\">\n <wd-icon name=\"heart\" size=\"14px\" custom-style=\"vertical-align: bottom; margin-right: 4px;\" />\n 快乐源泉\n </view>\n </view>\n </template>\n <view class=\"list-group\">...</view>\n</wd-card>\n```\n\n## 特殊样式\n\n### 去除 Footer\n\n不传 `footer` 插槽时，底部区域不会渲染。\n\n```html\n<wd-card title=\"精彩瞬间\" type=\"rectangle\">\n <view class=\"moment-card\">...</view>\n</wd-card>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 卡片标题 | string | - |\n| type | 卡片类型，支持 `rectangle` | string | - |\n| custom-title-class | 标题区域自定义类名 | string | `''` |\n| custom-content-class | 内容区域自定义类名 | string | `''` |\n| custom-footer-class | 底部区域自定义类名 | string | `''` |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 卡片内容 |\n| title | 卡片标题 |\n| footer | 底部操作内容 |\n",
|
|
2692
2678
|
"props": [
|
|
2693
2679
|
{
|
|
@@ -2806,7 +2792,7 @@
|
|
|
2806
2792
|
},
|
|
2807
2793
|
{
|
|
2808
2794
|
"name": "--wot-card-title-line-height",
|
|
2809
|
-
"defaultValue": "$typography-body-line
|
|
2795
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
2810
2796
|
"description": "标题行高"
|
|
2811
2797
|
},
|
|
2812
2798
|
{
|
|
@@ -2826,7 +2812,7 @@
|
|
|
2826
2812
|
},
|
|
2827
2813
|
{
|
|
2828
2814
|
"name": "--wot-card-content-line-height",
|
|
2829
|
-
"defaultValue": "$typography-body-line
|
|
2815
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
2830
2816
|
"description": "内容行高"
|
|
2831
2817
|
},
|
|
2832
2818
|
{
|
|
@@ -2890,7 +2876,7 @@
|
|
|
2890
2876
|
"category": "未分类",
|
|
2891
2877
|
"description": "用于处理树形结构数据的分级选择，支持静态数据与异步加载两种模式。",
|
|
2892
2878
|
"descriptionZh": "用于处理树形结构数据的分级选择，支持静态数据与异步加载两种模式。",
|
|
2893
|
-
"since": "2.0.
|
|
2879
|
+
"since": "2.0.4",
|
|
2894
2880
|
"doc": "# Cascader 级联选择器\n\n用于处理树形结构数据的分级选择，支持静态数据与异步加载两种模式。\n\n::: tip 提示\n省市区场景可直接使用 `@vant/area-data` 的 `useCascaderAreaData` 作为数据源。\n:::\n\n## 组件类型\n\n### 基础用法\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :options=\"options\" @confirm=\"handleConfirm\" />\n```\n\n### 初始选项\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :options=\"options\" @confirm=\"handleConfirm\" />\n```\n\n### 自定义字段\n\n```html\n<wd-cascader\n v-model=\"value\"\n v-model:visible=\"show\"\n :options=\"customOptions\"\n value-key=\"id\"\n text-key=\"name\"\n children-key=\"items\"\n @confirm=\"handleConfirm\"\n/>\n```\n\n## 组件状态\n\n### 禁用选项\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :options=\"optionsWithDisabled\" @confirm=\"handleConfirm\" />\n```\n\n### 选项提示信息\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :options=\"optionsWithTip\" @confirm=\"handleConfirm\" />\n```\n\n### 确定前校验\n\n`before-confirm` 支持返回 `boolean` 或 `Promise<boolean>`。\n\n```html\n<wd-cascader\n v-model=\"value\"\n v-model:visible=\"show\"\n :options=\"options\"\n :before-confirm=\"beforeConfirm\"\n @confirm=\"handleConfirm\"\n/>\n```\n\n```ts\nconst beforeConfirm = async (value, selectedOptions) => {\n if (String(value) === '120000') return false\n return true\n}\n```\n\n## 组件样式\n\n### 展示格式化\n\n```ts\nconst handleConfirm = ({ selectedOptions }) => {\n displayValue.value = `${selectedOptions[selectedOptions.length - 2].text}-${selectedOptions[selectedOptions.length - 1].text}`\n}\n```\n\n### 设置标题\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" title=\"选择地址\" :options=\"options\" @confirm=\"handleConfirm\" />\n```\n\n## 特殊样式\n\n### 异步加载\n\n传入 `lazy-load` 后进入异步模式：`option = null` 时加载根节点，`resolve([])` 表示当前节点为叶子节点。\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :lazy-load=\"lazyLoad\" @confirm=\"handleConfirm\" />\n```\n\n```ts\nconst lazyLoad = (option, tabIndex, resolve) => {\n fetchChildren(option ? String(option.value) : null).then(resolve)\n}\n```\n\n### 异步加载（无初始值）\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :lazy-load=\"lazyLoad\" @confirm=\"handleConfirm\" />\n```\n\n### 任意级可选\n\n开启 `check-strictly` 后，点击节点仅更新当前路径，通过右上角确认按钮提交。\n\n```html\n<wd-cascader v-model=\"value\" v-model:visible=\"show\" :options=\"options\" check-strictly @confirm=\"handleConfirm\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 选中项。静态模式为叶子节点值；异步模式可传路径数组用于回显 | `string \\| number \\| (string \\| number)[]` | - |\n| visible / v-model:visible | 是否显示弹窗 | boolean | false |\n| options | 层级选项数据（树形结构） | `CascaderOption[]` | `[]` |\n| title | 弹出层标题 | string | - |\n| before-confirm | 确定前校验函数，参数为 `(value, selectedOptions)`，返回 `boolean` 或 `Promise<boolean>` | `CascaderBeforeConfirm` | - |\n| check-strictly | 是否开启任意级可选 | boolean | false |\n| confirm-text | 严格模式下确认按钮文案 | string | `''` |\n| value-key | 选项值字段名 | string | value |\n| text-key | 选项文本字段名 | string | text |\n| children-key | 子节点字段名 | string | children |\n| tip-key | 提示文案字段名 | string | tip |\n| is-leaf-key | 叶子节点标识字段名，值为 `true` 时点击即确认 | string | isLeaf |\n| lazy-load | 异步加载回调，参数为 `(option, tabIndex, resolve)` | `CascaderLazyLoad` | - |\n| close-on-click-modal | 点击遮罩是否关闭 | boolean | true |\n| z-index | 弹窗层级 | number | 15 |\n| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iPhone X 类型机型） | boolean | true |\n| line-width | 底部条宽度，支持 number 或带单位字符串 | `number \\| string` | - |\n| line-height | 底部条高度，支持 number 或带单位字符串 | `number \\| string` | - |\n| line-theme | 底部条位置样式，支持 `normal / text / underline / dot` | string | normal |\n| root-portal | 是否脱离文档流渲染（H5: teleport，App: renderjs，小程序: root-portal） | boolean | false |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## CascaderOption 数据结构\n\n| 键名 | 说明 | 类型 |\n| --- | --- | --- |\n| value | 选项值 | `string \\| number` |\n| text | 选项文本 | string |\n| children | 子选项 | `CascaderOption[]` |\n| disabled | 是否禁用 | boolean |\n| tip | 提示文案 | string |\n| isLeaf | 是否为叶子节点（异步模式） | boolean |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| confirm | 确认选择时触发 | 静态模式：`{ value, selectedOptions }`，`value` 为叶子值；异步模式：`{ value, selectedOptions }`，`value` 为路径数组 |\n| close | 弹窗关闭时触发 | - |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开级联弹窗 | - |\n| close | 关闭级联弹窗 | - |\n",
|
|
2895
2881
|
"props": [
|
|
2896
2882
|
{
|
|
@@ -3067,7 +3053,7 @@
|
|
|
3067
3053
|
},
|
|
3068
3054
|
{
|
|
3069
3055
|
"name": "--wot-cascader-list-item-line-height",
|
|
3070
|
-
"defaultValue": "$typography-body-line
|
|
3056
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
3071
3057
|
"description": "选项文字行高"
|
|
3072
3058
|
},
|
|
3073
3059
|
{
|
|
@@ -3097,7 +3083,7 @@
|
|
|
3097
3083
|
},
|
|
3098
3084
|
{
|
|
3099
3085
|
"name": "--wot-cascader-list-tip-line-height",
|
|
3100
|
-
"defaultValue": "$typography-label-line
|
|
3086
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
3101
3087
|
"description": "选项提示文字行高"
|
|
3102
3088
|
},
|
|
3103
3089
|
{
|
|
@@ -3137,7 +3123,7 @@
|
|
|
3137
3123
|
},
|
|
3138
3124
|
{
|
|
3139
3125
|
"name": "--wot-cascader-confirm-line-height",
|
|
3140
|
-
"defaultValue": "$typography-body-line
|
|
3126
|
+
"defaultValue": "$typography-body-line-height-size-large",
|
|
3141
3127
|
"description": "checkStrictly模式确认按钮行高"
|
|
3142
3128
|
},
|
|
3143
3129
|
{
|
|
@@ -3226,7 +3212,7 @@
|
|
|
3226
3212
|
"category": "未分类",
|
|
3227
3213
|
"description": "单元格用于信息展示与轻交互，可独立使用，也可通过 `wd-cell-group` 统一管理布局与样式。",
|
|
3228
3214
|
"descriptionZh": "单元格用于信息展示与轻交互，可独立使用，也可通过 `wd-cell-group` 统一管理布局与样式。",
|
|
3229
|
-
"since": "2.0.
|
|
3215
|
+
"since": "2.0.4",
|
|
3230
3216
|
"doc": "# Cell 单元格\n\n单元格用于信息展示与轻交互，可独立使用，也可通过 `wd-cell-group` 统一管理布局与样式。\n\n## 组件类型\n\n### 基本用法\n\n```html\n<wd-cell-group>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <wd-cell title=\"标题文字\" label=\"描述信息\" value=\"内容\" />\n</wd-cell-group>\n```\n\n### 分组标题\n\n```html\n<wd-cell-group title=\"交易管理\" value=\"内容\">\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <wd-cell title=\"标题文字\" label=\"描述信息\" value=\"内容\" />\n</wd-cell-group>\n```\n\n## 组件状态\n\n### 点击反馈\n\n```html\n<wd-cell title=\"标题文字\" value=\"内容\" clickable @click=\"showToast\" />\n```\n\n## 组件变体\n\n### Placeholder\n\n```html\n<wd-cell-group>\n <wd-cell title=\"用户名\" placeholder=\"请输入用户名\" />\n <wd-cell title=\"手机号\" value=\"188****8888\" placeholder=\"请输入手机号\" />\n <wd-cell title=\"左对齐\" placeholder=\"请输入内容\" value-align=\"left\" />\n <wd-cell title=\"居中对齐\" placeholder=\"请输入内容\" value-align=\"center\" />\n</wd-cell-group>\n```\n\n### 页面跳转\n\n```html\n<wd-cell-group>\n <wd-cell title=\"帮助与反馈\" is-link to=\"/pages/index/Index\" />\n <wd-cell title=\"设置\" value=\"内容\" is-link to=\"/pages/button/Index\" replace />\n</wd-cell-group>\n```\n\n### 箭头方向\n\n```html\n<wd-cell-group>\n <wd-cell title=\"向上箭头\" is-link arrow-direction=\"up\" />\n <wd-cell title=\"向下箭头\" is-link arrow-direction=\"down\" />\n <wd-cell title=\"向左箭头\" is-link arrow-direction=\"left\" />\n <wd-cell title=\"默认箭头(向右)\" is-link />\n</wd-cell-group>\n```\n\n## 组件样式\n\n### 图标设置\n\n设置 `prefix-icon` 使用内置图标，或使用 `prefix` 插槽自定义前置图标。\n\n```html\n<wd-cell-group>\n <wd-cell title=\"标题文字\" value=\"内容\" prefix-icon=\"settings\" />\n <wd-cell title=\"标题文字\" value=\"内容\">\n <template #prefix>\n <view class=\"cell-icon\"></view>\n </template>\n </wd-cell>\n</wd-cell-group>\n```\n\n### 大尺寸\n\n```html\n<wd-cell-group>\n <wd-cell size=\"large\" title=\"标题文字\" value=\"内容\" />\n <wd-cell size=\"large\" title=\"标题文字\" value=\"内容\" prefix-icon=\"settings\" is-link />\n <wd-cell size=\"large\" title=\"标题文字\" label=\"描述信息\" value=\"内容\" />\n</wd-cell-group>\n```\n\n### 垂直居中\n\n```html\n<wd-cell-group>\n <wd-cell title=\"标题文字\" value=\"内容\" center />\n <wd-cell title=\"标题文字\" label=\"描述信息\" value=\"内容\" center />\n</wd-cell-group>\n```\n\n### 圆角卡片风格\n\n```html\n<wd-cell-group insert>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <wd-cell title=\"标题文字\" label=\"描述信息\" value=\"内容\" />\n</wd-cell-group>\n```\n\n## 特殊样式\n\n### 展示边框线\n\n```html\n<wd-cell-group title=\"交易管理\" border>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <wd-cell :border=\"false\" title=\"标题文字\" label=\"这一个 cell 不想要边框\" value=\"内容\" />\n <wd-cell title=\"标题文字\" label=\"描述信息\" value=\"内容\" />\n</wd-cell-group>\n```\n\n### 表单属性\n\n```html\n<wd-cell-group border>\n <wd-cell title=\"必填\" required>\n <wd-rate v-model=\"rate\" />\n </wd-cell>\n <wd-cell title=\"必填星号在右侧\" required asterisk-position=\"end\">\n <wd-rate v-model=\"rate1\" />\n </wd-cell>\n <wd-cell title=\"上下结构\" layout=\"vertical\" required asterisk-position=\"end\">\n <wd-slider v-model=\"slider\" />\n </wd-cell>\n</wd-cell-group>\n```\n\n### 设置左侧宽度\n\n```html\n<wd-cell\n title=\"标题文字\"\n label=\"这里是文字描述这里是文字描述这里是文字描述\"\n title-width=\"200px\"\n value=\"内容\"\n/>\n```\n\n### 内容省略\n\n```html\n<wd-cell-group>\n <wd-cell title=\"正常显示\" value=\"这是一段很长很长很长很长很长很长的内容\" />\n <wd-cell title=\"省略号显示\" value=\"这是一段很长很长很长很长很长很长的内容\" ellipsis />\n <wd-cell title=\"左对齐省略\" value=\"这是一段很长很长很长很长很长很长的内容\" value-align=\"left\" ellipsis />\n</wd-cell-group>\n```\n\n### 自定义内容\n\n```html\n<wd-cell-group>\n <wd-cell title=\"标题文字\" center>\n <wd-button size=\"small\" plain>按钮</wd-button>\n </wd-cell>\n <wd-cell title=\"标题文字\" center>\n <wd-switch v-model=\"switchValue\" />\n </wd-cell>\n <wd-cell title=\"标题文字\" is-link to=\"/pages/index/index\">\n <view class=\"custom-text\">订购</view>\n </wd-cell>\n <wd-cell>\n <template #title>\n <view>\n <view style=\"display: inline-block\">标题文字</view>\n <view class=\"end-time\">25天后到期</view>\n </view>\n </template>\n </wd-cell>\n</wd-cell-group>\n```\n\n## CellGroup Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 分组标题 | string | - |\n| value | 分组右侧内容 | string | - |\n| border | 是否展示外边框 | boolean | false |\n| insert | 是否展示为圆角卡片风格 | boolean | false |\n| center | 是否使内容垂直居中 | boolean | false |\n| size | 单元格大小，支持 `large` | string | - |\n| title-width | 左侧标题宽度 | `string \\| number` | - |\n| layout | 单元格布局方式，支持 `horizontal / vertical` | string | - |\n| value-align | 右侧内容对齐方式，支持 `left / right / center` | string | - |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Cell Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 左侧标题 | string | - |\n| value | 右侧内容 | `string \\| number` | `''` |\n| placeholder | 占位符，仅在 value 为空时显示 | string | - |\n| label | 标题下方描述信息 | string | - |\n| prefix-icon | 前置图标名 | string | - |\n| suffix-icon | 后置图标名 | string | - |\n| icon-size | 图标大小 | `string \\| number` | - |\n| icon-prefix | 图标类名前缀 | string | - |\n| to | 跳转地址 | string | - |\n| replace | 跳转时是否替换当前页面历史 | boolean | false |\n| clickable | 是否开启点击反馈 | boolean | false |\n| is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false |\n| arrow-direction | 箭头方向（仅在 is-link 为 true 时生效），支持 `left / up / down / right` | string | right |\n| size | 单元格大小，支持 `large` | string | - |\n| border | 是否显示内边框，优先级高于 cell-group 同名属性 | boolean | 继承自 CellGroup |\n| title-width | 左侧标题宽度 | `string \\| number` | 继承自 CellGroup |\n| center | 是否垂直居中 | boolean | 继承自 CellGroup |\n| layout | 单元格布局方式，支持 `horizontal / vertical` | string | 继承自 CellGroup |\n| value-align | 右侧内容对齐方式，支持 `left / right / center` | string | 继承自 CellGroup |\n| required | 是否显示必填星号 | boolean | false |\n| asterisk-position | 必填星号位置，支持 `start / end` | string | start |\n| hide-asterisk | 是否隐藏必填星号 | boolean | false |\n| ellipsis | 内容是否超出隐藏显示省略号 | boolean | false |\n| use-title-slot | 是否启用 title 插槽 | boolean | true |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n| custom-prefix-class | 前置图标自定义样式类 | string | `''` |\n| custom-suffix-class | 后置图标自定义样式类 | string | `''` |\n| custom-label-class | label 区域自定义样式类 | string | `''` |\n| custom-value-class | value 区域自定义样式类 | string | `''` |\n| custom-title-class | title 区域自定义样式类 | string | `''` |\n\n## Cell Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 当 clickable 或 is-link 为 true 时，点击单元格触发 | - |\n\n## CellGroup Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| title | 分组标题 | - |\n| value | 分组右侧内容 | - |\n\n## Cell Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| prefix | 前置图标区域 | - |\n| title | 标题区域 | - |\n| label | 描述信息区域 | - |\n| default | 右侧内容区域 | - |\n| suffix | 后置图标区域（is-link 为 false 时生效） | - |\n",
|
|
3231
3217
|
"props": [
|
|
3232
3218
|
{
|
|
@@ -3396,7 +3382,7 @@
|
|
|
3396
3382
|
},
|
|
3397
3383
|
{
|
|
3398
3384
|
"name": "--wot-cell-title-line-height",
|
|
3399
|
-
"defaultValue": "$typography-body-line
|
|
3385
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3400
3386
|
"description": "标题行高"
|
|
3401
3387
|
},
|
|
3402
3388
|
{
|
|
@@ -3406,7 +3392,7 @@
|
|
|
3406
3392
|
},
|
|
3407
3393
|
{
|
|
3408
3394
|
"name": "--wot-cell-label-line-height",
|
|
3409
|
-
"defaultValue": "$typography-body-line
|
|
3395
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3410
3396
|
"description": "标签行高"
|
|
3411
3397
|
},
|
|
3412
3398
|
{
|
|
@@ -3416,7 +3402,7 @@
|
|
|
3416
3402
|
},
|
|
3417
3403
|
{
|
|
3418
3404
|
"name": "--wot-cell-value-line-height",
|
|
3419
|
-
"defaultValue": "$typography-body-line
|
|
3405
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3420
3406
|
"description": "值行高"
|
|
3421
3407
|
},
|
|
3422
3408
|
{
|
|
@@ -3426,7 +3412,7 @@
|
|
|
3426
3412
|
},
|
|
3427
3413
|
{
|
|
3428
3414
|
"name": "--wot-cell-value-line-height-large",
|
|
3429
|
-
"defaultValue": "$typography-body-line
|
|
3415
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
3430
3416
|
"description": "大尺寸值行高"
|
|
3431
3417
|
},
|
|
3432
3418
|
{
|
|
@@ -3436,7 +3422,7 @@
|
|
|
3436
3422
|
},
|
|
3437
3423
|
{
|
|
3438
3424
|
"name": "--wot-cell-title-line-height-large",
|
|
3439
|
-
"defaultValue": "$typography-body-line
|
|
3425
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
3440
3426
|
"description": "大尺寸标题行高"
|
|
3441
3427
|
},
|
|
3442
3428
|
{
|
|
@@ -3446,7 +3432,7 @@
|
|
|
3446
3432
|
},
|
|
3447
3433
|
{
|
|
3448
3434
|
"name": "--wot-cell-label-line-height-large",
|
|
3449
|
-
"defaultValue": "$typography-body-line
|
|
3435
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
3450
3436
|
"description": "大尺寸标签行高"
|
|
3451
3437
|
},
|
|
3452
3438
|
{
|
|
@@ -3456,7 +3442,7 @@
|
|
|
3456
3442
|
},
|
|
3457
3443
|
{
|
|
3458
3444
|
"name": "--wot-cell-required-line-height",
|
|
3459
|
-
"defaultValue": "$typography-body-line
|
|
3445
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3460
3446
|
"description": "必填标记行高"
|
|
3461
3447
|
},
|
|
3462
3448
|
{
|
|
@@ -3466,7 +3452,7 @@
|
|
|
3466
3452
|
},
|
|
3467
3453
|
{
|
|
3468
3454
|
"name": "--wot-cell-placeholder-line-height",
|
|
3469
|
-
"defaultValue": "$typography-body-line
|
|
3455
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3470
3456
|
"description": "占位符行高"
|
|
3471
3457
|
},
|
|
3472
3458
|
{
|
|
@@ -3508,6 +3494,11 @@
|
|
|
3508
3494
|
"name": "--wot-cell-label-margin-top",
|
|
3509
3495
|
"defaultValue": "$spacing-super-tight",
|
|
3510
3496
|
"description": "标签顶部间距"
|
|
3497
|
+
},
|
|
3498
|
+
{
|
|
3499
|
+
"name": "--wot-cell-border-margin-horizontal",
|
|
3500
|
+
"defaultValue": "$spacing-loose",
|
|
3501
|
+
"description": "分割线左右边距"
|
|
3511
3502
|
}
|
|
3512
3503
|
],
|
|
3513
3504
|
"demos": [
|
|
@@ -3610,8 +3601,8 @@
|
|
|
3610
3601
|
"category": "未分类",
|
|
3611
3602
|
"description": "用于在一组备选项中进行多选，支持普通样式、按钮样式、自定义图标及全选控制。",
|
|
3612
3603
|
"descriptionZh": "用于在一组备选项中进行多选，支持普通样式、按钮样式、自定义图标及全选控制。",
|
|
3613
|
-
"since": "2.0.
|
|
3614
|
-
"doc": "# Checkbox 复选框\n\n用于在一组备选项中进行多选，支持普通样式、按钮样式、自定义图标及全选控制。\n\n## 组件类型\n\n### 基本用法\n\n```html\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\" type=\"square\">多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\" type=\"dot\">多选 4</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 组件状态\n\n### 禁用状态\n\n```html\n<wd-checkbox-group v-model=\"value\" disabled>\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\" disabled>多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 半选状态\n\n```html\n<wd-checkbox v-model=\"checked\" :indeterminate=\"indeterminate\" @change=\"indeterminate = false\">半选状态</wd-checkbox>\n```\n\n### 只读状态\n\n```html\n<wd-checkbox-group v-model=\"value\" readonly>\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 组件变体\n\n### 勾选在右侧\n\n```html\n<wd-checkbox-group v-model=\"value\" placement=\"right\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 按钮样式\n\n```html\n<wd-checkbox-group v-model=\"value\" type=\"button\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 同行展示\n\n```html\n<wd-checkbox-group v-model=\"value\" direction=\"horizontal\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 最小与最大可选数量\n\n```html\n<wd-checkbox-group v-model=\"value\" :min=\"1\" :max=\"3\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\">多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\">多选 4</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 组件样式\n\n### 修改选中颜色\n\n```html\n<wd-checkbox-group v-model=\"value\" checked-color=\"#fa4350\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 修改未选中颜色\n\n```html\n<wd-checkbox-group v-model=\"value\" unchecked-color=\"#fa4350\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 自定义图标\n\n```html\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">\n 自定义图标\n <template #icon=\"{ isChecked }\">\n <wd-icon :name=\"isChecked ? 'star-fill' : 'star'\" size=\"22px\" :color=\"isChecked ? '#fa4350' : '#ccc'\" />\n </template>\n </wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 尺寸\n\n```html\n<wd-checkbox-group v-model=\"value\" size=\"large\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 特殊样式\n\n### 结合 Cell 使用\n\n```html\n<wd-checkbox-group v-model=\"value\" direction=\"horizontal\">\n <wd-cell-group border value-align=\"right\">\n <wd-cell title=\"点赞\" clickable @click=\"toggle(1)\">\n <wd-checkbox :name=\"1\" />\n </wd-cell>\n <wd-cell title=\"投币\" clickable @click=\"toggle(2)\">\n <wd-checkbox :name=\"2\" />\n </wd-cell>\n <wd-cell title=\"一键三连\" clickable @click=\"toggle(3)\">\n <wd-checkbox :name=\"3\" />\n </wd-cell>\n </wd-cell-group>\n</wd-checkbox-group>\n```\n\n### 全选切换\n\n```html\n<wd-button @click=\"checkboxGroup?.toggleAll()\">全部切换</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll(true)\">全选</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll(false)\">全不选</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll({ skipDisabled: true })\">全部切换（跳过禁用）</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll({ checked: true, skipDisabled: true })\">全选（跳过禁用）</wd-button>\n\n<wd-checkbox-group v-model=\"value\" ref=\"checkboxGroup\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\" disabled>多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\">多选 4</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## Checkbox Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 单独使用时的绑定值 | `string \\| number \\| boolean` | false |\n| name | 在 CheckboxGroup 中的唯一标识值 | `string \\| number \\| boolean` | `''` |\n| type | 形状类型，支持 `circle / square / button / dot` | string | 继承自 CheckboxGroup |\n| checked-color | 选中颜色 | string | 继承自 CheckboxGroup |\n| unchecked-color | 未选中颜色 | string | 继承自 CheckboxGroup |\n| disabled | 是否禁用 | `boolean \\| null` | 继承自 CheckboxGroup |\n| readonly | 是否只读 | `boolean \\| null` | 继承自 CheckboxGroup |\n| indeterminate | 是否半选状态（样式优先级最高） | boolean | false |\n| true-value | 单独使用时的选中值 | `string \\| number \\| boolean` | true |\n| false-value | 单独使用时的非选中值 | `string \\| number \\| boolean` | false |\n| size | 尺寸，支持 `large` | string | 继承自 CheckboxGroup |\n| placement | 勾选图标位置，支持 `left / right` | string | 继承自 CheckboxGroup |\n| direction | 布局方向，支持 `horizontal / vertical` | string | 继承自 CheckboxGroup |\n| max-width | 文本最大宽度 | string | - |\n| custom-label-class | label 文本自定义类名 | string | - |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## CheckboxGroup Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 绑定值数组 | `Array<string \\| number \\| boolean>` | `[]` |\n| type | 形状类型，支持 `circle / square / button / dot` | string | circle |\n| checked-color | 选中颜色 | string | - |\n| unchecked-color | 未选中颜色 | string | - |\n| disabled | 是否禁用全部选项 | boolean | false |\n| readonly | 是否只读全部选项 | boolean | false |\n| min | 最小可选数量 | number | 0 |\n| max | 最大可选数量，`0` 表示不限制 | number | 0 |\n| size | 尺寸，支持 `large` | string | - |\n| placement | 勾选图标位置，支持 `left / right` | string | left |\n| direction | 布局方向，支持 `horizontal / vertical` | string | vertical |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Checkbox Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 单独使用时，绑定值变化后触发 | `{ value }` |\n\n## CheckboxGroup Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 组选中值变化后触发 | `{ value }` |\n\n## Checkbox Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| toggle | 切换当前选中状态 | - |\n\n## CheckboxGroup Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| toggleAll | 批量切换全部选项状态 | `boolean \\| { checked?: boolean; skipDisabled?: boolean }` |\n\n## Checkbox Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义文本内容 | - |\n| icon | 自定义图标 | `{ isChecked }` |\n\n## CheckboxGroup Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 复选框列表内容 | - |\n",
|
|
3604
|
+
"since": "2.0.4",
|
|
3605
|
+
"doc": "# Checkbox 复选框\n\n用于在一组备选项中进行多选，支持普通样式、按钮样式、自定义图标及全选控制。\n\n## 组件类型\n\n### 基本用法\n\n```html\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\" type=\"square\">多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\" type=\"dot\">多选 4</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 单独使用\n\n`wd-checkbox` 可以不依赖 `wd-checkbox-group` 单独使用，通过 `v-model` 绑定选中状态（默认 `true-value` 为 `true`，`false-value` 为 `false`），也可通过 `true-value` / `false-value` 自定义选中与非选中时的值。\n\n```html\n<wd-checkbox v-model=\"checked\">同意协议</wd-checkbox>\n```\n\n```ts\nconst checked = ref(false)\n```\n\n**自定义选中/非选中值**\n\n```html\n<wd-checkbox v-model=\"agree\" true-value=\"yes\" false-value=\"no\">同意协议</wd-checkbox>\n```\n\n```ts\nconst agree = ref('no')\n```\n\n## 组件状态\n\n### 禁用状态\n\n```html\n<wd-checkbox-group v-model=\"value\" disabled>\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\" disabled>多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 半选状态\n\n```html\n<wd-checkbox v-model=\"checked\" :indeterminate=\"indeterminate\" @change=\"indeterminate = false\">半选状态</wd-checkbox>\n```\n\n### 只读状态\n\n```html\n<wd-checkbox-group v-model=\"value\" readonly>\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 组件变体\n\n### 勾选在右侧\n\n```html\n<wd-checkbox-group v-model=\"value\" placement=\"right\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 按钮样式\n\n```html\n<wd-checkbox-group v-model=\"value\" type=\"button\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 同行展示\n\n```html\n<wd-checkbox-group v-model=\"value\" direction=\"horizontal\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 最小与最大可选数量\n\n```html\n<wd-checkbox-group v-model=\"value\" :min=\"1\" :max=\"3\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\">多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\">多选 4</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 组件样式\n\n### 修改选中颜色\n\n```html\n<wd-checkbox-group v-model=\"value\" checked-color=\"#fa4350\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 修改未选中颜色\n\n```html\n<wd-checkbox-group v-model=\"value\" unchecked-color=\"#fa4350\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 自定义图标\n\n```html\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">\n 自定义图标\n <template #icon=\"{ isChecked }\">\n <wd-icon :name=\"isChecked ? 'star-fill' : 'star'\" size=\"22px\" :color=\"isChecked ? '#fa4350' : '#ccc'\" />\n </template>\n </wd-checkbox>\n</wd-checkbox-group>\n```\n\n### 尺寸\n\n```html\n<wd-checkbox-group v-model=\"value\" size=\"large\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## 特殊样式\n\n### 结合 Cell 使用\n\n```html\n<wd-checkbox-group v-model=\"value\" direction=\"horizontal\">\n <wd-cell-group border value-align=\"right\">\n <wd-cell title=\"点赞\" clickable @click=\"toggle(1)\">\n <wd-checkbox :name=\"1\" />\n </wd-cell>\n <wd-cell title=\"投币\" clickable @click=\"toggle(2)\">\n <wd-checkbox :name=\"2\" />\n </wd-cell>\n <wd-cell title=\"一键三连\" clickable @click=\"toggle(3)\">\n <wd-checkbox :name=\"3\" />\n </wd-cell>\n </wd-cell-group>\n</wd-checkbox-group>\n```\n\n### 全选切换\n\n```html\n<wd-button @click=\"checkboxGroup?.toggleAll()\">全部切换</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll(true)\">全选</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll(false)\">全不选</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll({ skipDisabled: true })\">全部切换（跳过禁用）</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll({ checked: true, skipDisabled: true })\">全选（跳过禁用）</wd-button>\n\n<wd-checkbox-group v-model=\"value\" ref=\"checkboxGroup\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\" disabled>多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\">多选 4</wd-checkbox>\n</wd-checkbox-group>\n```\n\n## Checkbox Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 单独使用时的绑定值 | `string \\| number \\| boolean` | false |\n| name | 在 CheckboxGroup 中的唯一标识值 | `string \\| number \\| boolean` | `''` |\n| type | 形状类型，支持 `circle / square / button / dot` | string | 继承自 CheckboxGroup |\n| checked-color | 选中颜色 | string | 继承自 CheckboxGroup |\n| unchecked-color | 未选中颜色 | string | 继承自 CheckboxGroup |\n| disabled | 是否禁用 | `boolean \\| null` | 继承自 CheckboxGroup |\n| readonly | 是否只读 | `boolean \\| null` | 继承自 CheckboxGroup |\n| indeterminate | 是否半选状态（样式优先级最高） | boolean | false |\n| true-value | 单独使用时的选中值 | `string \\| number \\| boolean` | true |\n| false-value | 单独使用时的非选中值 | `string \\| number \\| boolean` | false |\n| size | 尺寸，支持 `large` | string | 继承自 CheckboxGroup |\n| placement | 勾选图标位置，支持 `left / right` | string | 继承自 CheckboxGroup |\n| direction | 布局方向，支持 `horizontal / vertical` | string | 继承自 CheckboxGroup |\n| max-width | 文本最大宽度 | string | - |\n| custom-label-class | label 文本自定义类名 | string | - |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## CheckboxGroup Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 绑定值数组 | `Array<string \\| number \\| boolean>` | `[]` |\n| type | 形状类型，支持 `circle / square / button / dot` | string | circle |\n| checked-color | 选中颜色 | string | - |\n| unchecked-color | 未选中颜色 | string | - |\n| disabled | 是否禁用全部选项 | boolean | false |\n| readonly | 是否只读全部选项 | boolean | false |\n| min | 最小可选数量 | number | 0 |\n| max | 最大可选数量，`0` 表示不限制 | number | 0 |\n| size | 尺寸，支持 `large` | string | - |\n| placement | 勾选图标位置，支持 `left / right` | string | left |\n| direction | 布局方向，支持 `horizontal / vertical` | string | vertical |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Checkbox Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 单独使用时，绑定值变化后触发 | `{ value }` |\n\n## CheckboxGroup Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 组选中值变化后触发 | `{ value }` |\n\n## Checkbox Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| toggle | 切换当前选中状态 | - |\n\n## CheckboxGroup Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| toggleAll | 批量切换全部选项状态 | `boolean \\| { checked?: boolean; skipDisabled?: boolean }` |\n\n## Checkbox Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义文本内容 | - |\n| icon | 自定义图标 | `{ isChecked }` |\n\n## CheckboxGroup Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 复选框列表内容 | - |\n",
|
|
3615
3606
|
"props": [
|
|
3616
3607
|
{
|
|
3617
3608
|
"name": "v-model",
|
|
@@ -3766,7 +3757,7 @@
|
|
|
3766
3757
|
},
|
|
3767
3758
|
{
|
|
3768
3759
|
"name": "--wot-checkbox-label-line-height",
|
|
3769
|
-
"defaultValue": "$typography-body-line
|
|
3760
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3770
3761
|
"description": "-"
|
|
3771
3762
|
},
|
|
3772
3763
|
{
|
|
@@ -3791,7 +3782,7 @@
|
|
|
3791
3782
|
},
|
|
3792
3783
|
{
|
|
3793
3784
|
"name": "--wot-checkbox-button-shape-border-radius",
|
|
3794
|
-
"defaultValue": "$radius-
|
|
3785
|
+
"defaultValue": "$radius-full",
|
|
3795
3786
|
"description": "-"
|
|
3796
3787
|
},
|
|
3797
3788
|
{
|
|
@@ -3806,7 +3797,7 @@
|
|
|
3806
3797
|
},
|
|
3807
3798
|
{
|
|
3808
3799
|
"name": "--wot-checkbox-button-line-height",
|
|
3809
|
-
"defaultValue": "$typography-body-line
|
|
3800
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
3810
3801
|
"description": "-"
|
|
3811
3802
|
},
|
|
3812
3803
|
{
|
|
@@ -3889,66 +3880,72 @@
|
|
|
3889
3880
|
},
|
|
3890
3881
|
{
|
|
3891
3882
|
"name": "demo-2",
|
|
3883
|
+
"title": "单独使用",
|
|
3884
|
+
"description": "单独使用",
|
|
3885
|
+
"code": "<wd-checkbox v-model=\"checked\">同意协议</wd-checkbox>"
|
|
3886
|
+
},
|
|
3887
|
+
{
|
|
3888
|
+
"name": "demo-3",
|
|
3892
3889
|
"title": "禁用状态",
|
|
3893
3890
|
"description": "禁用状态",
|
|
3894
3891
|
"code": "<wd-checkbox-group v-model=\"value\" disabled>\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>\n\n<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\" disabled>多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3895
3892
|
},
|
|
3896
3893
|
{
|
|
3897
|
-
"name": "demo-
|
|
3894
|
+
"name": "demo-4",
|
|
3898
3895
|
"title": "半选状态",
|
|
3899
3896
|
"description": "半选状态",
|
|
3900
3897
|
"code": "<wd-checkbox v-model=\"checked\" :indeterminate=\"indeterminate\" @change=\"indeterminate = false\">半选状态</wd-checkbox>"
|
|
3901
3898
|
},
|
|
3902
3899
|
{
|
|
3903
|
-
"name": "demo-
|
|
3900
|
+
"name": "demo-5",
|
|
3904
3901
|
"title": "只读状态",
|
|
3905
3902
|
"description": "只读状态",
|
|
3906
3903
|
"code": "<wd-checkbox-group v-model=\"value\" readonly>\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3907
3904
|
},
|
|
3908
3905
|
{
|
|
3909
|
-
"name": "demo-
|
|
3906
|
+
"name": "demo-6",
|
|
3910
3907
|
"title": "勾选在右侧",
|
|
3911
3908
|
"description": "勾选在右侧",
|
|
3912
3909
|
"code": "<wd-checkbox-group v-model=\"value\" placement=\"right\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3913
3910
|
},
|
|
3914
3911
|
{
|
|
3915
|
-
"name": "demo-
|
|
3912
|
+
"name": "demo-7",
|
|
3916
3913
|
"title": "按钮样式",
|
|
3917
3914
|
"description": "按钮样式",
|
|
3918
3915
|
"code": "<wd-checkbox-group v-model=\"value\" type=\"button\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3919
3916
|
},
|
|
3920
3917
|
{
|
|
3921
|
-
"name": "demo-
|
|
3918
|
+
"name": "demo-8",
|
|
3922
3919
|
"title": "同行展示",
|
|
3923
3920
|
"description": "同行展示",
|
|
3924
3921
|
"code": "<wd-checkbox-group v-model=\"value\" direction=\"horizontal\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3925
3922
|
},
|
|
3926
3923
|
{
|
|
3927
|
-
"name": "demo-
|
|
3924
|
+
"name": "demo-9",
|
|
3928
3925
|
"title": "最小与最大可选数量",
|
|
3929
3926
|
"description": "最小与最大可选数量",
|
|
3930
3927
|
"code": "<wd-checkbox-group v-model=\"value\" :min=\"1\" :max=\"3\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\">多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\">多选 4</wd-checkbox>\n</wd-checkbox-group>"
|
|
3931
3928
|
},
|
|
3932
3929
|
{
|
|
3933
|
-
"name": "demo-
|
|
3930
|
+
"name": "demo-10",
|
|
3934
3931
|
"title": "修改选中颜色",
|
|
3935
3932
|
"description": "修改选中颜色",
|
|
3936
3933
|
"code": "<wd-checkbox-group v-model=\"value\" checked-color=\"#fa4350\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3937
3934
|
},
|
|
3938
3935
|
{
|
|
3939
|
-
"name": "demo-
|
|
3936
|
+
"name": "demo-11",
|
|
3940
3937
|
"title": "修改未选中颜色",
|
|
3941
3938
|
"description": "修改未选中颜色",
|
|
3942
3939
|
"code": "<wd-checkbox-group v-model=\"value\" unchecked-color=\"#fa4350\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
3943
3940
|
},
|
|
3944
3941
|
{
|
|
3945
|
-
"name": "demo-
|
|
3942
|
+
"name": "demo-12",
|
|
3946
3943
|
"title": "自定义图标",
|
|
3947
3944
|
"description": "自定义图标",
|
|
3948
3945
|
"code": "<wd-checkbox-group v-model=\"value\">\n <wd-checkbox :name=\"1\">\n 自定义图标\n <template #icon=\"{ isChecked }\">\n <wd-icon :name=\"isChecked ? 'star-fill' : 'star'\" size=\"22px\" :color=\"isChecked ? '#fa4350' : '#ccc'\" />\n </template>\n </wd-checkbox>\n</wd-checkbox-group>"
|
|
3949
3946
|
},
|
|
3950
3947
|
{
|
|
3951
|
-
"name": "demo-
|
|
3948
|
+
"name": "demo-13",
|
|
3952
3949
|
"title": "尺寸",
|
|
3953
3950
|
"description": "尺寸",
|
|
3954
3951
|
"code": "<wd-checkbox-group v-model=\"value\" size=\"large\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n</wd-checkbox-group>"
|
|
@@ -3960,7 +3957,7 @@
|
|
|
3960
3957
|
"code": "<wd-checkbox-group v-model=\"value\" direction=\"horizontal\">\n <wd-cell-group border value-align=\"right\">\n <wd-cell title=\"点赞\" clickable @click=\"toggle(1)\">\n <wd-checkbox :name=\"1\" />\n </wd-cell>\n <wd-cell title=\"投币\" clickable @click=\"toggle(2)\">\n <wd-checkbox :name=\"2\" />\n </wd-cell>\n <wd-cell title=\"一键三连\" clickable @click=\"toggle(3)\">\n <wd-checkbox :name=\"3\" />\n </wd-cell>\n </wd-cell-group>\n</wd-checkbox-group>"
|
|
3961
3958
|
},
|
|
3962
3959
|
{
|
|
3963
|
-
"name": "demo-
|
|
3960
|
+
"name": "demo-15",
|
|
3964
3961
|
"title": "全选切换",
|
|
3965
3962
|
"description": "全选切换",
|
|
3966
3963
|
"code": "<wd-button @click=\"checkboxGroup?.toggleAll()\">全部切换</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll(true)\">全选</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll(false)\">全不选</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll({ skipDisabled: true })\">全部切换（跳过禁用）</wd-button>\n<wd-button @click=\"checkboxGroup?.toggleAll({ checked: true, skipDisabled: true })\">全选（跳过禁用）</wd-button>\n\n<wd-checkbox-group v-model=\"value\" ref=\"checkboxGroup\">\n <wd-checkbox :name=\"1\">多选 1</wd-checkbox>\n <wd-checkbox :name=\"2\">多选 2</wd-checkbox>\n <wd-checkbox :name=\"3\" disabled>多选 3</wd-checkbox>\n <wd-checkbox :name=\"4\">多选 4</wd-checkbox>\n</wd-checkbox-group>"
|
|
@@ -3974,7 +3971,7 @@
|
|
|
3974
3971
|
"category": "未分类",
|
|
3975
3972
|
"description": "圆环形进度条组件，支持颜色定制、渐变色、方向控制和插槽内容。",
|
|
3976
3973
|
"descriptionZh": "圆环形进度条组件，支持颜色定制、渐变色、方向控制和插槽内容。",
|
|
3977
|
-
"since": "2.0.
|
|
3974
|
+
"since": "2.0.4",
|
|
3978
3975
|
"doc": "# Circle 环形进度条\n\n圆环形进度条组件，支持颜色定制、渐变色、方向控制和插槽内容。\n\n## 组件类型\n\n### 基础用法\n\n通过 `v-model` 绑定当前进度，`text` 控制中间文本。\n\n```html\n<wd-circle v-model=\"current\" :text=\"`${current}%`\" />\n```\n\n## 组件样式\n\n### 宽度控制\n\n通过 `stroke-width` 控制进度条宽度。\n\n```html\n<wd-circle v-model=\"current\" :stroke-width=\"6\" />\n```\n\n### 颜色定制\n\n通过 `color` 控制进度条颜色，`layer-color` 控制轨道颜色。\n\n```html\n<wd-circle v-model=\"current\" color=\"#ee0a24\" layer-color=\"#eee\" />\n```\n\n### 渐变色\n\n`color` 支持对象格式定义渐变色。\n\n```html\n<wd-circle v-model=\"current\" :color=\"gradientColor\" />\n```\n\n```ts\nconst gradientColor = {\n '0': 'red',\n '100': 'white'\n}\n```\n\n### 逆时针方向\n\n设置 `clockwise` 为 `false`，进度从逆时针方向展开。\n\n```html\n<wd-circle v-model=\"current\" :clockwise=\"false\" />\n```\n\n### 大小定制\n\n通过 `size` 控制圆环直径。\n\n```html\n<wd-circle v-model=\"current\" :size=\"120\" />\n```\n\n## 内容形态\n\n### 使用默认插槽\n\n不传 `text` 时可使用默认插槽自定义中心内容。\n\n```html\n<wd-circle v-model=\"current\" :stroke-width=\"6\">\n <view style=\"color: red\">{{ current }}%</view>\n</wd-circle>\n```\n\n## 特殊样式\n\n### 进度控制\n\n```html\n<wd-button type=\"primary\" size=\"small\" @click=\"doAdd\">增加</wd-button>\n<wd-button type=\"danger\" size=\"small\" @click=\"doDecre\">减少</wd-button>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前进度 | number | 0 |\n| size | 圆环直径，单位 px | number | 120 |\n| color | 进度条颜色，支持字符串或渐变对象 | `string \\| Record<string, string>` | `#1C64FD` |\n| layer-color | 轨道颜色 | string | `#F2F3F5` |\n| fill | 填充颜色 | string | - |\n| speed | 动画速度，单位 rate/s | number | 50 |\n| text | 圆环中间文字 | string | - |\n| stroke-width | 进度条宽度，单位 px | number | 18 |\n| stroke-linecap | 端点形状，可选值为 `butt`、`round`、`square` | string | round |\n| clockwise | 是否顺时针增加 | boolean | true |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义圆环中心内容（仅在 `text` 为空时显示） | - |\n",
|
|
3979
3976
|
"props": [
|
|
3980
3977
|
{
|
|
@@ -4070,7 +4067,7 @@
|
|
|
4070
4067
|
},
|
|
4071
4068
|
{
|
|
4072
4069
|
"name": "--wot-circle-text-line-height",
|
|
4073
|
-
"defaultValue": "$typography-title-line
|
|
4070
|
+
"defaultValue": "$typography-title-line-height-size-large",
|
|
4074
4071
|
"description": "圆环文字行高"
|
|
4075
4072
|
}
|
|
4076
4073
|
],
|
|
@@ -4132,7 +4129,7 @@
|
|
|
4132
4129
|
"category": "未分类",
|
|
4133
4130
|
"description": "将一组内容放置在多个折叠面板中，点击面板标题可展开或收起内容。",
|
|
4134
4131
|
"descriptionZh": "将一组内容放置在多个折叠面板中，点击面板标题可展开或收起内容。",
|
|
4135
|
-
"since": "2.0.
|
|
4132
|
+
"since": "2.0.4",
|
|
4136
4133
|
"doc": "# Collapse 折叠面板\n\n将一组内容放置在多个折叠面板中，点击面板标题可展开或收起内容。\n\n## 组件类型\n\n### 基本使用\n\n`v-model` 绑定值可为：\n- 普通折叠：`string[]`\n- 手风琴模式：`string`\n- 查看更多模式：`boolean`\n\n```html\n<wd-collapse v-model=\"value\">\n <wd-collapse-item title=\"标签1\" name=\"item1\">这是一条简单的示例文字。</wd-collapse-item>\n <wd-collapse-item title=\"标签2\" name=\"item2\">这是一条简单的示例文字。</wd-collapse-item>\n</wd-collapse>\n```\n\n## 组件状态\n\n### 禁用\n\n设置 `wd-collapse-item` 的 `disabled` 属性禁用单个面板。\n\n```html\n<wd-collapse v-model=\"value\">\n <wd-collapse-item title=\"标签1\" name=\"item1\">这是一条简单的示例文字。</wd-collapse-item>\n <wd-collapse-item title=\"标签2\" name=\"item2\" disabled>这是一条简单的示例文字。</wd-collapse-item>\n</wd-collapse>\n```\n\n### 异步更新\n\n通过 `before-expend` 在面板打开前执行拦截，返回 `boolean` 或 `Promise<boolean>`。\n\n```html\n<wd-collapse v-model=\"value\">\n <wd-collapse-item v-for=\"item in itemList\" :key=\"item.name\" :title=\"item.title\" :name=\"item.name\" :before-expend=\"beforeExpend\">\n {{ item.body }}\n </wd-collapse-item>\n</wd-collapse>\n```\n\n```ts\nconst beforeExpend = (name: string) => {\n return new Promise<boolean>((resolve) => {\n setTimeout(() => resolve(true), 500)\n })\n}\n```\n\n## 组件变体\n\n### 手风琴\n\n设置 `accordion` 后同一时刻仅展开一项。\n\n```html\n<wd-collapse v-model=\"value\" accordion>\n <wd-collapse-item title=\"标签1\" name=\"item1\">这是一条简单的示例文字。</wd-collapse-item>\n <wd-collapse-item title=\"标签2\" name=\"item2\">这是一条简单的示例文字。</wd-collapse-item>\n <wd-collapse-item title=\"标签3\" name=\"item3\">这是一条简单的示例文字。</wd-collapse-item>\n</wd-collapse>\n```\n\n### 查看更多\n\n设置 `viewmore` 后可折叠长文本，`line-num` 控制收起行数。\n\n```html\n<wd-collapse v-model=\"value\" viewmore :line-num=\"3\">\n 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。\n</wd-collapse>\n```\n\n## 组件样式\n\n### 自定义标题\n\n使用 `wd-collapse-item` 的 `title` 具名插槽，可获取 `expanded / disabled / isFirst`。\n\n```html\n<wd-collapse v-model=\"value\">\n <wd-collapse-item name=\"item1\">\n <template #title=\"{ expanded }\">\n <view class=\"header\">\n <text style=\"color: red\">通过 slot 自定义标题</text>\n <text>{{ expanded ? '我展开了' : '我已收起' }}</text>\n </view>\n </template>\n 这是一条简单的示例文字。\n </wd-collapse-item>\n</wd-collapse>\n```\n\n### 查看更多插槽\n\n查看更多模式下可通过 `use-more-slot` 启用 `more` 插槽，自定义“展开/收起”区域。\n\n```html\n<wd-collapse v-model=\"value\" viewmore use-more-slot custom-more-slot-class=\"more-slot\">\n 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。\n <template #more>\n <view>显示全部</view>\n </template>\n</wd-collapse>\n```\n\n## 特殊样式\n\n### 嵌套使用\n\n`collapse` 支持嵌套。由于 `collapse-item` 内容容器存在默认 `padding`，嵌套时建议用 `custom-body-style` 或 `custom-body-class` 覆盖。\n\n```html\n<wd-collapse v-model=\"collapseRoot\">\n <wd-collapse-item v-for=\"item in 5\" :key=\"item\" :name=\"`${item}`\" :title=\"`标签${item}`\" custom-body-style=\"padding:0 0 0 14px\">\n <wd-collapse v-model=\"collapseList[item - 1]\">\n <wd-collapse-item v-for=\"child in itemList\" :key=\"child.name\" :name=\"child.name\" :title=\"child.title\">\n {{ child.body }}\n </wd-collapse-item>\n </wd-collapse>\n </wd-collapse-item>\n</wd-collapse>\n```\n\n### toggleAll\n\n通过 `Collapse` 实例方法 `toggleAll` 批量切换展开状态。\n\n```html\n<wd-collapse ref=\"collapseRef\">...</wd-collapse>\n```\n\n```ts\ncollapseRef.value?.toggleAll()\ncollapseRef.value?.toggleAll(true)\ncollapseRef.value?.toggleAll(false)\ncollapseRef.value?.toggleAll({ skipDisabled: true })\ncollapseRef.value?.toggleAll({ expanded: true, skipDisabled: true })\n```\n\n## CollapseItem Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| name | 折叠栏唯一标识符 | string | - |\n| title | 折叠栏标题，支持 `title` 插槽覆盖 | string | `''` |\n| disabled | 是否禁用该折叠栏 | boolean | false |\n| before-expend | 打开前拦截函数，接收 `name` 参数，返回 `boolean` 或 `Promise<boolean>` | `CollapseItemBeforeExpand` | - |\n| border | 是否显示边框 | boolean | true |\n| custom-body-class | 折叠栏内容容器自定义类名 | string | `''` |\n| custom-body-style | 折叠栏内容容器自定义样式 | string | `''` |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n### CollapseItemBeforeExpand 参数\n\n| 参数名 | 说明 | 类型 |\n| --- | --- | --- |\n| name | 当前折叠栏唯一标识符 | string |\n\n## Collapse Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 绑定值。普通模式为 `string[]`，手风琴模式为 `string`，查看更多模式为 `boolean` | `string \\| string[] \\| boolean` | - |\n| accordion | 是否开启手风琴模式 | boolean | false |\n| viewmore | 是否开启查看更多模式 | boolean | false |\n| use-more-slot | 查看更多模式下是否启用 `more` 插槽 | boolean | false |\n| line-num | 查看更多模式下收起显示行数 | number | 2 |\n| custom-more-slot-class | 查看更多模式下 `more` 插槽外部自定义类名 | string | `''` |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 绑定值变化时触发 | `{ value }` |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| toggleAll | 切换所有面板展开状态。传 `true` 全部展开，`false` 全部收起，不传为全部切换 | `options?: CollapseToggleAllOptions` |\n\n### CollapseToggleAllOptions\n\n| 参数名 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| expanded | 是否展开，`true` 展开，`false` 收起 | boolean | - |\n| skipDisabled | 是否跳过禁用项 | boolean | false |\n\n## Collapse Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 面板内容或面板项列表 | - |\n| more | 查看更多模式下自定义展开收起区域 | - |\n\n## CollapseItem Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| title | 自定义标题区域 | `{ expanded, disabled, isFirst }` |\n| default | 折叠栏内容 | - |\n",
|
|
4137
4134
|
"props": [
|
|
4138
4135
|
{
|
|
@@ -4290,7 +4287,7 @@
|
|
|
4290
4287
|
},
|
|
4291
4288
|
{
|
|
4292
4289
|
"name": "--wot-collapse-item-title-line-height",
|
|
4293
|
-
"defaultValue": "$typography-body-line
|
|
4290
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
4294
4291
|
"description": "折叠项标题文字行高"
|
|
4295
4292
|
},
|
|
4296
4293
|
{
|
|
@@ -4315,7 +4312,7 @@
|
|
|
4315
4312
|
},
|
|
4316
4313
|
{
|
|
4317
4314
|
"name": "--wot-collapse-item-body-line-height",
|
|
4318
|
-
"defaultValue": "$typography-label-line
|
|
4315
|
+
"defaultValue": "$typography-label-line-height-size-large",
|
|
4319
4316
|
"description": "折叠项内容文字行高"
|
|
4320
4317
|
},
|
|
4321
4318
|
{
|
|
@@ -4388,7 +4385,7 @@
|
|
|
4388
4385
|
"category": "未分类",
|
|
4389
4386
|
"description": "用于为 `Wot` 组件提供主题模式和主题变量配置，支持深色模式、主题定制和跨组件树共享配置。",
|
|
4390
4387
|
"descriptionZh": "用于为 `Wot` 组件提供主题模式和主题变量配置，支持深色模式、主题定制和跨组件树共享配置。",
|
|
4391
|
-
"since": "2.0.
|
|
4388
|
+
"since": "2.0.4",
|
|
4392
4389
|
"doc": "# ConfigProvider 全局配置\n\n用于为 `Wot` 组件提供主题模式和主题变量配置，支持深色模式、主题定制和跨组件树共享配置。\n\n## 组件类型\n\n### 深色模式\n\n将 `theme` 设置为 `dark` 后，可以让当前 `ConfigProvider` 包裹范围内的 `Wot` 组件切换为深色风格。\n::: tip 提示\n`ConfigProvider` 只影响 `Wot` 组件自身的主题表现，不会自动修改页面全局文本色或背景色。你可以结合全局样式自行处理页面背景和文本颜色。\n:::\n```vue\n<wd-config-provider theme=\"dark\">\n <wd-button type=\"primary\">深色模式按钮</wd-button>\n</wd-config-provider>\n```\n\n\n\n\n## 切换主题\n\n通过响应式地更新 `theme`，可以在浅色和深色模式之间切换。\n\n::: code-group\n\n```vue [vue]\n<wd-config-provider :theme=\"theme\">\n <wd-button type=\"primary\">当前模式：{{ theme }}</wd-button>\n</wd-config-provider>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\n\nconst theme = ref<'light' | 'dark'>('light')\n\nsetTimeout(() => {\n theme.value = 'dark'\n}, 1000)\n```\n\n:::\n\n## 主题定制\n\n### 通过 CSS 变量覆盖\n\n`Wot UI` 组件通过 CSS 变量组织样式。你可以直接覆盖这些变量来调整组件外观。\n\n```css\n:root,\npage {\n --wot-button-primary-bg: green;\n}\n```\n\n### 通过 ConfigProvider 覆盖\n\n`ConfigProvider` 支持通过 `theme-vars` 覆盖主题变量，仅影响当前包裹范围内的组件。\n\n::: tip 提示\n`ConfigProvider` 仅影响它的子组件样式，不会直接修改全局 `root` 节点样式。\n:::\n\n::: code-group\n\n```html [vue]\n<wd-config-provider :theme-vars=\"themeVars\">\n <view style=\"margin: 16px\">\n <wd-button round block type=\"primary\">提交</wd-button>\n </view>\n</wd-config-provider>\n```\n\n```ts [ts]\nimport { reactive } from 'vue'\n\nconst themeVars = reactive({\n buttonPrimaryBg: '#07c160',\n buttonPrimaryColor: '#ffffff'\n})\n```\n\n:::\n\n### 在 TypeScript 中使用\n\n在 TypeScript 中定义 `themeVars` 时，建议使用组件库提供的 `ConfigProviderThemeVars` 类型，以获得完整的类型提示。\n\n::: code-group\n\n```ts [ts]\nimport type { ConfigProviderThemeVars } from '@wot-ui/ui'\n\nconst themeVars: ConfigProviderThemeVars = {\n buttonPrimaryBgColor: '#07c160',\n buttonPrimaryColor: '#ffffff'\n}\n```\n\n```ts [ts]\nimport type { ConfigProviderThemeVars } from '@/uni_modules/wot-ui/components/wd-config-provider/types'\n\nconst localThemeVars: ConfigProviderThemeVars = {\n cellTitleColor: '#4d80f0'\n}\n```\n\n:::\n\n\n\n## 特殊样式\n\n### 全局共享\n\n如需在应用层共享主题配置，可以结合虚拟根组件 [uni-ku-root](https://github.com/uni-ku/root) 使用。\n\n#### 安装\n\n::: code-group\n\n```bash [npm]\nnpm i -D @uni-ku/root\n```\n\n```bash [yarn]\nyarn add -D @uni-ku/root\n```\n\n```bash [pnpm]\npnpm add -D @uni-ku/root\n```\n\n:::\n\n#### 引入\n\n- CLI 项目：直接编辑根目录下的 vite.config.(js|ts)\n- HBuilderX 项目：需要在根目录下创建 vite.config.(js|ts)\n\n```ts\nimport { defineConfig } from 'vite'\nimport UniKuRoot from '@uni-ku/root'\nimport Uni from '@dcloudio/vite-plugin-uni'\n\nexport default defineConfig({\n plugins: [UniKuRoot(), Uni()]\n})\n```\n\n::: tip\n若存在会修改 pages.json 的插件，需要将 `UniKuRoot` 放置在这些插件之后。\n:::\n\n#### 使用\n\n1. 创建根组件并处理全局配置组件。\n\n```vue\n<script setup lang=\"ts\">\nimport { useTheme } from './composables/useTheme'\n\nconst { theme, themeVars } = useTheme({\n buttonPrimaryBgColor: '#07c160',\n buttonPrimaryColor: '#ffffff'\n})\n</script>\n\n<template>\n <wd-config-provider :theme=\"theme\" :theme-vars=\"themeVars\">\n <KuRootView />\n </wd-config-provider>\n</template>\n```\n\n2. 编写控制主题的组合式函数。\n\n```ts\nimport type { ConfigProviderThemeVars } from '@wot-ui/ui'\nimport { ref } from 'vue'\n\nconst theme = ref<'light' | 'dark'>('light')\nconst themeVars = ref<ConfigProviderThemeVars>()\n\nexport function useTheme(vars?: ConfigProviderThemeVars) {\n if (vars) themeVars.value = vars\n\n function toggleTheme(mode?: 'light' | 'dark') {\n theme.value = mode || (theme.value === 'light' ? 'dark' : 'light')\n }\n\n return {\n theme,\n themeVars,\n toggleTheme\n }\n}\n```\n\n3. 在任意页面中使用切换主题模式。\n\n```vue\n<script setup lang=\"ts\">\nimport { useTheme } from '@/composables/useTheme'\n\nconst { theme, toggleTheme } = useTheme()\n</script>\n\n<template>\n <button @click=\"toggleTheme\">切换主题，当前模式：{{ theme }}</button>\n</template>\n```\n\n## 组合式函数\n\n### useConfigProvider\n\n详细文档请查看 [useConfigProvider](/component/use-config-provider)。\n\n在微信小程序等环境中，由于组件渲染机制限制，被渲染在插槽中的组件或通过 `root-portal` 移动到根节点的组件，可能无法继承外层 `ConfigProvider` 的 provide 上下文。为了解决这个问题，组件库提供了 `useConfigProvider`，允许你在逻辑层显式注入配置。\n\n#### 引入\n\n```ts\nimport { useConfigProvider } from '@wot-ui/ui'\n```\n\n#### 使用\n\n`useConfigProvider` 接受一个包含 `themeVars` 的对象，`themeVars` 支持普通对象、`reactive` 对象或 `Ref` 对象。\n\n```vue\n<script setup lang=\"ts\">\nimport { reactive } from 'vue'\nimport { useConfigProvider } from '@wot-ui/ui'\n\nconst themeVars = reactive({\n buttonPrimaryBg: '#07c160',\n buttonPrimaryColor: '#ffffff'\n})\n\nuseConfigProvider({ themeVars })\n</script>\n```\n\n## ConfigProvider Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| theme | 主题风格，可选值为 `light`、`dark` | string | `light` |\n| theme-vars | 自定义主题变量 | `ConfigProviderThemeVars` | `{}` |\n| custom-class | 根节点自定义样式类 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## ConfigProvider Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 默认插槽，用于包裹需要应用主题的子组件 |\n",
|
|
4393
4390
|
"props": [
|
|
4394
4391
|
{
|
|
@@ -4458,7 +4455,7 @@
|
|
|
4458
4455
|
"category": "未分类",
|
|
4459
4456
|
"description": "用于实时展示倒计时数值，支持毫秒级渲染与手动控制。",
|
|
4460
4457
|
"descriptionZh": "用于实时展示倒计时数值，支持毫秒级渲染与手动控制。",
|
|
4461
|
-
"since": "2.0.
|
|
4458
|
+
"since": "2.0.4",
|
|
4462
4459
|
"doc": "# CountDown 倒计时\n\n用于实时展示倒计时数值，支持毫秒级渲染与手动控制。\n\n## 组件类型\n\n### 基础用法\n\n`time` 表示倒计时总时长，单位毫秒。\n\n```html\n<wd-count-down :time=\"time\" />\n```\n\n```ts\nconst time = ref<number>(30 * 60 * 60 * 1000)\n```\n\n## 组件变体\n\n### 自定义格式\n\n通过 `format` 自定义展示格式。\n\n```html\n<wd-count-down :time=\"time\" format=\"DD 天 HH 时 mm 分 ss 秒\" />\n```\n\n### 毫秒级渲染\n\n设置 `millisecond` 开启毫秒级渲染。\n\n```html\n<wd-count-down :time=\"time\" millisecond format=\"HH:mm:ss:SS\" />\n```\n\n## 组件样式\n\n### 自定义样式\n\n使用默认插槽自定义倒计时内容，插槽参数见下方 `TimeData`。\n\n```html\n<wd-count-down :time=\"time\">\n <template #default=\"{ current }\">\n <span class=\"custom-count-down\">{{ current.hours }}</span>\n <span class=\"custom-count-down-colon\">:</span>\n <span class=\"custom-count-down\">{{ current.minutes }}</span>\n <span class=\"custom-count-down-colon\">:</span>\n <span class=\"custom-count-down\">{{ current.seconds }}</span>\n </template>\n</wd-count-down>\n```\n\n## 特殊样式\n\n### 手动控制\n\n通过实例方法控制开始、暂停、重置。\n\n```html\n<wd-count-down ref=\"countDown\" :time=\"3000\" millisecond :auto-start=\"false\" format=\"ss:SSS\" @finish=\"onFinish\" />\n<wd-grid clickable border>\n <wd-grid-item text=\"开始\" icon=\"play-circle\" @click=\"start\" />\n <wd-grid-item text=\"暂停\" icon=\"pause-circle\" @click=\"pause\" />\n <wd-grid-item text=\"重置\" icon=\"refresh\" @click=\"reset\" />\n</wd-grid>\n```\n\n```ts\nconst countDown = ref<CountDownInstance>()\n\nconst start = () => countDown.value?.start()\nconst pause = () => countDown.value?.pause()\nconst reset = () => countDown.value?.reset()\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| time | 倒计时时长，单位毫秒 | number | - |\n| millisecond | 是否开启毫秒级渲染 | boolean | false |\n| format | 倒计时格式化字符串 | string | `HH:mm:ss` |\n| auto-start | 是否在初始化和重置后自动开始倒计时 | boolean | true |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 倒计时变化时触发 | `current: TimeData` |\n| finish | 倒计时结束时触发 | - |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| start | 开始倒计时 | - |\n| pause | 暂停倒计时 | - |\n| reset | 重置倒计时；若 `auto-start` 为 `true`，重置后自动开始 | - |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义倒计时展示内容 | `{ current: TimeData }` |\n\n### format 格式\n\n| 格式 | 说明 |\n| --- | --- |\n| DD | 天数 |\n| HH | 小时 |\n| mm | 分钟 |\n| ss | 秒数 |\n| S | 毫秒（1 位） |\n| SS | 毫秒（2 位） |\n| SSS | 毫秒（3 位） |\n\n### TimeData 对象\n\n| 属性 | 说明 | 类型 |\n| --- | --- | --- |\n| total | 剩余总毫秒数 | number |\n| days | 天 | number |\n| hours | 小时 | number |\n| minutes | 分钟 | number |\n| seconds | 秒 | number |\n| milliseconds | 毫秒 | number |\n",
|
|
4463
4460
|
"props": [
|
|
4464
4461
|
{
|
|
@@ -4529,7 +4526,7 @@
|
|
|
4529
4526
|
},
|
|
4530
4527
|
{
|
|
4531
4528
|
"name": "--wot-count-down-line-height",
|
|
4532
|
-
"defaultValue": "$typography-body-line
|
|
4529
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
4533
4530
|
"description": "倒计时文本行高"
|
|
4534
4531
|
}
|
|
4535
4532
|
],
|
|
@@ -4573,7 +4570,7 @@
|
|
|
4573
4570
|
"category": "未分类",
|
|
4574
4571
|
"description": "用于数字滚动展示，支持主题、前后缀、小数精度与手动控制。",
|
|
4575
4572
|
"descriptionZh": "用于数字滚动展示，支持主题、前后缀、小数精度与手动控制。",
|
|
4576
|
-
"since": "2.0.
|
|
4573
|
+
"since": "2.0.4",
|
|
4577
4574
|
"doc": "# CountTo 数字滚动\n\n用于数字滚动展示，支持主题、前后缀、小数精度与手动控制。\n\n## 组件类型\n\n### 基本用法\n\n设置 `end-val` 指定最终值，`start-val` 指定起始值，`duration` 指定滚动时长（ms）。\n\n```html\n<wd-count-to :end-val=\"2024\" suffix=\"年\" color=\"#16baaa\" />\n<wd-count-to prefix=\"￥\" :start-val=\"0\" :decimals=\"2\" :end-val=\"186.321\" suffix=\"%\" color=\"#1e9fff\" />\n<wd-count-to prefix=\"￥\" :start-val=\"0\" :decimals=\"2\" :end-val=\"21286.321\" suffix=\"%\" color=\"#ff5722\" />\n<wd-count-to prefix=\"￥\" :start-val=\"0\" :decimals=\"2\" :end-val=\"21286.321\" suffix=\"%\" color=\"#ffb800\" :duration=\"2000\" />\n```\n\n## 组件样式\n\n### 设置主题\n\n通过 `type` 设置文本主题，可选值为 `default`、`primary`、`success`、`warning`、`error`。\n\n```html\n<wd-count-to type=\"primary\" prefix=\"￥\" :start-val=\"0\" :end-val=\"888888\" suffix=\"%\" />\n<wd-count-to type=\"error\" prefix=\"￥\" :start-val=\"0\" :end-val=\"888888\" suffix=\"%\" />\n<wd-count-to type=\"success\" prefix=\"￥\" :start-val=\"0\" :end-val=\"888888\" suffix=\"%\" />\n<wd-count-to type=\"warning\" prefix=\"￥\" :start-val=\"0\" :end-val=\"888888\" suffix=\"%\" />\n<wd-count-to type=\"default\" prefix=\"￥\" :start-val=\"0\" :end-val=\"888888\" suffix=\"%\" />\n```\n\n## 特殊样式\n\n### 手动控制\n\n设置 `auto-start=\"false\"` 后，可通过实例方法手动开始、暂停、重置。\n\n```html\n<wd-count-to ref=\"countTo\" :auto-start=\"false\" prefix=\"￥\" :start-val=\"1000\" :decimals=\"3\" :end-val=\"9999.32\" suffix=\"%\" color=\"#1e9fff\" />\n<wd-grid clickable border>\n <wd-grid-item text=\"开始\" icon=\"play-circle\" @click=\"start\" />\n <wd-grid-item text=\"暂停\" icon=\"pause-circle\" @click=\"pause\" />\n <wd-grid-item text=\"重置\" icon=\"refresh\" @click=\"reset\" />\n</wd-grid>\n```\n\n```ts\nimport type { CountToInstance } from '@/uni_modules/wot-ui/components/wd-count-to/types'\n\nconst countTo = ref<CountToInstance>()\n\nconst start = () => countTo.value?.start()\nconst pause = () => countTo.value?.pause()\nconst reset = () => countTo.value?.reset()\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| color | 文本颜色 | string | `''` |\n| type | 主题类型，可选值为 `default`、`primary`、`success`、`warning`、`error` | string | default |\n| start-val | 起始值 | number | 0 |\n| end-val | 最终值 | number | 2024 |\n| duration | 从起始值到结束值数字变动的时间（毫秒） | number | 3000 |\n| auto-start | 是否自动开始 | boolean | true |\n| decimals | 保留的小数位数，需大于等于 0 | number | 0 |\n| decimal | 小数点符号 | string | `.` |\n| separator | 千分位分隔符 | string | `,` |\n| prefix | 前缀文本 | string | `''` |\n| suffix | 后缀文本 | string | `''` |\n| use-easing | 是否使用缓动动画 | boolean | true |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| mounted | 组件加载完成时触发 | - |\n| finish | 动画完成时触发 | - |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| start | 开始动画 | - |\n| pause | 暂停动画 | - |\n| reset | 重置动画；若 `auto-start` 为 `true`，重置后自动开始 | - |\n\n## Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| default | 主体数字内容 | - |\n| prefix | 前缀内容 | - |\n| suffix | 后缀内容 | - |\n",
|
|
4578
4575
|
"props": [
|
|
4579
4576
|
{
|
|
@@ -4695,7 +4692,7 @@
|
|
|
4695
4692
|
},
|
|
4696
4693
|
{
|
|
4697
4694
|
"name": "--wot-count-to-text-line-height",
|
|
4698
|
-
"defaultValue": "$typography-body-line
|
|
4695
|
+
"defaultValue": "$typography-body-line-height-size-ultra-large",
|
|
4699
4696
|
"description": "数字主体文本行高"
|
|
4700
4697
|
},
|
|
4701
4698
|
{
|
|
@@ -4705,7 +4702,7 @@
|
|
|
4705
4702
|
},
|
|
4706
4703
|
{
|
|
4707
4704
|
"name": "--wot-count-to-separator-text-line-height",
|
|
4708
|
-
"defaultValue": "$typography-label-line
|
|
4705
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
4709
4706
|
"description": "分隔文本行高"
|
|
4710
4707
|
}
|
|
4711
4708
|
],
|
|
@@ -4737,7 +4734,7 @@
|
|
|
4737
4734
|
"category": "未分类",
|
|
4738
4735
|
"description": "一般用于公告类图片弹窗展示。",
|
|
4739
4736
|
"descriptionZh": "一般用于公告类图片弹窗展示。",
|
|
4740
|
-
"since": "2.0.
|
|
4737
|
+
"since": "2.0.4",
|
|
4741
4738
|
"doc": "# Curtain 幕帘\n\n一般用于公告类图片弹窗展示。\n\n## 组件类型\n\n### 基本用法\n\n通过 `v-model` 控制显示与隐藏；`src` 为幕帘图片地址；`to` 为点击图片后的跳转链接；`width` 为图片宽度（高度按原图比例自动计算）。\n\n```html\n<wd-button @click=\"open = true\">展示幕帘</wd-button>\n<wd-curtain v-model=\"open\" :src=\"img\" :to=\"link\" :width=\"280\" />\n```\n\n## 组件样式\n\n### 修改关闭按钮位置\n\n`close-position` 可选值为 `inset`、`top`、`bottom`、`top-left`、`top-right`、`bottom-left`、`bottom-right`。\n\n```html\n<wd-curtain v-model=\"showTopLeft\" :src=\"img\" :to=\"link\" close-position=\"top-left\" :width=\"280\" />\n<wd-curtain v-model=\"showTop\" :src=\"img\" :to=\"link\" close-position=\"top\" :width=\"280\" />\n<wd-curtain v-model=\"showTopRight\" :src=\"img\" :to=\"link\" close-position=\"top-right\" :width=\"280\" />\n```\n\n## 组件状态\n\n### 点击遮罩可关闭\n\n设置 `close-on-click-modal` 后，点击遮罩会关闭幕帘。\n\n```html\n<wd-curtain v-model=\"open\" :src=\"img\" :to=\"link\" close-position=\"bottom-right\" :width=\"280\" close-on-click-modal />\n```\n\n## 特殊样式\n\n### 自定义关闭按钮\n\n通过 `close` 插槽自定义关闭按钮内容和交互。\n\n```html\n<wd-curtain v-model=\"open\" :src=\"img\" :width=\"280\">\n <template #close>\n <view class=\"custom-close\" @click=\"open = false\">关闭</view>\n </template>\n</wd-curtain>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model / modelValue | 绑定值，控制幕帘显示与关闭 | boolean | false |\n| value | 绑定值（已废弃，请使用 `modelValue`） | boolean | false |\n| src | 幕帘图片地址，必须使用网络地址 | string | - |\n| width | 幕帘图片宽度，默认单位 px | number | - |\n| to | 幕帘图片点击链接 | string | - |\n| close-position | 关闭按钮位置，可选值为 `inset`、`top`、`bottom`、`top-left`、`top-right`、`bottom-left`、`bottom-right` | string | `inset` |\n| close-on-click-modal | 点击遮罩是否关闭 | boolean | false |\n| hide-when-close | 关闭时是否隐藏弹出层（`display: none`） | boolean | true |\n| z-index | 设置层级 | number | 10 |\n| custom-close-class | 关闭按钮自定义类名 | string | `''` |\n| custom-close-style | 关闭按钮自定义样式 | string | `''` |\n| root-portal | 是否从页面中脱离，用于解决 fixed 失效问题（H5: teleport，App: renderjs，小程序: root-portal） | boolean | false |\n| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单，仅微信小程序支持 | boolean | false |\n| close-on-click | 点击图片时是否关闭幕帘 | boolean | true |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击幕帘图片时触发 | - |\n| close | 弹出层关闭时触发 | - |\n| closed | 弹出层关闭动画结束后触发 | - |\n| click-modal | 点击遮罩时触发 | - |\n| beforeenter | 进入前触发 | - |\n| enter | 进入时触发 | - |\n| afterenter | 进入后触发 | - |\n| beforeleave | 离开前触发 | - |\n| leave | 离开时触发 | - |\n| afterleave | 离开后触发 | - |\n| load | 图片加载完成时触发 | `event` |\n| error | 图片加载失败时触发。图片加载失败后，即使 `modelValue` 为 `true` 也不会展示幕帘 | - |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| close | 自定义关闭按钮 | - |\n",
|
|
4742
4739
|
"props": [
|
|
4743
4740
|
{
|
|
@@ -4961,7 +4958,7 @@
|
|
|
4961
4958
|
"category": "未分类",
|
|
4962
4959
|
"description": "对 `DatetimePickerView` 的封装组件，内置日期时间列构建与弹窗交互。",
|
|
4963
4960
|
"descriptionZh": "对 `DatetimePickerView` 的封装组件，内置日期时间列构建与弹窗交互。",
|
|
4964
|
-
"since": "2.0.
|
|
4961
|
+
"since": "2.0.4",
|
|
4965
4962
|
"doc": "# DatetimePicker 日期时间选择器\n\n对 `DatetimePickerView` 的封装组件，内置日期时间列构建与弹窗交互。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 绑定当前值，点击确认后通过 `confirm` 返回结果。\n\n```html\n<wd-datetime-picker v-model=\"value\" v-model:visible=\"show\" @confirm=\"handleConfirm\" />\n```\n\n```ts\nconst value = ref<number>(Date.now())\nconst show = ref(false)\nconst handleConfirm = ({ value }: { value: number | string | Array<number | string> }) => {\n console.log(value)\n}\n```\n\n### 限制可选时间范围\n\n使用 `min-date` 和 `max-date` 约束日期范围。\n\n```html\n<wd-datetime-picker v-model=\"value\" v-model:visible=\"show\" :min-date=\"minDate\" :max-date=\"maxDate\" />\n```\n\n```ts\nconst value = ref<number>(Date.now())\nconst show = ref(false)\nconst minDate = new Date(new Date().getFullYear(), 0, 1).getTime()\nconst maxDate = new Date(new Date().getFullYear() + 1, 11, 31, 23, 59, 59).getTime()\n```\n\n## 组件状态\n\n### 确定前校验\n\n设置 `before-confirm`，在点击确定时执行拦截校验，支持返回 `boolean` 或 `Promise<boolean>`。\n\n```html\n<wd-datetime-picker v-model=\"value\" v-model:visible=\"show\" :before-confirm=\"beforeConfirm\" />\n```\n\n```ts\nconst value = ref<number>(Date.now())\nconst show = ref(false)\nconst beforeConfirm = (value: number | string | Array<number | string>) => {\n if (Array.isArray(value)) return true\n if (typeof value === 'number') return value <= Date.now()\n return true\n}\n```\n\n## 组件变体\n\n### 类型切换\n\n支持 `datetime`、`date`、`year-month`、`year`、`time` 五种类型。\n\n::: code-group\n```html [模板]\n<wd-datetime-picker v-model=\"dateValue\" type=\"date\" />\n<wd-datetime-picker v-model=\"yearMonthValue\" type=\"year-month\" />\n<wd-datetime-picker v-model=\"yearValue\" type=\"year\" />\n<wd-datetime-picker v-model=\"timeValue\" type=\"time\" />\n<wd-datetime-picker v-model=\"datetimeValue\" type=\"datetime\" />\n```\n\n```ts [脚本]\nconst dateValue = ref<number>(Date.now())\nconst yearMonthValue = ref<number>(Date.now())\nconst yearValue = ref<number>(Date.now())\nconst timeValue = ref<string>('09:20')\nconst datetimeValue = ref<number>(Date.now())\n```\n:::\n\n### 开启秒选择\n\n在 `time` 和 `datetime` 类型下可通过 `use-second` 显示秒。\n\n```html\n<wd-datetime-picker v-model=\"timeValue\" type=\"time\" use-second />\n<wd-datetime-picker v-model=\"value\" type=\"datetime\" use-second />\n```\n\n```ts\nconst timeValue = ref<string>('09:20:30')\nconst value = ref<number>(Date.now())\n```\n\n### 区间选择\n\n当 `v-model` 为数组时开启区间选择模式。\n\n```html\n<wd-datetime-picker v-model=\"rangeValue\" v-model:visible=\"show\" />\n```\n\n```ts\nconst rangeValue = ref<(string | number)[]>(['', Date.now()])\nconst show = ref(false)\n```\n\n## 组件样式\n\n### 自定义列项格式\n\n通过 `formatter` 自定义滚筒内选项文案。\n\n```html\n<wd-datetime-picker v-model=\"value\" :formatter=\"formatter\" />\n```\n\n```ts\nconst formatter = (type: string, value: number) => {\n switch (type) {\n case 'year':\n return `${value}年`\n case 'month':\n return `${value}月`\n case 'date':\n return `${value}日`\n case 'hour':\n return `${value}时`\n case 'minute':\n return `${value}分`\n case 'second':\n return `${value}秒`\n default:\n return `${value}`\n }\n}\n```\n\n### 过滤列选项\n\n通过 `filter` 过滤可选项列表。\n\n```html\n<wd-datetime-picker v-model=\"value\" :filter=\"filter\" />\n```\n\n```ts\nconst filter = ({ type, values }: { type: string; values: number[] }) => {\n if (type === 'minute') {\n return values.filter((value) => value % 5 === 0)\n }\n return values\n}\n```\n\n### 自定义区间 Tab 文案\n\n区间选择模式下通过 `display-format-tab-label` 格式化开始/结束标签显示。\n\n```html\n<wd-datetime-picker v-model=\"rangeValue\" :display-format-tab-label=\"displayFormatTabLabel\" />\n```\n\n```ts\nconst displayFormatTabLabel = (items: Array<{ label: string | number }>) => {\n return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model / modelValue | 绑定值。`time` 类型为字符串；区间模式为数组；其余类型为时间戳 | `string \\| number \\| Array<string \\| number>` | - |\n| visible / v-model:visible | 是否显示弹窗 | boolean | false |\n| type | 选择器类型，可选值为 `datetime`、`date`、`year-month`、`time`、`year` | string | datetime |\n| title | 弹出层标题 | string | - |\n| cancel-button-text | 取消按钮文案 | string | - |\n| confirm-button-text | 确认按钮文案 | string | - |\n| close-on-click-modal | 点击遮罩是否关闭 | boolean | true |\n| safe-area-inset-bottom | 弹出面板是否设置底部安全距离 | boolean | true |\n| item-height | 单项高度 | number | 44 |\n| visible-item-count | 可见项数量 | number | 6 |\n| value-key | 选项值字段名 | string | value |\n| label-key | 选项文案字段名 | string | label |\n| min-date | 最小日期（时间戳） | number | 当前年份前 10 年 1 月 1 日 |\n| max-date | 最大日期（时间戳） | number | 当前年份后 10 年 12 月 31 日 23:59:59 |\n| min-hour | 最小小时（`time` 类型生效） | number | 0 |\n| max-hour | 最大小时（`time` 类型生效） | number | 23 |\n| min-minute | 最小分钟（`time` 类型生效） | number | 0 |\n| max-minute | 最大分钟（`time` 类型生效） | number | 59 |\n| use-second | 是否显示秒选择，仅 `time` 和 `datetime` 生效 | boolean | false |\n| min-second | 最小秒数，仅 `time` 和 `datetime` 生效 | number | 0 |\n| max-second | 最大秒数，仅 `time` 和 `datetime` 生效 | number | 59 |\n| formatter | 自定义滚筒选项格式化函数 | DatetimePickerViewFormatter | - |\n| filter | 自定义过滤函数 | DatetimePickerViewFilter | - |\n| before-confirm | 确定前校验函数，接收 `(value)`，返回 `boolean` 或 `Promise<boolean>` | DatetimePickerBeforeConfirm | - |\n| display-format-tab-label | 区间模式下自定义 Tab 标签格式化函数 | DatetimePickerDisplayFormatTabLabel | - |\n| z-index | 弹窗层级 | number | 15 |\n| immediate-change | 是否在手指松开时立即触发 change（仅微信/支付宝小程序） | boolean | false |\n| root-portal | 是否脱离文档流渲染（H5: teleport，App: renderjs，小程序: root-portal） | boolean | false |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n| custom-view-class | pickerView 外部自定义样式类 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开弹窗时触发 | - |\n| cancel | 点击取消或关闭弹窗时触发 | - |\n| confirm | 点击确认按钮触发 | `{ value }` |\n| change | 选中值变化时触发 | `{ value }` |\n| toggle | 区间模式切换开始/结束 Tab 时触发 | 当前激活 Tab 对应的值 |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开 picker 弹框 | - |\n| close | 关闭 picker 弹框 | - |\n",
|
|
4966
4963
|
"props": [
|
|
4967
4964
|
{
|
|
@@ -5202,7 +5199,7 @@
|
|
|
5202
5199
|
},
|
|
5203
5200
|
{
|
|
5204
5201
|
"name": "--wot-datetime-picker-title-line-height",
|
|
5205
|
-
"defaultValue": "$typography-title-line
|
|
5202
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
5206
5203
|
"description": "标题文字行高"
|
|
5207
5204
|
},
|
|
5208
5205
|
{
|
|
@@ -5222,7 +5219,7 @@
|
|
|
5222
5219
|
},
|
|
5223
5220
|
{
|
|
5224
5221
|
"name": "--wot-datetime-picker-action-line-height",
|
|
5225
|
-
"defaultValue": "$typography-body-line
|
|
5222
|
+
"defaultValue": "$typography-body-line-height-size-large",
|
|
5226
5223
|
"description": "操作按钮行高"
|
|
5227
5224
|
},
|
|
5228
5225
|
{
|
|
@@ -5252,7 +5249,7 @@
|
|
|
5252
5249
|
},
|
|
5253
5250
|
{
|
|
5254
5251
|
"name": "--wot-datetime-picker-range-item-line-height",
|
|
5255
|
-
"defaultValue": "$typography-body-line
|
|
5252
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
5256
5253
|
"description": "范围标签项行高"
|
|
5257
5254
|
},
|
|
5258
5255
|
{
|
|
@@ -5359,7 +5356,7 @@
|
|
|
5359
5356
|
"category": "未分类",
|
|
5360
5357
|
"description": "用于构建日期时间滚筒选项的基础视图组件。",
|
|
5361
5358
|
"descriptionZh": "用于构建日期时间滚筒选项的基础视图组件。",
|
|
5362
|
-
"since": "2.0.
|
|
5359
|
+
"since": "2.0.4",
|
|
5363
5360
|
"doc": "# DatetimePickerView 日期时间选择器视图\n\n用于构建日期时间滚筒选项的基础视图组件。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 绑定选中值；默认 `datetime` 类型，值为时间戳。\n\n```html\n<wd-datetime-picker-view v-model=\"value\" @change=\"handleChange\" />\n```\n\n```ts\nconst value = ref<number>(Date.now())\nconst handleChange = ({ value }: { value: number | string }) => {\n console.log(value)\n}\n```\n\n## 组件变体\n\n### 日期类型\n\n支持 `datetime`、`date`、`year-month`、`year`、`time` 五种类型。\n\n::: code-group\n```html [模板]\n<wd-datetime-picker-view type=\"date\" v-model=\"dateValue\" />\n<wd-datetime-picker-view type=\"year-month\" v-model=\"yearMonthValue\" />\n<wd-datetime-picker-view type=\"year\" v-model=\"yearValue\" />\n<wd-datetime-picker-view type=\"time\" v-model=\"timeValue\" />\n<wd-datetime-picker-view type=\"datetime\" v-model=\"datetimeValue\" />\n```\n\n```ts [脚本]\nconst dateValue = ref<number>(Date.now())\nconst yearMonthValue = ref<number>(Date.now())\nconst yearValue = ref<number>(Date.now())\nconst timeValue = ref<string>('11:12')\nconst datetimeValue = ref<number>(Date.now())\n```\n:::\n\n### 开启秒选择\n\n在 `time` 和 `datetime` 类型下可通过 `use-second` 展示秒列。\n\n```html\n<wd-datetime-picker-view type=\"time\" v-model=\"timeValue\" use-second />\n<wd-datetime-picker-view type=\"datetime\" v-model=\"value\" use-second />\n```\n\n```ts\nconst timeValue = ref<string>('11:12:30')\nconst value = ref<number>(Date.now())\n```\n\n## 组件样式\n\n### 修改内部格式\n\n通过 `formatter` 自定义滚筒文案格式。\n\n```html\n<wd-datetime-picker-view v-model=\"value\" :formatter=\"formatter\" />\n```\n\n```ts\nconst formatter = (type: string, value: number) => {\n switch (type) {\n case 'year':\n return `${value}年`\n case 'month':\n return `${value}月`\n case 'date':\n return `${value}日`\n case 'hour':\n return `${value}时`\n case 'minute':\n return `${value}分`\n case 'second':\n return `${value}秒`\n default:\n return `${value}`\n }\n}\n```\n\n### 过滤选项\n\n通过 `filter` 按列过滤可选值。\n\n```html\n<wd-datetime-picker-view v-model=\"value\" :filter=\"filter\" />\n```\n\n```ts\nconst filter = ({ type, values }: { type: string; values: number[] }) => {\n if (type === 'minute') {\n return values.filter((value) => value % 5 === 0)\n }\n return values\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model / modelValue | 选中项，`time` 类型为字符串，其余类型为时间戳 | `string \\| number` | - |\n| type | 选择器类型，可选值为 `datetime`、`date`、`year-month`、`time`、`year` | DateTimeType | datetime |\n| item-height | 单项高度 | number | 44 |\n| visible-item-count | 可见项数量 | number | 6 |\n| value-key | 选项值字段名 | string | value |\n| label-key | 选项文案字段名 | string | label |\n| formatter | 自定义选项文案格式化函数 | DatetimePickerViewFormatter | - |\n| filter | 自定义过滤函数 | DatetimePickerViewFilter | - |\n| column-formatter | 自定义列格式化函数 | DatetimePickerViewColumnFormatter | - |\n| min-date | 最小日期（时间戳） | number | 当前年份前 10 年 1 月 1 日 |\n| max-date | 最大日期（时间戳） | number | 当前年份后 10 年 12 月 31 日 |\n| min-hour | 最小小时（`time` 类型生效） | number | 0 |\n| max-hour | 最大小时（`time` 类型生效） | number | 23 |\n| min-minute | 最小分钟（`time` 类型生效） | number | 0 |\n| max-minute | 最大分钟（`time` 类型生效） | number | 59 |\n| use-second | 是否显示秒选择，仅 `time` 和 `datetime` 生效 | boolean | false |\n| min-second | 最小秒数，仅 `time` 和 `datetime` 生效 | number | 0 |\n| max-second | 最大秒数，仅 `time` 和 `datetime` 生效 | number | 59 |\n| immediate-change | 是否在手指松开时立即触发 change（仅微信/支付宝小程序） | boolean | false |\n| boundary-min-date | 区间模式开始时间最小边界（用于联动） | number | - |\n| boundary-max-date | 区间模式结束时间最大边界（用于联动） | number | - |\n| custom-class | 根节点自定义类名 | string | `''` |\n| custom-style | 根节点自定义样式 | string | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 选中项变化时触发 | `{ value, columns }` |\n| pickstart | 滚动开始时触发 | - |\n| pickend | 滚动结束时触发 | - |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| getSelectedOptions | 获取当前选中项对象数组 | - |\n| correctValue | 纠正并返回合法值 | `value: string \\| number` |\n| getOriginColumns | 获取原始列定义 | - |\n\n## Types\n\n### DatetimePickerViewColumn\n\n| 键名 | 说明 | 类型 |\n| --- | --- | --- |\n| type | 列类型 | `year \\| month \\| date \\| hour \\| minute \\| second` |\n| values | 当前列可选值数组 | number[] |\n\n### DatetimePickerViewOption\n\n| 键名 | 说明 | 类型 |\n| --- | --- | --- |\n| value | 选项值 | number |\n| label | 选项展示文本 | string |\n| disabled | 是否禁用 | boolean |\n",
|
|
5364
5361
|
"props": [
|
|
5365
5362
|
{
|
|
@@ -5554,7 +5551,7 @@
|
|
|
5554
5551
|
"category": "未分类",
|
|
5555
5552
|
"description": "弹出对话框，常用于消息提示、操作确认和输入收集，支持函数式调用。",
|
|
5556
5553
|
"descriptionZh": "弹出对话框，常用于消息提示、操作确认和输入收集，支持函数式调用。",
|
|
5557
|
-
"since": "2.0.
|
|
5554
|
+
"since": "2.0.4",
|
|
5558
5555
|
"doc": "# Dialog 弹框\n\n弹出对话框，常用于消息提示、操作确认和输入收集，支持函数式调用。\n\n:::tip 提示\n全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html)，可用于路由守卫、请求拦截器等场景。\n:::\n\n## 组件类型\n\n### Alert 弹框\n\nAlert 仅展示确认按钮，常用于消息通知。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openAlert\">打开 Alert</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openAlert = () => {\n dialog.alert({\n title: '提示',\n msg: '操作成功'\n })\n}\n```\n\n### Confirm 弹框\n\nConfirm 通过 `Promise` 返回用户操作结果，`then` 对应确认，`catch` 对应取消。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openConfirm\">打开 Confirm</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openConfirm = () => {\n dialog\n .confirm({\n title: '提示',\n msg: '确认执行此操作吗？'\n })\n .then(() => {\n console.log('点击了确认')\n })\n .catch(() => {\n console.log('点击了取消')\n })\n}\n```\n\n### Prompt 弹框\n\nPrompt 会展示输入框，可用于采集文本并进行校验。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openPrompt\">打开 Prompt</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openPrompt = () => {\n dialog\n .prompt({\n title: '请输入邮箱',\n inputPattern: /.+@.+\\..+/i,\n inputError: '邮箱格式不正确'\n })\n .then((res) => {\n console.log(res.value)\n })\n}\n```\n\n## 组件状态\n\n### 确认前校验\n\n`beforeConfirm` 接收当前输入值，支持返回 `boolean` 或 `Promise<boolean>`，返回 `false` 时会拦截关闭。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openBeforeConfirm\">确认前校验</wd-button>\n```\n\n```ts\nimport { useDialog, useToast } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\nconst toast = useToast()\n\nconst openBeforeConfirm = () => {\n dialog.confirm({\n title: '删除确认',\n msg: '确定删除该记录吗？',\n beforeConfirm: () => {\n toast.loading('删除中...')\n return new Promise((resolve) => {\n setTimeout(() => {\n toast.close()\n resolve(true)\n }, 1500)\n })\n }\n })\n}\n```\n\n### 输入校验\n\nPrompt 同时支持正则校验 `input-pattern` 与函数校验 `input-validate`。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openPromptValidate\">输入校验</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openPromptValidate = () => {\n dialog.prompt({\n title: '请输入手机号',\n inputProps: {\n type: 'tel',\n placeholder: '请输入 11 位手机号'\n },\n inputValidate: (value) => /^1[3-9]\\d{9}$/.test(String(value)),\n inputError: '手机号格式不正确'\n })\n}\n```\n\n## 组件变体\n\n### 风格与布局\n\n通过 `theme` 与 `action-layout` 控制弹框按钮风格和排列方式。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openTextTheme\">Text 风格 + 纵向布局</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openTextTheme = () => {\n dialog.confirm({\n title: '版本更新',\n msg: '发现新版本，是否立即更新？',\n theme: 'text',\n actionLayout: 'vertical'\n })\n}\n```\n\n### 自定义操作按钮\n\n通过 `actions` 可以定义多个按钮。`actions` 与 `confirm-button-props` / `cancel-button-props` 同时配置时优先使用 `actions`。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openActions\">自定义操作按钮</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openActions = () => {\n dialog.show({\n title: '选择支付方式',\n actionLayout: 'vertical',\n actions: [\n { text: '微信支付', type: 'success', block: true },\n { text: '支付宝', type: 'primary', block: true },\n { text: '取消', block: true }\n ]\n })\n}\n```\n\n## 组件样式\n\n### 图标与头图\n\n可通过 `icon`、`icon-color`、`icon-props`、`header-image` 配置视觉样式。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openStyledDialog\">图标和头图</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openStyledDialog = () => {\n dialog.alert({\n title: '活动通知',\n msg: '恭喜您获得专属权益',\n icon: 'success',\n headerImage: 'https://example.com/banner.png'\n })\n}\n```\n\n### 自定义按钮样式\n\n可通过 `confirm-button-props`、`cancel-button-props` 透传按钮属性。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openCustomButtons\">自定义按钮样式</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openCustomButtons = () => {\n dialog.confirm({\n title: '提示',\n msg: '是否继续？',\n confirmButtonProps: {\n type: 'success',\n customClass: 'custom-shadow'\n },\n cancelButtonProps: {\n type: 'danger',\n customClass: 'custom-shadow'\n }\n })\n}\n```\n\n## 特殊样式\n\n### 插槽\n\n通过 `selector` 区分多个实例，并使用 `useDialog(selector)` 调用指定弹框。\n\n```html\n<wd-dialog selector=\"wd-dialog-slot\">\n <wd-rate v-model=\"rate\" />\n</wd-dialog>\n<wd-button @click=\"openSlotDialog\">打开插槽弹框</wd-button>\n```\n\n```ts\nimport { ref } from 'vue'\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst rate = ref(1)\nconst slotDialog = useDialog('wd-dialog-slot')\n\nconst openSlotDialog = () => {\n slotDialog.confirm({\n title: '请为我们评分'\n })\n}\n```\n\n### OpenType\n\n`confirm-button-props`、`cancel-button-props` 与 `actions` 支持透传按钮开放能力属性（如 `openType`）及对应事件回调。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openOpenTypeDialog\">获取手机号</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openOpenTypeDialog = () => {\n dialog.confirm({\n title: '获取手机号',\n confirmButtonProps: {\n text: '授权获取',\n openType: 'getPhoneNumber',\n onGetphonenumber: (detail) => {\n console.log(detail)\n }\n }\n })\n}\n```\n\n## Methods\n\n`useDialog()` 返回如下方法：\n\n| 方法名称 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| show | 打开弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| alert | 打开 Alert 弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| confirm | 打开 Confirm 弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| prompt | 打开 Prompt 弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| close | 关闭当前弹框 | - | `void` |\n\n## Options\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 标题 | `string` | `''` |\n| msg | 消息内容 | `string` | `''` |\n| type | 弹框类型，可选值为 `alert`、`confirm`、`prompt` | `DialogType` | `'alert'` |\n| theme | 按钮风格，可选值为 `button`、`text` | `DialogTheme` | `'button'` |\n| zIndex | 弹窗层级 | `number` | `99` |\n| lazyRender | 弹层内容懒渲染 | `boolean` | `true` |\n| headerImage | 顶部通栏图片地址 | `string` | - |\n| icon | 图标名称。可选值为 `success`、`info`、`warning`、`danger`，也可传自定义图标名 | `string` | - |\n| iconColor | 图标颜色 | `string` | - |\n| iconProps | 透传 `wd-icon` 的属性 | `Partial<IconProps>` | - |\n| inputValue | Prompt 输入框初始值 | `string \\| number` | - |\n| inputProps | Prompt 模式下 `wd-input` 属性 | `Partial<InputProps>` | - |\n| textareaProps | Prompt 模式下 `wd-textarea` 属性 | `Partial<TextareaProps>` | - |\n| inputPattern | Prompt 输入正则校验规则 | `RegExp` | - |\n| inputValidate | Prompt 输入函数校验规则，返回 `boolean` 或错误信息字符串 | `(inputValue: string \\| number) => boolean \\| string` | - |\n| inputError | Prompt 校验失败提示文案 | `string` | - |\n| showErr | 是否展示错误信息 | `boolean` | `false` |\n| actionLayout | 操作按钮排列方式，可选值为 `horizontal`、`vertical` | `DialogActionLayout` | `'horizontal'` |\n| showCancelButton | 是否显示取消按钮 | `boolean` | `alert` 为 false，`confirm/prompt` 为 true |\n| confirmButtonText | 确认按钮文案 | `string` | - |\n| cancelButtonText | 取消按钮文案 | `string` | - |\n| confirmButtonProps | 确认按钮高级配置，支持传字符串、对象或 `null` | `DialogBoxButtonOption` | `{}` |\n| cancelButtonProps | 取消按钮高级配置，支持传字符串、对象或 `null` | `DialogBoxButtonOption` | 由 `showCancelButton` 推导 |\n| actions | 自定义操作按钮数组，配置后优先级高于确认/取消按钮 | `DialogAction[]` | - |\n| closeOnClickModal | 是否支持点击遮罩关闭（返回 action 为 `modal`） | `boolean` | `false` |\n| showClose | 是否显示右上角关闭按钮 | `boolean` | `false` |\n| beforeConfirm | 确认前拦截函数，返回 `boolean` 或 `Promise<boolean>` | `DialogBeforeConfirm` | - |\n\n## Attributes\n\n`wd-dialog` 组件实例支持以下属性：\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 指定唯一标识，用于区分页面中的多个实例 | `string` | `''` |\n| root-portal | 是否脱离页面文档流渲染，用于解决 fixed 失效问题 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| header | 自定义头部区域 | - |\n| image | 自定义图片区域 | - |\n| title | 自定义标题区域 | `{ icon, title, iconProps }` |\n| default | 自定义内容区域 | `{ msg, type, inputValue, showErr, inputError }` |\n| actions | 自定义操作区 | `{ confirm, cancel, close }` |\n",
|
|
5559
5556
|
"props": [
|
|
5560
5557
|
{
|
|
@@ -5648,7 +5645,7 @@
|
|
|
5648
5645
|
},
|
|
5649
5646
|
{
|
|
5650
5647
|
"name": "--wot-dialog-title-line-height",
|
|
5651
|
-
"defaultValue": "$typography-body-line
|
|
5648
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
5652
5649
|
"description": "标题文字行高"
|
|
5653
5650
|
},
|
|
5654
5651
|
{
|
|
@@ -5673,7 +5670,7 @@
|
|
|
5673
5670
|
},
|
|
5674
5671
|
{
|
|
5675
5672
|
"name": "--wot-dialog-content-line-height",
|
|
5676
|
-
"defaultValue": "$typography-body-line
|
|
5673
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
5677
5674
|
"description": "内容文字行高"
|
|
5678
5675
|
},
|
|
5679
5676
|
{
|
|
@@ -5703,7 +5700,7 @@
|
|
|
5703
5700
|
},
|
|
5704
5701
|
{
|
|
5705
5702
|
"name": "--wot-dialog-content-input-line-height",
|
|
5706
|
-
"defaultValue": "$typography-label-line
|
|
5703
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
5707
5704
|
"description": "输入错误文字行高"
|
|
5708
5705
|
},
|
|
5709
5706
|
{
|
|
@@ -5898,7 +5895,7 @@
|
|
|
5898
5895
|
"category": "未分类",
|
|
5899
5896
|
"description": "用于将内容分隔为多个区域。",
|
|
5900
5897
|
"descriptionZh": "用于将内容分隔为多个区域。",
|
|
5901
|
-
"since": "2.0.
|
|
5898
|
+
"since": "2.0.4",
|
|
5902
5899
|
"doc": "# Divider 分割线\n\n用于将内容分隔为多个区域。\n\n## 组件类型\n\n### 基本使用\n\n默认渲染一条水平分割线。\n\n```html\n<wd-divider />\n```\n\n### 展示文本\n\n使用默认插槽在分割线中间插入内容。\n\n```html\n<wd-divider>展示文本</wd-divider>\n```\n\n## 组件变体\n\n### 内容位置\n\n通过 `content-position` 指定内容所在位置。\n\n```html\n<wd-divider>中间</wd-divider>\n<wd-divider content-position=\"left\">左侧</wd-divider>\n<wd-divider content-position=\"right\">右侧</wd-divider>\n```\n\n### 虚线\n\n添加 `dashed` 使分割线渲染为虚线。\n\n```html\n<wd-divider dashed>虚线分割</wd-divider>\n```\n\n## 组件样式\n\n### 自定义渲染内容\n\n使用默认插槽渲染自定义内容。\n\n```html\n<wd-divider>\n <wd-icon name=\"down\" size=\"20\" />\n</wd-divider>\n```\n\n### 自定义颜色\n\n设置 `color` 自定义分割线颜色。\n\n```html\n<wd-divider color=\"#4D80F0\">自定义颜色</wd-divider>\n```\n\n## 特殊样式\n\n### 垂直分割线\n\n添加 `vertical` 使分割线渲染为垂直方向，垂直模式下默认插槽不生效。\n\n```html\n<view class=\"content\">\n 文本\n <wd-divider vertical />\n 文本\n <wd-divider vertical dashed />\n 文本\n <wd-divider vertical :hairline=\"false\" />\n 文本\n <wd-divider vertical color=\"#1989fa\" />\n 文本\n</view>\n```\n\n```css\n.content {\n padding: 12rpx 15px;\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| color | 自定义颜色，支持所有合法颜色值 | `string` | - |\n| content-position | 内容位置，可选值为 `left`、`center`、`right` | `DividerPosition` | `'center'` |\n| dashed | 是否显示为虚线 | `boolean` | `false` |\n| vertical | 是否显示为垂直分割线 | `boolean` | `false` |\n| hairline | 是否显示为 0.5px 细线 | `boolean` | `true` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| default | 分割线内容，仅在 `vertical` 为 `false` 时生效 | - |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n",
|
|
5903
5900
|
"props": [
|
|
5904
5901
|
{
|
|
@@ -5979,7 +5976,7 @@
|
|
|
5979
5976
|
},
|
|
5980
5977
|
{
|
|
5981
5978
|
"name": "--wot-divider-size-line-height",
|
|
5982
|
-
"defaultValue": "$typography-body-line
|
|
5979
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
5983
5980
|
"description": "内容文字行高"
|
|
5984
5981
|
},
|
|
5985
5982
|
{
|
|
@@ -6085,7 +6082,7 @@
|
|
|
6085
6082
|
"category": "未分类",
|
|
6086
6083
|
"description": "向下或向上弹出的菜单列表。",
|
|
6087
6084
|
"descriptionZh": "向下或向上弹出的菜单列表。",
|
|
6088
|
-
"since": "2.0.
|
|
6085
|
+
"since": "2.0.4",
|
|
6089
6086
|
"doc": "# DropMenu 下拉菜单\n\n向下或向上弹出的菜单列表。\n\n## 组件类型\n\n### 基础用法\n\n基础用法需要绑定 `v-model` 和 `options`。\n\n`options` 为对象数组，默认结构为 `{ label, value, tip }`。\n\n因为 `uni-app` 组件无法直接监听组件外部点击，为了在点击页面其他区域时自动关闭下拉菜单，建议结合 `useQueue` 在页面根节点监听点击冒泡并调用 `closeOutside`。\n\n:::warning 提示\n如果存在点击外部按钮手动打开 `drop-menu` 的场景，需要在该按钮上添加 `@click.stop`，避免触发 `closeOutside` 后立即关闭。\n:::\n\n```html\n<view @click=\"closeOutside\">\n <wd-drop-menu>\n <wd-drop-menu-item v-model=\"value1\" :options=\"option1\" @change=\"handleChange1\" />\n <wd-drop-menu-item v-model=\"value2\" :options=\"option2\" @change=\"handleChange2\" />\n </wd-drop-menu>\n</view>\n```\n\n```ts\nimport { ref } from 'vue'\nimport { useQueue } from '@/uni_modules/wot-ui'\n\nconst { closeOutside } = useQueue()\nconst value1 = ref(0)\nconst value2 = ref(0)\n\nconst option1 = ref([\n { label: '全部商品', value: 0 },\n { label: '新款商品', value: 1 },\n { label: '活动商品', value: 2 }\n])\nconst option2 = ref([\n { label: '综合', value: 0 },\n { label: '销量', value: 1 },\n { label: '上架时间', value: 2 }\n])\n\nconst handleChange1 = ({ value }: { value: string | number }) => {\n console.log(value)\n}\nconst handleChange2 = ({ value }: { value: string | number }) => {\n console.log(value)\n}\n```\n\n## 组件状态\n\n### 禁用菜单\n\n通过 `disabled` 禁用菜单项。\n\n```html\n<wd-drop-menu>\n <wd-drop-menu-item v-model=\"value1\" disabled :options=\"option1\" />\n <wd-drop-menu-item v-model=\"value2\" :options=\"option2\" />\n</wd-drop-menu>\n```\n\n## 组件变体\n\n### 向上展开\n\n将 `direction` 设为 `up` 可使菜单向上展开。\n\n```html\n<wd-drop-menu direction=\"up\">\n <wd-drop-menu-item v-model=\"value1\" :options=\"option1\" />\n <wd-drop-menu-item v-model=\"value2\" :options=\"option2\" />\n</wd-drop-menu>\n```\n\n### 异步打开/关闭\n\n`before-toggle` 在菜单打开/关闭前触发，接收 `{ status }`，支持返回 `boolean` 或 `Promise<boolean>`。\n\n:::warning 提示\n`before-toggle` 仅作用于当前 `wd-drop-menu-item`，不能阻止其他菜单项的开关行为。\n:::\n\n```html\n<wd-dialog />\n<wd-drop-menu>\n <wd-drop-menu-item v-model=\"value\" :options=\"option\" :before-toggle=\"handleBeforeToggle\" />\n</wd-drop-menu>\n```\n\n```ts\nimport { ref } from 'vue'\nimport { useDialog } from '@/uni_modules/wot-ui'\nimport type { DropMenuItemBeforeToggle } from '@/uni_modules/wot-ui/components/wd-drop-menu-item/types'\n\nconst dialog = useDialog()\nconst value = ref(0)\nconst option = ref([\n { label: '全部商品', value: 0 },\n { label: '新款商品', value: 1, tip: '这是补充信息' },\n { label: '长筛选项', value: 2 }\n])\n\nconst handleBeforeToggle: DropMenuItemBeforeToggle = ({ status }) => {\n return new Promise<boolean>((resolve) => {\n dialog\n .confirm({\n title: status ? '异步打开' : '异步关闭',\n msg: status ? '确定要打开下拉菜单吗' : '确定要关闭下拉菜单吗'\n })\n .then(() => resolve(true))\n .catch(() => resolve(false))\n })\n}\n```\n\n## 组件样式\n\n### 自定义菜单选项\n\n可以结合布局组件实现筛选栏联动展示。\n\n```html\n<view style=\"display: flex; background: #fff; text-align: center\">\n <wd-drop-menu style=\"flex: 1; min-width: 0\">\n <wd-drop-menu-item v-model=\"value1\" :options=\"option1\" />\n </wd-drop-menu>\n <view style=\"flex: 1\">\n <wd-sort-button v-model=\"value2\" title=\"上架时间\" />\n </view>\n</view>\n```\n\n### 自定义菜单图标\n\n可通过 `icon` 设置右侧图标，通过 `icon-size` 设置图标尺寸。\n\n```html\n<wd-drop-menu>\n <wd-drop-menu-item title=\"地图\" icon=\"location\" icon-size=\"14px\" />\n</wd-drop-menu>\n```\n\n## 特殊样式\n\n### 自定义菜单内容\n\n通过默认插槽自定义菜单内容；自定义内容场景下，通常通过实例方法 `close` 手动关闭菜单。\n\n```html\n<wd-drop-menu>\n <wd-drop-menu-item v-model=\"value\" :options=\"option\" />\n <wd-drop-menu-item ref=\"dropMenu\" title=\"筛选\" @opened=\"handleOpened\">\n <view>\n <wd-slider v-model=\"sliderValue\" ref=\"slider\" />\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <wd-cell title=\"标题文字\" label=\"描述信息\" value=\"内容\" />\n <view style=\"padding: 0 10px 20px; box-sizing: border-box\">\n <wd-button block size=\"large\" @click=\"confirm\">主要按钮</wd-button>\n </view>\n </view>\n </wd-drop-menu-item>\n</wd-drop-menu>\n```\n\n```ts\nimport { ref } from 'vue'\nimport type { SliderInstance } from '@/uni_modules/wot-ui/components/wd-slider/types'\nimport type { DropMenuItemInstance } from '@/uni_modules/wot-ui/components/wd-drop-menu-item/types'\n\nconst dropMenu = ref<DropMenuItemInstance>()\nconst slider = ref<SliderInstance>()\nconst sliderValue = ref(30)\n\nconst confirm = () => {\n dropMenu.value?.close()\n}\n\nconst handleOpened = () => {\n slider.value?.initSlider()\n}\n```\n\n## DropMenu Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| z-index | 弹层层级 | `number` | `12` |\n| direction | 菜单展开方向，可选值为 `up`、`down` | `DropDirection` | `'down'` |\n| modal | 是否展示蒙层 | `boolean` | `true` |\n| close-on-click-modal | 是否点击蒙层时关闭 | `boolean` | `true` |\n| duration | 菜单展开/收起动画时长，单位 ms | `number` | `200` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## DropMenuItem Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model / modelValue | 当前选中值 | `string \\| number` | - |\n| disabled | 是否禁用菜单 | `boolean` | `false` |\n| options | 菜单选项列表，默认结构为 `{ label, value, tip }` | `Array<Record<string, any>>` | `[]` |\n| icon-name | 选中项图标名称 | `string` | `'check'` |\n| title | 菜单标题，设置后优先展示标题文案 | `string` | - |\n| icon | 菜单右侧图标 | `string` | `'caret-down'` |\n| icon-size | 菜单图标尺寸 | `string \\| number` | - |\n| before-toggle | 菜单开关前拦截函数，接收 `{ status }`，返回 `boolean` 或 `Promise<boolean>` | `DropMenuItemBeforeToggle` | - |\n| value-key | 选项值字段名 | `string` | `'value'` |\n| label-key | 选项文本字段名 | `string` | `'label'` |\n| tip-key | 选项说明字段名 | `string` | `'tip'` |\n| custom-popup-class | 自定义下拉 popup 样式类 | `string` | `''` |\n| custom-popup-style | 自定义下拉 popup 样式 | `string` | `''` |\n| popup-height | popup 高度，未设置时默认最大高度为 80% | `string` | `''` |\n| root-portal | 是否脱离页面文档流渲染，用于解决 fixed 失效问题 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## DropMenuItem Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 选中值变化时触发 | `{ value, selectedItem }` |\n| open | 菜单开始展开时触发 | - |\n| opened | 菜单展开完成时触发 | - |\n| close | 菜单开始关闭时触发 | - |\n| closed | 菜单关闭完成时触发 | - |\n\n## DropMenuItem Methods\n\n通过 `ref` 可获取实例并调用以下方法：\n\n| 方法名称 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| getShowPop | 获取当前菜单是否展开 | - | boolean |\n| open | 打开菜单 | - | void |\n| close | 关闭菜单 | - | void |\n| toggle | 切换菜单开关 | - | void |\n\n## DropMenu Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| default | 菜单项容器插槽 | - |\n\n## DropMenuItem Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义菜单内容 | - |\n\n",
|
|
6090
6087
|
"props": [
|
|
6091
6088
|
{
|
|
@@ -6222,7 +6219,7 @@
|
|
|
6222
6219
|
},
|
|
6223
6220
|
{
|
|
6224
6221
|
"name": "--wot-drop-menu-text-line-height",
|
|
6225
|
-
"defaultValue": "$typography-body-line
|
|
6222
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
6226
6223
|
"description": "菜单文字行高"
|
|
6227
6224
|
},
|
|
6228
6225
|
{
|
|
@@ -6288,7 +6285,7 @@
|
|
|
6288
6285
|
"category": "未分类",
|
|
6289
6286
|
"description": "一般用于兜底占位展示。",
|
|
6290
6287
|
"descriptionZh": "一般用于兜底占位展示。",
|
|
6291
|
-
"since": "2.0.
|
|
6288
|
+
"since": "2.0.4",
|
|
6292
6289
|
"doc": "# Empty 缺省提示\n\n一般用于兜底占位展示。\n\n## 内容形态\n\n设置 `icon` 修改展示缺省图标或图片，默认为 `empty`。支持内置的常见图标名如 `no-result`、`no-wifi`、`no-content`、`no-collection`、`no-comment`、`failpayment`、`no-message`。可设置 `tip` 来控制展示提示文案。\n\n```html\n<wd-empty icon=\"no-result\" tip=\"当前搜索无结果\" />\n<wd-empty icon=\"no-wifi\" tip=\"当前网络不可用，请检查你的网络设置\" />\n<wd-empty icon=\"no-content\" tip=\"暂无内容\" />\n<wd-empty icon=\"no-collection\" tip=\"暂无收藏\" />\n<wd-empty icon=\"no-comment\" tip=\"暂无评论\" />\n<wd-empty icon=\"failpayment\" tip=\"支付失败，请重新订购\" />\n<wd-empty icon=\"no-message\" tip=\"已订阅全部消息\" />\n```\n\n## 组件样式\n\n### 自定义大小\n\n通过 `icon-size` 属性自定义图标或图片的大小，默认单位为 `px`。\n\n```html\n<wd-empty :icon-size=\"140\" icon=\"no-result\" tip=\"当前搜索无结果\" />\n```\n\n## 特殊样式\n\n### 自定义图片\n\n需要自定义外部图片时，可以直接在 `icon` 属性中传入完整的图片 URL。\n\n```html\n<wd-empty icon=\"https://wot-ui.cn/assets/panda.jpg\" tip=\"查看我的头像\" />\n```\n\n### 自定义图片内容\n\n使用 `image` 插槽可以完全自定义图标或图片位置的渲染内容。\n\n```html\n<wd-empty tip=\"自定义图片内容\">\n <template #image>\n <wd-icon name=\"sun-fill\" size=\"100px\"></wd-icon>\n </template>\n</wd-empty>\n```\n\n### 自定义底部内容\n\n使用 `bottom` 插槽可以在提示文本底部渲染自定义内容（如操作交互按钮）。建议在插槽内部包裹一层容器以便于控制与上方内容的间距。\n\n```html\n<wd-empty icon=\"no-content\" tip=\"当前搜索无结果\">\n <template #bottom>\n <view class=\"bottom-actions\">\n <wd-button type=\"info\">重新加载</wd-button>\n </view>\n </template>\n</wd-empty>\n```\n\n建议样式（可在页面或全局样式中添加）：\n\n```css\n.bottom-actions {\n margin-top: 20px;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| icon | 缺省图标名称或图片 URL | string | `empty` |\n| icon-size | 图标或图片大小，默认单位为 px | string / number | - |\n| tip | 提示文案 | string | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| image | 自定义图片区域内容 |\n| bottom | 自定义底部内容 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n| custom-style | 根节点样式 |",
|
|
6293
6290
|
"props": [
|
|
6294
6291
|
{
|
|
@@ -6334,7 +6331,7 @@
|
|
|
6334
6331
|
},
|
|
6335
6332
|
{
|
|
6336
6333
|
"name": "--wot-empty-text-line-height",
|
|
6337
|
-
"defaultValue": "$typography-body-line
|
|
6334
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
6338
6335
|
"description": "文案行高"
|
|
6339
6336
|
},
|
|
6340
6337
|
{
|
|
@@ -6397,7 +6394,7 @@
|
|
|
6397
6394
|
"category": "未分类",
|
|
6398
6395
|
"description": "悬浮动作按钮组件，按下可显示一组动作按钮。",
|
|
6399
6396
|
"descriptionZh": "悬浮动作按钮组件，按下可显示一组动作按钮。",
|
|
6400
|
-
"since": "2.0.
|
|
6397
|
+
"since": "2.0.4",
|
|
6401
6398
|
"doc": "# Fab 悬浮按钮\n\n悬浮动作按钮组件，按下可显示一组动作按钮。\n\n:::warning\n因为 `uni-app` 组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 `fab` ，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。\n\n如果存在用户手动点击 `fab` 以外某个地方如按钮滑出 `fab` 的场景，则需要在点击的元素（在这里是按钮）加上 `@click.stop=\"\"` 阻止事件冒泡到根元素上，避免触发 `closeOutside` 把要手动打开的 `fab` 关闭了。\n:::\n\n## 组件类型\n\n### 基本用法\n\n通过 `type` 设置悬浮按钮触发器的类型，`disabled` 设置悬浮按钮是否禁用。\n\n::: code-group\n```html [vue/html]\n<wd-fab :type=\"type\">\n <wd-button @click=\"showToast('一键三连')\" custom-class=\"custom-button\" type=\"primary\" round>\n <wd-icon name=\"github-filled\" size=\"22px\"></wd-icon>\n </wd-button>\n <wd-button @click=\"showToast('我要收藏')\" custom-class=\"custom-button\" type=\"success\" round>\n <wd-icon name=\"star\" size=\"22px\"></wd-icon>\n </wd-button>\n <wd-button @click=\"showToast('我要投币')\" custom-class=\"custom-button\" type=\"danger\" round>\n <wd-icon name=\"money-circle\" size=\"22px\"></wd-icon>\n </wd-button>\n <wd-button @click=\"showToast('我要点赞')\" custom-class=\"custom-button\" type=\"warning\" round>\n <wd-icon name=\"thumb-up\" size=\"22px\"></wd-icon>\n </wd-button>\n</wd-fab>\n```\n```ts [typescript]\nimport { ref } from 'vue'\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { FabType } from '@/uni_modules/wot-ui/components/wd-fab/types'\n\nconst { show: showToast } = useToast()\nconst type = ref<FabType>('primary')\n```\n```scss [scss]\n:deep(.custom-button) {\n min-width: auto !important;\n box-sizing: border-box;\n width: 32px !important;\n height: 32px !important;\n border-radius: 16px !important;\n margin: 8rpx;\n}\n```\n:::\n\n## 组件变体\n\n### 位置与方向\n\n通过 `position` 设置悬浮按钮触发器的位置，`direction` 设置动作按钮的打开方向。\n\n::: code-group\n```html [vue/html]\n<wd-fab :position=\"position\" :direction=\"direction\">\n <wd-button @click=\"showToast('一键三连')\" custom-class=\"custom-button\" type=\"primary\" round>\n <wd-icon name=\"github-filled\" size=\"22px\"></wd-icon>\n </wd-button>\n <wd-button @click=\"showToast('我要收藏')\" custom-class=\"custom-button\" type=\"success\" round>\n <wd-icon name=\"star\" size=\"22px\"></wd-icon>\n </wd-button>\n</wd-fab>\n```\n```ts [typescript]\nimport { ref } from 'vue'\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { FabPosition, FabDirection } from '@/uni_modules/wot-ui/components/wd-fab/types'\n\nconst { show: showToast } = useToast()\nconst position = ref<FabPosition>('left-bottom')\nconst direction = ref<FabDirection>('top')\n```\n:::\n\n## 组件状态\n\n### 动作菜单展开/收起\n\n通过 `v-model:active` 控制动作按钮菜单的展开/收起。\n\n::: code-group\n```html [vue/html]\n<wd-button @click=\"active = !active\">切换展示</wd-button>\n<wd-fab v-model:active=\"active\"></wd-fab>\n```\n```ts [typescript]\nimport { ref } from 'vue'\n\nconst active = ref<boolean>(false)\n```\n:::\n\n### 可拖动按钮\n\n设置 `draggable` 属性为 `true` 开启按钮拖动能力。\n\n::: code-group\n```html [vue/html]\n<wd-fab :draggable=\"true\"></wd-fab>\n```\n:::\n\n:::warning\n开启拖动后 `direction` 属性将失效，会根据拖动后的位置自动计算弹出方向。拖动完成后按钮将会自动吸边。\n:::\n\n## 特殊样式\n\n### 自定义触发器\n\n通过 `trigger` 插槽自定义触发器，`expandable` 控制点击触发器是否触发默认内部的展开/收起能力。\n\n::: code-group\n```html [vue/html]\n<wd-fab position=\"left-bottom\" :expandable=\"false\">\n <template #trigger=\"{ disabled }\">\n <wd-button @click=\"handleClick\" icon=\"share\" type=\"danger\" :disabled=\"disabled\">分享给朋友</wd-button>\n </template>\n</wd-fab>\n```\n```ts [typescript]\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst { show: showToast } = useToast()\n\nconst handleClick = () => {\n showToast('分享给朋友')\n}\n```\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model:active | 是否激活 | `boolean` | `false` |\n| type | 悬浮按钮类型，可选值为 `primary`、`success`、`info`、`warning`、`danger` | `FabType` | `'primary'` |\n| position | 悬浮按钮位置，可选值为 `left-top`、`right-top`、`left-bottom`、`right-bottom`、`left-center`、`right-center`、`top-center`、`bottom-center` | `FabPosition` | `'right-bottom'` |\n| draggable | 按钮能否拖动 | `boolean` | `false` |\n| direction | 悬浮按钮菜单弹出方向，可选值为 `top`、`right`、`bottom`、`left` | `FabDirection` | `'top'` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| inactive-icon | 悬浮按钮未展开时的图标 | `string` | `'plus'` |\n| active-icon | 悬浮按钮展开时的图标 | `string` | `'close'` |\n| z-index | 自定义悬浮按钮层级 | `number` | `99` |\n| gap | 自定义悬浮按钮与可视区域边缘的间距 | `FabGap` | `{ top: 16, right: 16, bottom: 16, left: 16 }` |\n| expandable | 用于控制点击时是否展开菜单，设置为 `false` 时触发 `click` 事件 | `boolean` | `true` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n### FabGap\n\n| 参数 | 说明 | 类型 |\n| --- | --- | --- |\n| top | 距离顶部间距 | number |\n| bottom | 距离底部间距 | number |\n| left | 距离左边间距 | number |\n| right | 距离右边间距 | number |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | `expandable` 设置为 `false` 时，点击悬浮组件内部但不触发内部逻辑时则抛出版事件 | - |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 展开菜单 | - |\n| close | 收起菜单 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 动作按钮区域内容 |\n| trigger | 触发器插槽，用于完全自定义点击触发锚点区域 |\n",
|
|
6402
6399
|
"props": [
|
|
6403
6400
|
{
|
|
@@ -6544,7 +6541,7 @@
|
|
|
6544
6541
|
"category": "未分类",
|
|
6545
6542
|
"description": "浮动在页面底部的面板，用户可以通过上下拖动秒板来浏览内容，从而在不离开当前视图的情况下访问更多信息，常用于地图导航。",
|
|
6546
6543
|
"descriptionZh": "浮动在页面底部的面板，用户可以通过上下拖动秒板来浏览内容，从而在不离开当前视图的情况下访问更多信息，常用于地图导航。",
|
|
6547
|
-
"since": "2.0.
|
|
6544
|
+
"since": "2.0.4",
|
|
6548
6545
|
"doc": "# FloatingPanel 浮动面板\n\n浮动在页面底部的面板，用户可以通过上下拖动秒板来浏览内容，从而在不离开当前视图的情况下访问更多信息，常用于地图导航。\n\n## 组件类型\n\n### 基础用法\n\nFloatingPanel 的初始高度会取 `anchors[0]` 的值，也就是 `100px`，用户可以拖动来展开面板，使高度达到 `60%` 的屏幕高度。\n\n::: code-group\n```html [vue/html]\n<wd-floating-panel>\n <wd-cell-group border>\n <wd-cell v-for=\"item in data\" :key=\"item\" :title=\"item\" />\n </wd-cell-group>\n</wd-floating-panel>\n```\n```ts [typescript]\nimport { ref } from 'vue'\n\nconst data = ref<string[]>(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])\n```\n:::\n\n## 组件变体\n\n### 自定义锚点\n\n你可以通过 `anchors` 属性来设置 <b>FloatingPanel</b> 的锚点位置，并通过 `v-model:height` 来控制当前面板的显示高度。\n\n比如，使面板的高度在 `100px`、`40%` 屏幕高度和 `70%` 屏幕高度三个位置停靠：\n\n::: code-group\n```html [vue/html]\n<wd-floating-panel v-model:height=\"height\" :anchors=\"anchors\" @heightChange=\"handleHeightChange\">\n <view class=\"inner-content\">自定义锚点 {{ anchors }} - {{ height.toFixed(0) }}</view>\n</wd-floating-panel>\n```\n```ts [typescript]\nimport { ref } from 'vue'\nimport { onLoad } from '@dcloudio/uni-app'\n\nconst height = ref<number>(0)\nconst windowHeight = ref<number>(0)\nconst anchors = ref<number[]>([])\n\nconst handleHeightChange = ({ height }: { height: number }) => {\n console.log(height)\n}\n\nonLoad(() => {\n windowHeight.value = uni.getSystemInfoSync().windowHeight\n anchors.value = [100, Math.round(0.4 * windowHeight.value), Math.round(0.7 * windowHeight.value)]\n height.value = anchors.value[1]\n})\n```\n```css [css]\n.inner-content {\n padding: 1rem;\n text-align: center;\n font-size: 16px;\n font-weight: bold;\n}\n```\n:::\n\n## 组件状态\n\n### 仅头部拖拽\n\n默认情况下，<b>FloatingPanel</b> 的头部区域和内容区域都可以被拖拽，你可以通过 `contentDraggable` 属性来禁用内容区域的拖拽。\n\n::: code-group\n```html [vue/html]\n<wd-floating-panel :content-draggable=\"false\">\n <view class=\"inner-content\">内容区不可以拖拽</view>\n</wd-floating-panel>\n```\n```css [css]\n.inner-content {\n padding: 1rem;\n text-align: center;\n font-size: 16px;\n font-weight: bold;\n}\n```\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model:height | 当前面板的显示高度 | `number` | `0` |\n| anchors | 设置自定义锚点, 单位 `px` | `number[]` | `[100, windowHeight * 0.6]` |\n| duration | 动画时长，单位 `ms`，设置为 `0` 可以禁用动画 | `number` | `300` |\n| content-draggable | 允许拖拽内容容器 | `boolean` | `true` |\n| safe-area-inset-bottom | 是否开启底部安全区适配 | `boolean` | `false` |\n| show-scrollbar | 是否开启滚动条 | `boolean` | `true` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Slots\n\n| 名称 | 说明 |\n| ---- | -------- |\n| default | 默认内容区域插槽 |\n\n## Events\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| heightChange | 面板显示高度改变且结束拖动后触发 | `{ height: number }` |\n",
|
|
6549
6546
|
"props": [
|
|
6550
6547
|
{
|
|
@@ -6665,8 +6662,8 @@
|
|
|
6665
6662
|
"category": "未分类",
|
|
6666
6663
|
"description": "用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。",
|
|
6667
6664
|
"descriptionZh": "用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。",
|
|
6668
|
-
"since": "2.0.
|
|
6669
|
-
"doc": "# Form 表单 \n\n用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。\n\n表单采用 `wd-form` 和 `wd-form-item` 的结构。`wd-form-item` 内部继承了 `wd-cell` 的布局能力，负责展示标题描述和承载校验提示。各种输入组件（如 `Input`、`Textarea`、`Picker`、`Switch`、`Upload` 等）只需直接放入 `wd-form-item` 的默认插槽中即可。\n\n结合 `wd-form` 组件，可以实现对内部组件的规则校验。如果需要让表单项之间有清晰的边框线分隔，你可以直接在 `wd-form` 上开启 `border` 属性。\n\n## 校验引擎说明\n\n表单组件默认采用接口式校验方案，你可以根据 `FormSchema` 的结构自己编写校验逻辑，详见后文的[自定义校验引擎](#自定义校验引擎)。\n\n同时，我们推荐使用 [Zod](https://zod.dev/) 作为表单校验引擎。Zod 是一个以 TypeScript 为首的模式声明和验证库，你可以非常方便地通过 `z.object()` 等声明组合来构建你的表单验证规则。\n\n### Zod 安装\n\n~~内置了嫌组件库大，不内置又说安装麻烦，真想吊起来这种人来打。~~\n\n出于组件库体积的考虑，我们不内置 Zod，所以在使用 Zod 前，你需要先将其安装到你的项目中：\n\n::: code-group\n\n```bash [npm]\nnpm install zod\n```\n\n```bash [yarn]\nyarn add zod\n```\n\n```bash [pnpm]\npnpm add zod\n```\n\n:::\n\n### 结合 zodAdapter 使用\n\n组件库内置了 `zodAdapter` 适配器，你可以直接通过它将 `Zod` 的 schema 转化为组件能够识别的校验规则：\n\n```ts\nimport { z } from 'zod'\nimport { zodAdapter } from '@/uni_modules/wot-ui'\n\n// 通过 zodAdapter 转换 zod 的模式对象\nconst schema = zodAdapter(\n z.object({\n username: z.string().min(1, '请填写用户名'),\n password: z.string().min(6, '密码至少为6位')\n })\n)\n```\n\n## 自定义校验引擎\n\n如果你不想使用 Zod，你也可以直接编写一个符合 `FormSchema` 结构的校验对象，实现自定义的表单校验引擎。\n\n自定义校验引擎需要提供 `validate` 函数，其接收整个表单数据 `model`，并返回（或异步返回）包含 `path` 和 `message` 字段的错误问题数组。\n如果需要控制必填星号（`*`）的显示，你还可以提供 `isRequired` 方法：\n\n```ts\nimport type { FormSchema } from '@/uni_modules/wot-ui/components/wd-form/types'\n\nconst customSchema: FormSchema = {\n // 校验逻辑\n validate(formModel) {\n const issues = []\n if (!formModel.username) {\n issues.push({ path: ['username'], message: '请填写用户名' })\n }\n if (!formModel.password || formModel.password.length < 6) {\n issues.push({ path: ['password'], message: '密码至少为6位' })\n }\n return issues\n },\n // 用于推导必填星号\n isRequired(path: string) {\n return path === 'username' || path === 'password'\n }\n}\n```\n\n## 组件类型\n\n### 基础用法\n\n在表单中，使用 `model` 指定表单数据对象，每个 `表单项组件` 代表一个表单项，使用 `prop` 指定表单项字段，使用 `schema` 属性定义校验规则。\n\n::: details 查看基础用法示例\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"schema\" :title-width=\"100\">\n <wd-form-item title=\"歪比巴卜\" prop=\"value1\">\n <wd-input type=\"text\" v-model=\"model.value1\" placeholder=\"请输入歪比巴卜\" />\n </wd-form-item>\n\n <wd-form-item title=\"沙卡拉卡\" prop=\"value2\">\n <wd-input type=\"text\" v-model=\"model.value2\" placeholder=\"请输入沙卡拉卡\" />\n </wd-form-item>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n </view>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { reactive, ref } from 'vue'\nimport { z } from 'zod'\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance } from '@/uni_modules/wot-ui/components/wd-form/types'\n\nconst { success: showSuccess } = useToast()\n\nconst model = reactive<{\n value1: string\n value2: string\n}>({\n value1: '',\n value2: ''\n})\n\nconst form = ref<FormInstance>()\nconst schema = zodAdapter(\n z\n .object({\n value1: z.string().min(1, '请输入歪比巴卜'),\n value2: z.string().min(1, '请输入沙卡拉卡')\n })\n .superRefine((data, ctx) => {\n if (data.value1 === data.value2) return\n const message = '两个输入框的内容必须一致'\n ctx.addIssue({ code: 'custom', message, path: ['value1'] })\n ctx.addIssue({ code: 'custom', message, path: ['value2'] })\n })\n)\n\nfunction handleSubmit() {\n form.value\n ?.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 16px;\n}\n```\n\n:::\n\n## 组件配置\n\n### 校验错误提示方式\n\n1. `message`：默认为输入框下方用文字进行提示\n2. `toast`：以\"toast\"提示的方式弹出错误信息，每次只弹出最前面的那个表单域的错误信息\n3. `none`：不会进行任何提示\n\n::: details 错误提示方式\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"activeSchema\" :error-type=\"errorType\" :title-width=\"100\" border>\n <wd-cell-group custom-class=\"group\" title=\"配置切换\">\n <wd-form-item title=\"校验引擎\" value-align=\"left\">\n <wd-switch size=\"20\" v-model=\"useZodSchema\" active-text=\"Zod\" inactive-text=\"自定义\" />\n </wd-form-item>\n <wd-form-item title=\"提示方式\" value-align=\"left\">\n <wd-radio-group v-model=\"errorType\" direction=\"horizontal\">\n <wd-radio :value=\"'toast'\">toast</wd-radio>\n <wd-radio :value=\"'message'\">message</wd-radio>\n <wd-radio :value=\"'none'\">none</wd-radio>\n </wd-radio-group>\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"表单内容\">\n <wd-form-item title=\"歪比巴卜\" prop=\"value1\">\n <wd-input clearable v-model=\"model.value1\" placeholder=\"请输入歪比巴卜\" />\n </wd-form-item>\n <wd-form-item title=\"沙卡拉卡\" prop=\"value2\">\n <wd-input show-password clearable v-model=\"model.value2\" placeholder=\"请输入沙卡拉卡\" />\n </wd-form-item>\n </wd-cell-group>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n </view>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref, watch } from 'vue'\nimport { z } from 'zod'\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance, FormSchema } from '@/uni_modules/wot-ui/components/wd-form/types'\n\nconst { success: showSuccess } = useToast()\nconst model = reactive<{\n value1: string\n value2: string\n}>({\n value1: '',\n value2: ''\n})\n\nconst useZodSchema = ref(true)\nconst errorType = ref<'toast' | 'message' | 'none'>('toast')\n\nconst customSchema: FormSchema = {\n validate(formModel) {\n const issues = []\n if (!formModel.value1) {\n issues.push({ path: ['value1'], message: '请输入歪比巴卜' })\n }\n if (!formModel.value2) {\n issues.push({ path: ['value2'], message: '请输入沙卡拉卡' })\n }\n return issues\n },\n isRequired(path: string) {\n return path === 'value1' || path === 'value2'\n }\n}\n\nconst zodSchema = zodAdapter(\n z.object({\n value1: z.string().min(1, '请输入歪比巴卜'),\n value2: z.string().min(1, '请输入沙卡拉卡')\n }),\n {\n isRequired(path: string) {\n return path === 'value1' || path === 'value2'\n }\n }\n)\n\nconst activeSchema = computed<FormSchema>(() => {\n return useZodSchema.value ? zodSchema : customSchema\n})\n\nconst form = ref<FormInstance>()\n\nwatch(\n () => errorType.value,\n () => {\n form.value?.reset()\n }\n)\n\nfunction handleSubmit() {\n form\n .value!.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 16px;\n}\n\n:deep(.group) {\n &:not(:first-child) {\n margin-top: 12px;\n }\n}\n```\n\n:::\n\n### 动态表单\n\n表单项动态增减。\n\n::: details 查看动态表单示例\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\">\n <wd-cell-group border>\n <wd-input\n label=\"用户名\"\n label-width=\"100px\"\n prop=\"name\"\n clearable\n v-model=\"model.name\"\n placeholder=\"请输入用户名\"\n :rules=\"[{ required: true, message: '请填写用户名' }]\"\n />\n <wd-input\n v-for=\"(item, index) in model.phoneNumbers\"\n :key=\"item.key\"\n :label=\"'玛卡巴卡单号' + index\"\n :prop=\"'phoneNumbers.' + index + '.value'\"\n label-width=\"100px\"\n clearable\n v-model=\"item.value\"\n placeholder=\"玛卡巴卡单号\"\n :rules=\"[{ required: true, message: '请填写玛卡巴卡单号' + index }]\"\n />\n\n <wd-cell title-width=\"0px\">\n <view class=\"footer\">\n <wd-button size=\"small\" type=\"info\" plain @click=\"addPhone\">添加</wd-button>\n <wd-button size=\"small\" type=\"info\" plain @click=\"removePhone\">删除</wd-button>\n <wd-button size=\"small\" type=\"info\" plain @click=\"reset\">重置</wd-button>\n <wd-button type=\"primary\" size=\"small\" @click=\"submit\">提交</wd-button>\n </view>\n </wd-cell>\n </wd-cell-group>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast } from '@/uni_modules/wot-ui'\nimport { reactive, ref } from 'vue'\n\ninterface PhoneItem {\n key: number\n value: string\n}\n\nconst model = reactive<{\n name: string\n phoneNumbers: PhoneItem[]\n}>({\n name: '',\n phoneNumbers: [\n {\n key: Date.now(),\n value: ''\n }\n ]\n})\n\nconst { success: showSuccess } = useToast()\nconst form = ref()\n\nconst removePhone = () => {\n model.phoneNumbers.splice(model.phoneNumbers.length - 1, 1)\n}\n\nconst addPhone = () => {\n model.phoneNumbers.push({\n key: Date.now(),\n value: ''\n })\n}\n\nconst reset = () => {\n form.value.reset()\n}\n\nconst submit = () => {\n form.value.validate().then(({ valid, errors }) => {\n if (valid) {\n showSuccess('校验通过')\n }\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n text-align: left;\n :deep(.wd-button) {\n &:not(:last-child) {\n margin-right: 12px;\n }\n }\n}\n```\n\n:::\n\n#### 校验触发时机\n\n通过配置 `validate-trigger` 可以指定校验触发时机，可选值为 `change`、`blur`、`submit`。可以在 `wd-form` 上配置全局触发时机，也可以在 `wd-form-item` 上配置覆盖全局设置。\n\n::: details 校验触发时机\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"activeSchema\" validate-trigger=\"change\" :reset-on-change=\"false\" :title-width=\"120\">\n <wd-cell-group custom-class=\"group\" title=\"配置\">\n <wd-form-item title=\"校验引擎\" value-align=\"left\">\n <wd-switch v-model=\"useZodSchema\" size=\"20\" active-text=\"Zod\" inactive-text=\"自定义\" />\n </wd-form-item>\n <wd-form-item title=\"触发说明\" value-align=\"left\">\n <text class=\"tip-text\">表单级 change，字段覆盖：blur/change/submit</text>\n </wd-form-item>\n </wd-cell-group>\n\n <wd-cell-group custom-class=\"group\" title=\"输入类字段\">\n <wd-form-item title=\"金额（change）\" prop=\"amount\">\n <wd-input-number v-model=\"model.amount\" :min=\"0\" :update-on-init=\"false\" :max=\"9999\" />\n </wd-form-item>\n <wd-form-item title=\"备注（change）\" prop=\"remark\">\n <wd-textarea v-model=\"model.remark\" placeholder=\"请输入至少 4 个字\" auto-height :maxlength=\"50\" show-word-limit />\n </wd-form-item>\n <wd-form-item title=\"账号（blur）\" prop=\"account\" validate-trigger=\"blur\">\n <wd-input v-model=\"model.account\" clearable placeholder=\"失焦后触发校验\" />\n </wd-form-item>\n <wd-form-item title=\"邀请码（change）\" prop=\"inviteCode\" validate-trigger=\"change\">\n <wd-input v-model=\"model.inviteCode\" clearable placeholder=\"值变化后触发校验\" />\n </wd-form-item>\n <wd-form-item title=\"城市（submit）\" prop=\"city\" validate-trigger=\"submit\">\n <wd-input v-model=\"model.city\" clearable placeholder=\"仅提交时触发校验\" />\n </wd-form-item>\n </wd-cell-group>\n\n <wd-cell-group custom-class=\"group\" title=\"Picker 字段（change）\">\n <wd-form-item\n title=\"推广平台\"\n prop=\"platform\"\n is-link\n :value=\"platformText\"\n placeholder=\"请选择推广平台\"\n @click=\"showPlatformPicker = true\"\n />\n <wd-form-item\n title=\"优惠方式\"\n prop=\"promotion\"\n is-link\n :value=\"promotionText\"\n placeholder=\"请选择优惠方式\"\n @click=\"showPromotionPicker = true\"\n />\n <wd-form-item title=\"时间\" prop=\"time\" is-link :value=\"timeText\" placeholder=\"请选择时间\" @click=\"showTimePicker = true\" />\n <wd-form-item title=\"日期\" prop=\"date\" is-link :value=\"dateText\" placeholder=\"请选择日期\" @click=\"showDatePicker = true\" />\n </wd-cell-group>\n\n <view class=\"footer\">\n <wd-button type=\"primary\" @click=\"handleSubmit\" block>提交并校验</wd-button>\n </view>\n</wd-form>\n\n<wd-select-picker v-model=\"model.platform\" v-model:visible=\"showPlatformPicker\" :columns=\"platformList\" placeholder=\"请选择推广平台\" />\n<wd-picker v-model=\"model.promotion\" v-model:visible=\"showPromotionPicker\" :columns=\"promotionList\" placeholder=\"请选择优惠方式\" />\n<wd-datetime-picker v-model=\"model.time\" v-model:visible=\"showTimePicker\" placeholder=\"请选择时间\" />\n<wd-calendar v-model=\"model.date\" v-model:visible=\"showDatePicker\" placeholder=\"请选择日期\" />\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance, FormSchema } from '@/uni_modules/wot-ui/components/wd-form/types'\nimport dayjs from 'dayjs'\nimport { computed, reactive, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst { success: showSuccess } = useToast()\n\nconst form = ref<FormInstance>()\nconst useZodSchema = ref(true)\nconst showPlatformPicker = ref(false)\nconst showPromotionPicker = ref(false)\nconst showTimePicker = ref(false)\nconst showDatePicker = ref(false)\n\nconst model = reactive<{\n amount: number | string\n remark: string\n account: string\n inviteCode: string\n city: string\n platform: string[]\n promotion: string[]\n time: number | string\n date: number | null\n}>({\n amount: '',\n remark: '',\n account: '',\n inviteCode: '',\n city: '',\n platform: [],\n promotion: [],\n time: '',\n date: null\n})\n\nconst requiredFields = new Set(['amount', 'remark', 'account', 'inviteCode', 'city', 'platform', 'promotion', 'time', 'date'])\n\nconst customSchema: FormSchema = {\n validate(formModel) {\n const issues = []\n if (formModel.amount === '' || Number(formModel.amount) <= 0) {\n issues.push({ path: ['amount'], message: '请输入大于 0 的金额' })\n }\n if (!formModel.remark || String(formModel.remark).trim().length < 4) {\n issues.push({ path: ['remark'], message: '备注至少输入 4 个字' })\n }\n if (!formModel.account || formModel.account.length < 3) {\n issues.push({ path: ['account'], message: '账号至少 3 位' })\n }\n if (!formModel.inviteCode) {\n issues.push({ path: ['inviteCode'], message: '请输入邀请码' })\n }\n if (!formModel.city) {\n issues.push({ path: ['city'], message: '请输入城市' })\n }\n if (!Array.isArray(formModel.platform) || !formModel.platform.length) {\n issues.push({ path: ['platform'], message: '请选择推广平台' })\n }\n if (!Array.isArray(formModel.promotion) || !formModel.promotion.length) {\n issues.push({ path: ['promotion'], message: '请选择优惠方式' })\n }\n if (!formModel.time) {\n issues.push({ path: ['time'], message: '请选择时间' })\n }\n if (!formModel.date) {\n issues.push({ path: ['date'], message: '请选择日期' })\n }\n return issues\n },\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n}\n\nconst zodSchema: FormSchema = zodAdapter(\n z.object({\n amount: z.union([z.string(), z.number()]).refine((value) => value !== '' && Number(value) > 0, '请输入大于 0 的金额'),\n remark: z.string().refine((value) => value.trim().length >= 4, '备注至少输入 4 个字'),\n account: z.string().min(3, '账号至少 3 位'),\n inviteCode: z.string().min(1, '请输入邀请码'),\n city: z.string().min(1, '请输入城市'),\n platform: z.array(z.string()).min(1, '请选择推广平台'),\n promotion: z.array(z.string()).min(1, '请选择优惠方式'),\n time: z.union([z.string(), z.number()]).refine((value) => !!value, '请选择时间'),\n date: z.union([z.number(), z.null()]).refine((value) => !!value, '请选择日期')\n }),\n {\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n }\n)\n\nconst activeSchema = computed<FormSchema>(() => {\n return useZodSchema.value ? zodSchema : customSchema\n})\n\nconst platformList = ref([\n { value: '1', label: '京东' },\n { value: '2', label: '微信' },\n { value: '3', label: '抖音' }\n])\n\nconst promotionList = ref([\n { value: '1', label: '满减' },\n { value: '2', label: '无门槛' }\n])\n\nconst platformText = computed(() => {\n if (!model.platform.length) return ''\n return model.platform\n .map((value) => {\n const item = platformList.value.find((option) => option.value === value)\n return item ? item.label : value\n })\n .join('、')\n})\n\nconst promotionText = computed(() => {\n if (!model.promotion.length) return ''\n return model.promotion\n .map((value) => {\n const item = promotionList.value.find((option) => option.value === value)\n return item ? item.label : value\n })\n .join('、')\n})\n\nconst timeText = computed(() => {\n if (!model.time) return ''\n if (typeof model.time === 'number') {\n return dayjs(model.time).format('YYYY-MM-DD HH:mm')\n }\n return model.time\n})\n\nconst dateText = computed(() => {\n if (!model.date) return ''\n return dayjs(model.date).format('YYYY-MM-DD')\n})\n\nwatch(\n () => useZodSchema.value,\n () => {\n form.value?.reset()\n }\n)\n\nfunction handleSubmit() {\n form.value?.validate().then(({ valid }) => {\n if (valid) {\n showSuccess('校验通过')\n }\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 16px;\n}\n\n.tip-text {\n color: #666;\n font-size: 14px;\n}\n\n:deep(.group) {\n &:not(:first-child) {\n margin-top: 12px;\n }\n}\n```\n\n:::\n\n## 指定字段校验\n\n`validate` 方法可以传入一个 `prop` 参数，指定校验的字段，可以实现在表单组件的`blur`、`change`等事件触发时对该字段的校验。`prop` 参数也可以是一个字段数组，指定多个字段进行校验。\n\n::: details 查看指定字段校验示例\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" errorType=\"toast\">\n <wd-cell-group border>\n <wd-input\n label=\"用户名\"\n label-width=\"100px\"\n prop=\"value1\"\n clearable\n v-model=\"model.value1\"\n placeholder=\"请输入用户名\"\n :rules=\"[{ required: true, message: '请填写用户名' }]\"\n />\n <wd-input\n label=\"密码\"\n label-width=\"100px\"\n prop=\"value2\"\n show-password\n clearable\n v-model=\"model.value2\"\n placeholder=\"请输入密码\"\n :rules=\"[{ required: true, message: '请填写密码' }]\"\n />\n </wd-cell-group>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n <wd-button type=\"primary\" size=\"large\" @click=\"handleValidate\" block>校验用户名和密码</wd-button>\n </view>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { FormInstance } from '@/uni_modules/wot-ui/components/wd-form/types'\nimport { reactive, ref } from 'vue'\n\nconst { success: showSuccess } = useToast()\nconst model = reactive<{\n value1: string\n value2: string\n}>({\n value1: '',\n value2: ''\n})\n\nconst form = ref<FormInstance>()\n\nfunction handleSubmit() {\n form\n .value!.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n\nfunction handleValidate() {\n form\n .value!.validate(['value1', 'value2'])\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 12px;\n}\n```\n\n:::\n\n### 复杂表单\n\n结合`Input 输入框`、`Textarea 输入框`、`Picker 选择器`、 `Calendar 日历选择器`、 `Cascader 级联选择器`、`SelectPicker 单复选选择器`、`Cell 单元格` 和 `DatetimePicker 日期时间选择器`实现一个复杂表单。\n\n::: details 查看复杂表单示例\n::: code-group\n\n```html [vue/html]\n<wd-select-picker\n v-model=\"model.platform\"\n v-model:visible=\"showPlatformPicker\"\n :columns=\"platformList\"\n placeholder=\"请选择推广平台\"\n/>\n<wd-picker\n v-model=\"model.promotion\"\n v-model:visible=\"showPromotionPicker\"\n :columns=\"promotionlist\"\n placeholder=\"请选择优惠方式\"\n/>\n<wd-datetime-picker v-model=\"model.time\" v-model:visible=\"showTimePicker\" placeholder=\"请选择时间\" />\n<wd-calendar v-model=\"model.date\" v-model:visible=\"showDatePicker\" placeholder=\"请选择日期\" />\n<wd-cascader\n v-model=\"model.address\"\n v-model:visible=\"showAddressPicker\"\n placeholder=\"请选择地址\"\n :options=\"area\"\n @confirm=\"handleAddressConfirm\"\n/>\n<wd-dialog />\n<wd-form ref=\"form\" :model=\"model\" :schema=\"activeSchema\" :title-width=\"100\" :layout=\"formItemLayout\" border asterisk-position=\"end\">\n <wd-cell-group custom-class=\"group\" title=\"布局切换示例\">\n <wd-form-item title=\"表单项布局\" value-align=\"left\">\n <wd-switch size=\"20\" v-model=\"isVerticalLayout\" />\n <text class=\"layout-tip\">{{ isVerticalLayout ? '上下布局' : '左右布局' }}</text>\n </wd-form-item>\n <wd-form-item title=\"校验引擎\" value-align=\"left\">\n <wd-switch size=\"20\" v-model=\"useZodSchema\" active-text=\"Zod\" inactive-text=\"自定义\" />\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"基础信息\">\n <wd-form-item title=\"优惠券名称\" prop=\"couponName\" required>\n <wd-input\n :maxlength=\"20\"\n show-word-limit\n suffix-icon=\"question-circle\"\n v-model=\"model.couponName\"\n placeholder=\"请输入优惠券名称\"\n @clicksuffixicon=\"handleIconClick\"\n compact\n />\n </wd-form-item>\n <wd-form-item\n ellipsis\n title=\"推广平台\"\n prop=\"platform\"\n is-link\n :value=\"platformText\"\n placeholder=\"请选择推广平台\"\n @click=\"showPlatformPicker = true\"\n />\n <wd-form-item\n title=\"优惠方式\"\n prop=\"promotion\"\n is-link\n :value=\"promotionText\"\n placeholder=\"请选择优惠方式\"\n @click=\"showPromotionPicker = true\"\n />\n <wd-form-item prop=\"threshold\" title=\"券面额\" required title-width=\"100px\" custom-value-class=\"cell-left\">\n <view style=\"text-align: left\">\n <view class=\"inline-txt\" style=\"margin-left: 0\">满</view>\n <wd-input\n compact\n custom-style=\"display: inline-block; width: 70px; vertical-align: middle\"\n placeholder=\"请输入金额\"\n v-model=\"model.threshold\"\n />\n <view class=\"inline-txt\">减</view>\n <wd-input\n compact\n custom-style=\"display: inline-block; width: 70px; vertical-align: middle\"\n placeholder=\"请输入金额\"\n v-model=\"model.price\"\n />\n </view>\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"时间和地址\">\n <wd-form-item\n title=\"时间\"\n prop=\"time\"\n is-link\n :value=\"timeText\"\n placeholder=\"请选择时间\"\n @click=\"showTimePicker = true\"\n />\n <wd-form-item\n title=\"日期\"\n prop=\"date\"\n is-link\n :value=\"dateText\"\n placeholder=\"请选择日期\"\n @click=\"showDatePicker = true\"\n />\n <wd-form-item\n title=\"地区\"\n prop=\"address\"\n is-link\n :value=\"addressText\"\n placeholder=\"请选择地区\"\n @click=\"showAddressPicker = true\"\n />\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"其他信息\">\n <wd-form-item title=\"活动细则\" prop=\"content\">\n <wd-textarea\n type=\"textarea\"\n v-model=\"model.content\"\n :maxlength=\"300\"\n show-word-limit\n placeholder=\"请输入活动细则信息\"\n clearable\n auto-height\n compact\n />\n </wd-form-item>\n <wd-form-item title=\"发货数量\" title-width=\"100px\" prop=\"count\" value-align=\"left\">\n <wd-input-number v-model=\"model.count\" />\n </wd-form-item>\n <wd-form-item title=\"开启折扣\" title-width=\"100px\" prop=\"switchVal\" value-align=\"left\" center>\n <wd-switch v-model=\"model.switchVal\" size=\"20\" />\n </wd-form-item>\n <wd-form-item v-if=\"model.switchVal\" title=\"折扣\" prop=\"discount\">\n <wd-input placeholder=\"请输入优惠金额\" clearable v-model=\"model.discount\" compact />\n </wd-form-item>\n <wd-form-item title=\"歪比巴卜\" prop=\"cardId\">\n <wd-input suffix-icon=\"camera\" placeholder=\"请输入歪比巴卜\" clearable v-model=\"model.cardId\" compact />\n </wd-form-item>\n <wd-form-item title=\"玛卡巴卡\" prop=\"phone\">\n <wd-input placeholder=\"请输入玛卡巴卡\" clearable v-model=\"model.phone\" compact />\n </wd-form-item>\n <wd-form-item title=\"活动图片\" title-width=\"100px\" prop=\"fileList\">\n <wd-upload\n :file-list=\"model.fileList\"\n action=\"https://69bd04402bc2a25b22ad0a49.mockapi.io/upload\"\n @change=\"handleFileChange\"\n ></wd-upload>\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"组合示例\">\n <wd-form-item title=\"投放优先级\" prop=\"priority\">\n <wd-radio-group v-model=\"model.priority\" direction=\"horizontal\">\n <wd-radio :value=\"1\">高</wd-radio>\n <wd-radio :value=\"2\">中</wd-radio>\n <wd-radio :value=\"3\">低</wd-radio>\n </wd-radio-group>\n </wd-form-item>\n <wd-form-item title=\"投放标签\" prop=\"tags\">\n <wd-checkbox-group v-model=\"model.tags\" direction=\"horizontal\">\n <wd-checkbox :name=\"1\">新品</wd-checkbox>\n <wd-checkbox :name=\"2\">爆款</wd-checkbox>\n <wd-checkbox :name=\"3\">清仓</wd-checkbox>\n </wd-checkbox-group>\n </wd-form-item>\n <wd-form-item title=\"活动评分\" prop=\"rate\">\n <wd-rate v-model=\"model.rate\" allow-half clearable />\n </wd-form-item>\n <wd-form-item title=\"预算强度\" prop=\"budget\">\n <wd-slider ref=\"sliderRef\" v-model=\"model.budget\" show-extreme-value />\n </wd-form-item>\n <wd-form-item title=\"滑块验证\" prop=\"verified\">\n <wd-slide-verify ref=\"slideVerifyRef\" @success=\"handleVerifySuccess\" @fail=\"handleVerifyFail\" />\n </wd-form-item>\n </wd-cell-group>\n <view class=\"tip\">\n <wd-form-item prop=\"read\" title-width=\"0px\" :border=\"false\">\n <wd-checkbox v-model=\"model.read\">\n 已阅读并同意\n <text style=\"color: #4d80f0\">《巴拉巴拉吧啦协议》</text>\n </wd-checkbox>\n </wd-form-item>\n </view>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n </view>\n</wd-form>\n```\n\n```ts [typescript]\n<script lang=\"ts\" setup>\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport { isArray } from '@/uni_modules/wot-ui/common/util'\nimport { useCascaderAreaData } from '@vant/area-data'\nimport { type FormInstance, type FormSchema, type FormSchemaIssue } from '@/uni_modules/wot-ui/components/wd-form/types'\nimport type { SliderInstance } from '@/uni_modules/wot-ui/components/wd-slider/types'\nimport type { SlideVerifyInstance } from '@/uni_modules/wot-ui/components/wd-slide-verify/types'\nimport type { UploadFileItem } from '@/uni_modules/wot-ui/components/wd-upload/types'\nimport type { CascaderOption } from '@/uni_modules/wot-ui/components/wd-cascader/types'\n\nimport dayjs from 'dayjs'\nimport { computed, nextTick, reactive, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst showPlatformPicker = ref(false)\nconst showPromotionPicker = ref(false)\nconst showTimePicker = ref(false)\nconst showDatePicker = ref(false)\nconst showAddressPicker = ref(false)\nconst addressText = ref('')\nconst isVerticalLayout = ref(false)\nconst useZodSchema = ref(true)\nconst formItemLayout = computed(() => (isVerticalLayout.value ? 'vertical' : 'horizontal'))\nconst sliderRef = ref<SliderInstance>()\nconst slideVerifyRef = ref<SlideVerifyInstance>()\n\nconst model = reactive<{\n couponName: string\n platform: any[]\n promotion: any[]\n threshold: string\n price: string\n time: number | string\n date: null | number\n address: string\n count: number\n content: string\n switchVal: boolean\n cardId: string\n phone: string\n read: boolean\n fileList: UploadFileItem[]\n discount: number\n priority: number\n tags: number[]\n rate: number\n budget: number\n verified: boolean\n}>({\n couponName: '',\n platform: [],\n promotion: [],\n threshold: '',\n price: '',\n date: null,\n time: '',\n address: '',\n count: 1,\n content: '',\n switchVal: true,\n cardId: '',\n phone: '',\n read: false,\n fileList: [],\n discount: 1,\n priority: 2,\n tags: [],\n rate: 3.5,\n budget: 35,\n verified: false\n})\n\nconst requiredFields = new Set([\n 'couponName',\n 'content',\n 'threshold',\n 'platform',\n 'promotion',\n 'time',\n 'date',\n 'address',\n 'count',\n 'cardId',\n 'phone',\n 'fileList',\n 'discount',\n 'priority',\n 'tags',\n 'rate',\n 'budget',\n 'verified'\n])\n\nconst customSchema: FormSchema = {\n async validate(formModel) {\n const issues: FormSchemaIssue[] = []\n const pushIssue = (path: string, message: string) => {\n issues.push({ path: [path], message })\n }\n if (!formModel.couponName) {\n pushIssue('couponName', '请输入优惠券名称')\n } else if (!/\\d{6}/.test(formModel.couponName)) {\n pushIssue('couponName', '优惠券名称6个字以上')\n }\n if (!formModel.content || formModel.content.length <= 2) {\n pushIssue('content', '请输入活动细则信息')\n }\n if (!formModel.threshold || !formModel.price) {\n pushIssue('threshold', '请输入满减金额')\n }\n if (!isArray(formModel.platform) || !formModel.platform.length) {\n pushIssue('platform', '请选择推广平台')\n }\n if (!isArray(formModel.promotion) || !formModel.promotion.length) {\n pushIssue('promotion', '请选择优惠方式')\n }\n if (!formModel.time) {\n pushIssue('time', '请选择时间')\n }\n if (!formModel.date) {\n pushIssue('date', '请选择日期')\n }\n if (!formModel.address) {\n pushIssue('address', '请选择地址')\n }\n if (formModel.count === '' || formModel.count === undefined || formModel.count === null) {\n pushIssue('count', '发货数量需要大于1')\n } else if (Number(formModel.count) <= 1) {\n pushIssue('count', '发货数量需要大于1')\n }\n if (!formModel.cardId) {\n pushIssue('cardId', '请输入歪比巴卜')\n }\n if (!formModel.phone) {\n pushIssue('phone', '请输入玛卡巴卡')\n }\n if (!isArray(formModel.fileList) || !formModel.fileList.length) {\n pushIssue('fileList', '请选择活动图片')\n }\n if (!formModel.discount) {\n pushIssue('discount', '请输入优惠金额')\n }\n if (formModel.priority === '' || formModel.priority === undefined || formModel.priority === null) {\n pushIssue('priority', '请选择投放优先级')\n }\n if (!isArray(formModel.tags) || !formModel.tags.length) {\n pushIssue('tags', '请至少选择一个投放标签')\n }\n if (formModel.rate === '' || formModel.rate === undefined || formModel.rate === null) {\n pushIssue('rate', '请完成活动评分')\n }\n if (formModel.budget === '' || formModel.budget === undefined || formModel.budget === null) {\n pushIssue('budget', '请设置预算强度')\n }\n if (!formModel.verified) {\n pushIssue('verified', '请完成滑块验证')\n }\n return issues\n },\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n}\n\nconst zodSchema: FormSchema = zodAdapter(\n z.object({\n couponName: z.string().regex(/\\d{6}/, '优惠券名称6个字以上'),\n content: z.string().min(3, '请输入活动细则信息'),\n threshold: z.string().min(1, '请输入满减金额'),\n price: z.string().optional(),\n platform: z.array(z.any()).min(1, '请选择推广平台'),\n promotion: z.array(z.any()).min(1, '请选择优惠方式'),\n time: z.union([z.string(), z.number()]).refine((value) => !!value, '请选择时间'),\n date: z.union([z.number(), z.null()]).refine((value) => !!value, '请选择日期'),\n address: z.string().min(1, '请选择地址'),\n count: z.number().gt(1, '发货数量需要大于1'),\n switchVal: z.boolean().optional(),\n discount: z.number().optional(),\n cardId: z.string().min(1, '请输入歪比巴卜'),\n phone: z.string().min(1, '请输入玛卡巴卡'),\n fileList: z.array(z.any()).min(1, '请选择活动图片'),\n priority: z.number(),\n tags: z.array(z.number()).min(1, '请至少选择一个投放标签'),\n rate: z.number(),\n budget: z.number(),\n verified: z.boolean().refine((value) => value, '请完成滑块验证')\n }),\n {\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n }\n)\n\nconst activeSchema = computed<FormSchema>(() => {\n return useZodSchema.value ? zodSchema : customSchema\n})\n\nconst platformList = ref<any>([\n { value: '1', label: '京东' },\n { value: '2', label: '开普勒' },\n { value: '3', label: '手Q' },\n { value: '4', label: '微信' },\n { value: '5', label: '1号店' },\n { value: '6', label: '十元街' },\n { value: '7', label: '京东极速版' }\n])\nconst promotionlist = ref<any[]>([\n { value: '1', label: '满减' },\n { value: '2', label: '无门槛' }\n])\n\nconst area = ref<any[]>([\n useCascaderAreaData().map((item) => {\n return {\n value: item.value,\n label: item.text\n }\n })\n])\n\nconst toast = useToast()\nconst form = ref<FormInstance>()\n\nwatch(\n () => isVerticalLayout.value,\n async () => {\n await nextTick()\n sliderRef.value?.initSlider()\n await slideVerifyRef.value?.init()\n slideVerifyRef.value?.reset()\n }\n)\n\nconst platformText = computed(() => {\n if (!isArray(model.platform) || !model.platform.length) return ''\n return model.platform\n .map((val: string) => {\n const item = platformList.value.find((option: any) => option.value === val)\n return item ? item.label : val\n })\n .join('、')\n})\n\nconst promotionText = computed(() => {\n if (!isArray(model.promotion) || !model.promotion.length) return ''\n return model.promotion\n .map((val: string) => {\n const item = promotionlist.value.find((option: any) => option.value === val)\n return item ? item.label : val\n })\n .join('、')\n})\n\nconst timeText = computed(() => {\n if (!model.time) return ''\n if (typeof model.time === 'number') return dayjs(model.time).format('YYYY-MM-DD HH:mm')\n return model.time\n})\n\nconst dateText = computed(() => {\n if (!model.date) return ''\n return dayjs(model.date).format('YYYY-MM-DD')\n})\n\nfunction handleAddressConfirm({ selectedOptions }: { selectedOptions: CascaderOption[] }) {\n addressText.value = selectedOptions.map((item) => item.text).join('/')\n}\n\nfunction handleVerifySuccess() {\n model.verified = true\n}\n\nfunction handleVerifyFail() {\n model.verified = false\n}\n\nfunction handleFileChange({ fileList }: any) {\n model.fileList = fileList\n}\n\nfunction handleSubmit() {\n form\n .value!.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n toast.success('提交成功')\n }\n console.log(valid)\n console.log(errors)\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n\nfunction handleIconClick() {\n toast.info('优惠券提示信息')\n}\n</script>\n```\n\n```css [css]\n.inline-txt {\n display: inline-block;\n font-size: 14px;\n margin: 0 8px;\n color: rgba(0, 0, 0, 0.45);\n vertical-align: middle;\n}\n:deep(.group) {\n &:not(:first-child) {\n margin-top: 12px;\n }\n}\n.tip {\n margin: 12px 0 12px;\n color: #999;\n font-size: 12px;\n}\n.footer {\n padding: 0 24px 20px;\n}\n.layout-tip {\n margin-left: 8px;\n color: #666;\n font-size: 14px;\n}\n:deep(.label-class) {\n color: #999 !important;\n font-size: 12px !important;\n}\n```\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ------------- | ----------------------------------------------------------------------------------- | --------------------- | --------- |\n| model | 表单数据对象 | `Record<string, any>` | - |\n| schema | 表单校验对象 | `FormSchema` | - |\n| validate-trigger | 校验触发时机，可选值为 `change`、`blur`、`submit` | `string \\| string[]` | `submit` |\n| reset-on-change | 表单数据变化时是否重置表单提示信息（设置为 `false` 时需要开发者单独对变更项进行校验） | `boolean` | `true` |\n| error-type | 校验错误提示方式，可选值为 `toast`、`message`、`none` | `string` | `message` |\n| border | 是否展示边框线 | `boolean` | `false` |\n| center | 是否使内容垂直居中 | `boolean` | `false` |\n| size | 单元格大小，可选值为 `large` | `string` | - |\n| title-width | 左侧标题宽度 | `string \\| number` | - |\n| layout | 单元格布局方式，可选值为 `horizontal`、`vertical` | `string` | - |\n| value-align | 右侧内容对齐方式，可选值为 `left`、`right`、`center` | `string` | - |\n| asterisk-position | 必填星号位置，可选值为 `start`、`end` | `string` | - |\n| hide-asterisk | 是否隐藏必填星号 | `boolean` | `false` |\n| ellipsis | 是否超出隐藏显示省略号 | `boolean` | `false` |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 | 返回值 |\n| -------- | ------------------------------------------------------------------------------ | --------------- | --------------- |\n| validate | 验证表单，支持传入一个 prop 来验证单个表单项，不传入 prop 时，会验证所有表单项，1.6.0 版本起支持传入数组 | `prop?: string \\| string[]` | `Promise<{ valid: boolean, errors: ErrorMessage[] }>` |\n| reset | 重置表单项的验证提示 | - | - |\n\n\n### FormItem Attributes\n\n该组件的所有属性除了支持特定表单项配置外，同时也继承自 `Form` 组件的公共配置（如 `border`、`center`、`size`、`title-width` 等）。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| prop | 表单域 model 字段名 | `string` | - |\n| title | 标题 | `string` | - |\n| value | 右侧展示值，用于配合 placeholder 判断是否显示占位文字 | `string \\| number` | - |\n| placeholder | 值为空时显示的占位文字，需与 value 配合使用 | `string` | - |\n| prefix-icon | 前置图标类名 | `string` | - |\n| icon-size | 图标大小 | `string \\| number` | - |\n| icon-prefix | 类名前缀，用于使用自定义图标 | `string` | - |\n| label | 描述信息 | `string` | - |\n| clickable | 是否开启点击反馈 | `boolean` | `false` |\n| is-link | 是否展示右侧箭头并开启点击反馈 | `boolean` | `false` |\n| required | 是否必填 | `boolean` | - |\n| validate-trigger | 校验触发时机，可选值为 `change`、`blur`、`submit` | `string \\| string[]` | - |\n\n### FormSchema 数据结构\n\n| 键名 | 说明 | 类型 |\n| ---------- | ------------------------------ | ------------------------------------------------------------- |\n| validate | 校验函数，返回问题数组 | `(model) => FormSchemaIssue[] \\| Promise<FormSchemaIssue[]>` |\n| isRequired | 可选，用于推导必填星号 | `(path: string) => boolean \\| undefined` |\n\n## FormItem Events\n\n| 事件名称 | 说明 | 参数 |\n| -------- | ------------------------------------------------------------------------------ | --------------- |\n| click | 点击表单项时触发 | - |\n\n\n## 外部样式类\n\n### FormItem 外部样式类\n\n| 类名 | 说明 |\n| ------------ | ---------- |\n| custom-class | 根节点样式 |\n| custom-prefix-class | 前置图标自定义样式类 |\n| custom-label-class | label 使用 slot 时的自定义样式 |\n| custom-value-class | value 使用 slot 时的自定义样式 |\n| custom-title-class | title 使用 slot 时的自定义样式 |\n",
|
|
6665
|
+
"since": "2.0.4",
|
|
6666
|
+
"doc": "# Form 表单 \n\n用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。\n\n表单采用 `wd-form` 和 `wd-form-item` 的结构。`wd-form-item` 内部继承了 `wd-cell` 的布局能力，负责展示标题描述和承载校验提示。各种输入组件（如 `Input`、`Textarea`、`Picker`、`Switch`、`Upload` 等）只需直接放入 `wd-form-item` 的默认插槽中即可。\n\n结合 `wd-form` 组件，可以实现对内部组件的规则校验。如果需要让表单项之间有清晰的边框线分隔，你可以直接在 `wd-form` 上开启 `border` 属性。\n\n:::tip 温馨提示\n`wd-form-item` 与 `input` 和 `textarea` 结合使用时，会自动开启 `input` 和 `textarea` 的 `compact` 属性\n:::\n\n## 校验引擎说明\n\n表单组件默认采用接口式校验方案，你可以根据 `FormSchema` 的结构自己编写校验逻辑，详见后文的[自定义校验引擎](#自定义校验引擎)。\n\n同时，我们推荐使用 [Zod](https://zod.dev/) 作为表单校验引擎。Zod 是一个以 TypeScript 为首的模式声明和验证库，你可以非常方便地通过 `z.object()` 等声明组合来构建你的表单验证规则。\n\n### Zod 安装\n\n~~内置了嫌组件库大，不内置又说安装麻烦，真想吊起来这种人来打。~~\n\n出于组件库体积的考虑，我们不内置 Zod，所以在使用 Zod 前，你需要先将其安装到你的项目中：\n\n::: code-group\n\n```bash [npm]\nnpm install zod\n```\n\n```bash [yarn]\nyarn add zod\n```\n\n```bash [pnpm]\npnpm add zod\n```\n\n:::\n\n### 结合 zodAdapter 使用\n\n组件库内置了 `zodAdapter` 适配器，你可以直接通过它将 `Zod` 的 schema 转化为组件能够识别的校验规则：\n\n```ts\nimport { z } from 'zod'\nimport { zodAdapter } from '@/uni_modules/wot-ui'\n\n// 通过 zodAdapter 转换 zod 的模式对象\nconst schema = zodAdapter(\n z.object({\n username: z.string().min(1, '请填写用户名'),\n password: z.string().min(6, '密码至少为6位')\n })\n)\n```\n\n## 自定义校验引擎\n\n如果你不想使用 Zod，你也可以直接编写一个符合 `FormSchema` 结构的校验对象，实现自定义的表单校验引擎。\n\n自定义校验引擎需要提供 `validate` 函数，其接收整个表单数据 `model`，并返回（或异步返回）包含 `path` 和 `message` 字段的错误问题数组。\n如果需要控制必填星号（`*`）的显示，你还可以提供 `isRequired` 方法：\n\n```ts\nimport type { FormSchema } from '@/uni_modules/wot-ui/components/wd-form/types'\n\nconst customSchema: FormSchema = {\n // 校验逻辑\n validate(formModel) {\n const issues = []\n if (!formModel.username) {\n issues.push({ path: ['username'], message: '请填写用户名' })\n }\n if (!formModel.password || formModel.password.length < 6) {\n issues.push({ path: ['password'], message: '密码至少为6位' })\n }\n return issues\n },\n // 用于推导必填星号\n isRequired(path: string) {\n return path === 'username' || path === 'password'\n }\n}\n```\n\n## 组件类型\n\n### 基础用法\n\n在表单中，使用 `model` 指定表单数据对象，每个 `表单项组件` 代表一个表单项，使用 `prop` 指定表单项字段，使用 `schema` 属性定义校验规则。\n\n::: details 查看基础用法示例\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"schema\" :title-width=\"100\">\n <wd-form-item title=\"歪比巴卜\" prop=\"value1\">\n <wd-input type=\"text\" v-model=\"model.value1\" placeholder=\"请输入歪比巴卜\" />\n </wd-form-item>\n\n <wd-form-item title=\"沙卡拉卡\" prop=\"value2\">\n <wd-input type=\"text\" v-model=\"model.value2\" placeholder=\"请输入沙卡拉卡\" />\n </wd-form-item>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n </view>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { reactive, ref } from 'vue'\nimport { z } from 'zod'\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance } from '@/uni_modules/wot-ui/components/wd-form/types'\n\nconst { success: showSuccess } = useToast()\n\nconst model = reactive<{\n value1: string\n value2: string\n}>({\n value1: '',\n value2: ''\n})\n\nconst form = ref<FormInstance>()\nconst schema = zodAdapter(\n z\n .object({\n value1: z.string().min(1, '请输入歪比巴卜'),\n value2: z.string().min(1, '请输入沙卡拉卡')\n })\n .superRefine((data, ctx) => {\n if (data.value1 === data.value2) return\n const message = '两个输入框的内容必须一致'\n ctx.addIssue({ code: 'custom', message, path: ['value1'] })\n ctx.addIssue({ code: 'custom', message, path: ['value2'] })\n })\n)\n\nfunction handleSubmit() {\n form.value\n ?.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 16px;\n}\n```\n\n:::\n\n## 组件配置\n\n### 校验错误提示方式\n\n1. `message`：默认为输入框下方用文字进行提示\n2. `toast`：以\"toast\"提示的方式弹出错误信息，每次只弹出最前面的那个表单域的错误信息\n3. `none`：不会进行任何提示\n\n::: details 错误提示方式\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"activeSchema\" :error-type=\"errorType\" :title-width=\"100\" border>\n <wd-cell-group custom-class=\"group\" title=\"配置切换\">\n <wd-form-item title=\"校验引擎\" value-align=\"left\">\n <wd-switch size=\"20\" v-model=\"useZodSchema\" active-text=\"Zod\" inactive-text=\"自定义\" />\n </wd-form-item>\n <wd-form-item title=\"提示方式\" value-align=\"left\">\n <wd-radio-group v-model=\"errorType\" direction=\"horizontal\">\n <wd-radio :value=\"'toast'\">toast</wd-radio>\n <wd-radio :value=\"'message'\">message</wd-radio>\n <wd-radio :value=\"'none'\">none</wd-radio>\n </wd-radio-group>\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"表单内容\">\n <wd-form-item title=\"歪比巴卜\" prop=\"value1\">\n <wd-input clearable v-model=\"model.value1\" placeholder=\"请输入歪比巴卜\" />\n </wd-form-item>\n <wd-form-item title=\"沙卡拉卡\" prop=\"value2\">\n <wd-input show-password clearable v-model=\"model.value2\" placeholder=\"请输入沙卡拉卡\" />\n </wd-form-item>\n </wd-cell-group>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n </view>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref, watch } from 'vue'\nimport { z } from 'zod'\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance, FormSchema } from '@/uni_modules/wot-ui/components/wd-form/types'\n\nconst { success: showSuccess } = useToast()\nconst model = reactive<{\n value1: string\n value2: string\n}>({\n value1: '',\n value2: ''\n})\n\nconst useZodSchema = ref(true)\nconst errorType = ref<'toast' | 'message' | 'none'>('toast')\n\nconst customSchema: FormSchema = {\n validate(formModel) {\n const issues = []\n if (!formModel.value1) {\n issues.push({ path: ['value1'], message: '请输入歪比巴卜' })\n }\n if (!formModel.value2) {\n issues.push({ path: ['value2'], message: '请输入沙卡拉卡' })\n }\n return issues\n },\n isRequired(path: string) {\n return path === 'value1' || path === 'value2'\n }\n}\n\nconst zodSchema = zodAdapter(\n z.object({\n value1: z.string().min(1, '请输入歪比巴卜'),\n value2: z.string().min(1, '请输入沙卡拉卡')\n }),\n {\n isRequired(path: string) {\n return path === 'value1' || path === 'value2'\n }\n }\n)\n\nconst activeSchema = computed<FormSchema>(() => {\n return useZodSchema.value ? zodSchema : customSchema\n})\n\nconst form = ref<FormInstance>()\n\nwatch(\n () => errorType.value,\n () => {\n form.value?.reset()\n }\n)\n\nfunction handleSubmit() {\n form\n .value!.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 16px;\n}\n\n:deep(.group) {\n &:not(:first-child) {\n margin-top: 12px;\n }\n}\n```\n\n:::\n\n### 动态表单\n\n表单项动态增减。\n\n::: details 查看动态表单示例\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"schema\">\n <wd-cell-group border>\n <wd-form-item title=\"用户名\" prop=\"name\">\n <wd-input clearable v-model=\"model.name\" placeholder=\"请输入用户名\" />\n </wd-form-item>\n <wd-form-item\n v-for=\"(item, index) in model.phoneNumbers\"\n :key=\"item.key\"\n :title=\"'玛卡巴卡单号' + index\"\n :prop=\"'phoneNumbers.' + index + '.value'\"\n >\n <wd-input clearable v-model=\"item.value\" placeholder=\"请输入玛卡巴卡单号\" />\n </wd-form-item>\n\n <wd-cell title-width=\"0px\">\n <view class=\"footer\">\n <wd-button size=\"small\" type=\"info\" plain @click=\"addPhone\">添加</wd-button>\n <wd-button size=\"small\" type=\"info\" plain @click=\"removePhone\">删除</wd-button>\n <wd-button size=\"small\" type=\"info\" plain @click=\"reset\">重置</wd-button>\n <wd-button type=\"primary\" size=\"small\" @click=\"submit\">提交</wd-button>\n </view>\n </wd-cell>\n </wd-cell-group>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport { reactive, ref } from 'vue'\nimport { z } from 'zod'\n\ninterface PhoneItem {\n key: number\n value: string\n}\n\nconst model = reactive<{\n name: string\n phoneNumbers: PhoneItem[]\n}>({\n name: '',\n phoneNumbers: [\n {\n key: Date.now(),\n value: ''\n }\n ]\n})\n\nconst schema = zodAdapter(\n z.object({\n name: z.string().min(1, '请填写用户名'),\n phoneNumbers: z.array(\n z.object({\n value: z.string().min(1, '请填写玛卡巴卡单号')\n })\n )\n })\n)\n\nconst { success: showSuccess } = useToast()\nconst form = ref()\n\nconst removePhone = () => {\n model.phoneNumbers.splice(model.phoneNumbers.length - 1, 1)\n}\n\nconst addPhone = () => {\n model.phoneNumbers.push({\n key: Date.now(),\n value: ''\n })\n}\n\nconst reset = () => {\n form.value.reset()\n}\n\nconst submit = () => {\n form.value.validate().then(({ valid, errors }) => {\n if (valid) {\n showSuccess('校验通过')\n }\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n text-align: left;\n :deep(.wd-button) {\n &:not(:last-child) {\n margin-right: 12px;\n }\n }\n}\n```\n\n:::\n\n#### 校验触发时机\n\n通过配置 `validate-trigger` 可以指定校验触发时机，可选值为 `change`、`blur`、`submit`。可以在 `wd-form` 上配置全局触发时机，也可以在 `wd-form-item` 上配置覆盖全局设置。\n\n::: details 校验触发时机\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"activeSchema\" validate-trigger=\"change\" :reset-on-change=\"false\" :title-width=\"120\">\n <wd-cell-group custom-class=\"group\" title=\"配置\">\n <wd-form-item title=\"校验引擎\" value-align=\"left\">\n <wd-switch v-model=\"useZodSchema\" size=\"20\" active-text=\"Zod\" inactive-text=\"自定义\" />\n </wd-form-item>\n <wd-form-item title=\"触发说明\" value-align=\"left\">\n <text class=\"tip-text\">表单级 change，字段覆盖：blur/change/submit</text>\n </wd-form-item>\n </wd-cell-group>\n\n <wd-cell-group custom-class=\"group\" title=\"输入类字段\">\n <wd-form-item title=\"金额（change）\" prop=\"amount\">\n <wd-input-number v-model=\"model.amount\" :min=\"0\" :update-on-init=\"false\" :max=\"9999\" />\n </wd-form-item>\n <wd-form-item title=\"备注（change）\" prop=\"remark\">\n <wd-textarea v-model=\"model.remark\" placeholder=\"请输入至少 4 个字\" auto-height :maxlength=\"50\" show-word-limit />\n </wd-form-item>\n <wd-form-item title=\"账号（blur）\" prop=\"account\" validate-trigger=\"blur\">\n <wd-input v-model=\"model.account\" clearable placeholder=\"失焦后触发校验\" />\n </wd-form-item>\n <wd-form-item title=\"邀请码（change）\" prop=\"inviteCode\" validate-trigger=\"change\">\n <wd-input v-model=\"model.inviteCode\" clearable placeholder=\"值变化后触发校验\" />\n </wd-form-item>\n <wd-form-item title=\"城市（submit）\" prop=\"city\" validate-trigger=\"submit\">\n <wd-input v-model=\"model.city\" clearable placeholder=\"仅提交时触发校验\" />\n </wd-form-item>\n </wd-cell-group>\n\n <wd-cell-group custom-class=\"group\" title=\"Picker 字段（change）\">\n <wd-form-item\n title=\"推广平台\"\n prop=\"platform\"\n is-link\n :value=\"platformText\"\n placeholder=\"请选择推广平台\"\n @click=\"showPlatformPicker = true\"\n />\n <wd-form-item\n title=\"优惠方式\"\n prop=\"promotion\"\n is-link\n :value=\"promotionText\"\n placeholder=\"请选择优惠方式\"\n @click=\"showPromotionPicker = true\"\n />\n <wd-form-item title=\"时间\" prop=\"time\" is-link :value=\"timeText\" placeholder=\"请选择时间\" @click=\"showTimePicker = true\" />\n <wd-form-item title=\"日期\" prop=\"date\" is-link :value=\"dateText\" placeholder=\"请选择日期\" @click=\"showDatePicker = true\" />\n </wd-cell-group>\n\n <view class=\"footer\">\n <wd-button type=\"primary\" @click=\"handleSubmit\" block>提交并校验</wd-button>\n </view>\n</wd-form>\n\n<wd-select-picker v-model=\"model.platform\" v-model:visible=\"showPlatformPicker\" :columns=\"platformList\" placeholder=\"请选择推广平台\" />\n<wd-picker v-model=\"model.promotion\" v-model:visible=\"showPromotionPicker\" :columns=\"promotionList\" placeholder=\"请选择优惠方式\" />\n<wd-datetime-picker v-model=\"model.time\" v-model:visible=\"showTimePicker\" placeholder=\"请选择时间\" />\n<wd-calendar v-model=\"model.date\" v-model:visible=\"showDatePicker\" placeholder=\"请选择日期\" />\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance, FormSchema } from '@/uni_modules/wot-ui/components/wd-form/types'\nimport dayjs from 'dayjs'\nimport { computed, reactive, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst { success: showSuccess } = useToast()\n\nconst form = ref<FormInstance>()\nconst useZodSchema = ref(true)\nconst showPlatformPicker = ref(false)\nconst showPromotionPicker = ref(false)\nconst showTimePicker = ref(false)\nconst showDatePicker = ref(false)\n\nconst model = reactive<{\n amount: number | string\n remark: string\n account: string\n inviteCode: string\n city: string\n platform: string[]\n promotion: string[]\n time: number | string\n date: number | null\n}>({\n amount: '',\n remark: '',\n account: '',\n inviteCode: '',\n city: '',\n platform: [],\n promotion: [],\n time: '',\n date: null\n})\n\nconst requiredFields = new Set(['amount', 'remark', 'account', 'inviteCode', 'city', 'platform', 'promotion', 'time', 'date'])\n\nconst customSchema: FormSchema = {\n validate(formModel) {\n const issues = []\n if (formModel.amount === '' || Number(formModel.amount) <= 0) {\n issues.push({ path: ['amount'], message: '请输入大于 0 的金额' })\n }\n if (!formModel.remark || String(formModel.remark).trim().length < 4) {\n issues.push({ path: ['remark'], message: '备注至少输入 4 个字' })\n }\n if (!formModel.account || formModel.account.length < 3) {\n issues.push({ path: ['account'], message: '账号至少 3 位' })\n }\n if (!formModel.inviteCode) {\n issues.push({ path: ['inviteCode'], message: '请输入邀请码' })\n }\n if (!formModel.city) {\n issues.push({ path: ['city'], message: '请输入城市' })\n }\n if (!Array.isArray(formModel.platform) || !formModel.platform.length) {\n issues.push({ path: ['platform'], message: '请选择推广平台' })\n }\n if (!Array.isArray(formModel.promotion) || !formModel.promotion.length) {\n issues.push({ path: ['promotion'], message: '请选择优惠方式' })\n }\n if (!formModel.time) {\n issues.push({ path: ['time'], message: '请选择时间' })\n }\n if (!formModel.date) {\n issues.push({ path: ['date'], message: '请选择日期' })\n }\n return issues\n },\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n}\n\nconst zodSchema: FormSchema = zodAdapter(\n z.object({\n amount: z.union([z.string(), z.number()]).refine((value) => value !== '' && Number(value) > 0, '请输入大于 0 的金额'),\n remark: z.string().refine((value) => value.trim().length >= 4, '备注至少输入 4 个字'),\n account: z.string().min(3, '账号至少 3 位'),\n inviteCode: z.string().min(1, '请输入邀请码'),\n city: z.string().min(1, '请输入城市'),\n platform: z.array(z.string()).min(1, '请选择推广平台'),\n promotion: z.array(z.string()).min(1, '请选择优惠方式'),\n time: z.union([z.string(), z.number()]).refine((value) => !!value, '请选择时间'),\n date: z.union([z.number(), z.null()]).refine((value) => !!value, '请选择日期')\n }),\n {\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n }\n)\n\nconst activeSchema = computed<FormSchema>(() => {\n return useZodSchema.value ? zodSchema : customSchema\n})\n\nconst platformList = ref([\n { value: '1', label: '京东' },\n { value: '2', label: '微信' },\n { value: '3', label: '抖音' }\n])\n\nconst promotionList = ref([\n { value: '1', label: '满减' },\n { value: '2', label: '无门槛' }\n])\n\nconst platformText = computed(() => {\n if (!model.platform.length) return ''\n return model.platform\n .map((value) => {\n const item = platformList.value.find((option) => option.value === value)\n return item ? item.label : value\n })\n .join('、')\n})\n\nconst promotionText = computed(() => {\n if (!model.promotion.length) return ''\n return model.promotion\n .map((value) => {\n const item = promotionList.value.find((option) => option.value === value)\n return item ? item.label : value\n })\n .join('、')\n})\n\nconst timeText = computed(() => {\n if (!model.time) return ''\n if (typeof model.time === 'number') {\n return dayjs(model.time).format('YYYY-MM-DD HH:mm')\n }\n return model.time\n})\n\nconst dateText = computed(() => {\n if (!model.date) return ''\n return dayjs(model.date).format('YYYY-MM-DD')\n})\n\nwatch(\n () => useZodSchema.value,\n () => {\n form.value?.reset()\n }\n)\n\nfunction handleSubmit() {\n form.value?.validate().then(({ valid }) => {\n if (valid) {\n showSuccess('校验通过')\n }\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 16px;\n}\n\n.tip-text {\n color: #666;\n font-size: 14px;\n}\n\n:deep(.group) {\n &:not(:first-child) {\n margin-top: 12px;\n }\n}\n```\n\n:::\n\n## 指定字段校验\n\n`validate` 方法可以传入一个 `prop` 参数，指定校验的字段，可以实现在表单组件的`blur`、`change`等事件触发时对该字段的校验。`prop` 参数也可以是一个字段数组，指定多个字段进行校验。\n\n::: details 查看指定字段校验示例\n::: code-group\n\n```html [vue]\n<wd-form ref=\"form\" :model=\"model\" :schema=\"schema\" error-type=\"toast\" :title-width=\"100\">\n <wd-cell-group border>\n <wd-form-item title=\"用户名\" prop=\"value1\">\n <wd-input clearable v-model=\"model.value1\" placeholder=\"请输入用户名\" />\n </wd-form-item>\n <wd-form-item title=\"密码\" prop=\"value2\">\n <wd-input show-password clearable v-model=\"model.value2\" placeholder=\"请输入密码\" />\n </wd-form-item>\n </wd-cell-group>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n <wd-button type=\"primary\" size=\"large\" @click=\"handleValidate\" block>校验用户名和密码</wd-button>\n </view>\n</wd-form>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport type { FormInstance } from '@/uni_modules/wot-ui/components/wd-form/types'\nimport { reactive, ref } from 'vue'\nimport { z } from 'zod'\n\nconst { success: showSuccess } = useToast()\nconst model = reactive<{\n value1: string\n value2: string\n}>({\n value1: '',\n value2: ''\n})\n\nconst schema = zodAdapter(\n z.object({\n value1: z.string().min(1, '请填写用户名'),\n value2: z.string().min(6, '密码至少为6位')\n })\n)\n\nconst form = ref<FormInstance>()\n\nfunction handleSubmit() {\n form\n .value!.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n\nfunction handleValidate() {\n form\n .value!.validate(['value1', 'value2'])\n .then(({ valid, errors }) => {\n if (valid) {\n showSuccess({\n msg: '校验通过'\n })\n }\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n</script>\n```\n\n```css [css]\n.footer {\n padding: 12px;\n}\n```\n\n:::\n\n### 复杂表单\n\n结合`Input 输入框`、`Textarea 输入框`、`Picker 选择器`、 `Calendar 日历选择器`、 `Cascader 级联选择器`、`SelectPicker 单复选选择器`、`Cell 单元格` 和 `DatetimePicker 日期时间选择器`实现一个复杂表单。\n\n::: details 查看复杂表单示例\n::: code-group\n\n```html [vue/html]\n<wd-select-picker\n v-model=\"model.platform\"\n v-model:visible=\"showPlatformPicker\"\n :columns=\"platformList\"\n placeholder=\"请选择推广平台\"\n/>\n<wd-picker\n v-model=\"model.promotion\"\n v-model:visible=\"showPromotionPicker\"\n :columns=\"promotionlist\"\n placeholder=\"请选择优惠方式\"\n/>\n<wd-datetime-picker v-model=\"model.time\" v-model:visible=\"showTimePicker\" placeholder=\"请选择时间\" />\n<wd-calendar v-model=\"model.date\" v-model:visible=\"showDatePicker\" placeholder=\"请选择日期\" />\n<wd-cascader\n v-model=\"model.address\"\n v-model:visible=\"showAddressPicker\"\n placeholder=\"请选择地址\"\n :options=\"area\"\n @confirm=\"handleAddressConfirm\"\n/>\n<wd-dialog />\n<wd-form ref=\"form\" :model=\"model\" :schema=\"activeSchema\" :title-width=\"100\" :layout=\"formItemLayout\" border asterisk-position=\"end\">\n <wd-cell-group custom-class=\"group\" title=\"布局切换示例\">\n <wd-form-item title=\"表单项布局\" value-align=\"left\">\n <wd-switch size=\"20\" v-model=\"isVerticalLayout\" />\n <text class=\"layout-tip\">{{ isVerticalLayout ? '上下布局' : '左右布局' }}</text>\n </wd-form-item>\n <wd-form-item title=\"校验引擎\" value-align=\"left\">\n <wd-switch size=\"20\" v-model=\"useZodSchema\" active-text=\"Zod\" inactive-text=\"自定义\" />\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"基础信息\">\n <wd-form-item title=\"优惠券名称\" prop=\"couponName\" required>\n <wd-input\n :maxlength=\"20\"\n show-word-limit\n suffix-icon=\"question-circle\"\n v-model=\"model.couponName\"\n placeholder=\"请输入优惠券名称\"\n @clicksuffixicon=\"handleIconClick\"\n compact\n />\n </wd-form-item>\n <wd-form-item\n ellipsis\n title=\"推广平台\"\n prop=\"platform\"\n is-link\n :value=\"platformText\"\n placeholder=\"请选择推广平台\"\n @click=\"showPlatformPicker = true\"\n />\n <wd-form-item\n title=\"优惠方式\"\n prop=\"promotion\"\n is-link\n :value=\"promotionText\"\n placeholder=\"请选择优惠方式\"\n @click=\"showPromotionPicker = true\"\n />\n <wd-form-item prop=\"threshold\" title=\"券面额\" required title-width=\"100px\" custom-value-class=\"cell-left\">\n <view style=\"text-align: left\">\n <view class=\"inline-txt\" style=\"margin-left: 0\">满</view>\n <wd-input\n compact\n custom-style=\"display: inline-block; width: 70px; vertical-align: middle\"\n placeholder=\"请输入金额\"\n v-model=\"model.threshold\"\n />\n <view class=\"inline-txt\">减</view>\n <wd-input\n compact\n custom-style=\"display: inline-block; width: 70px; vertical-align: middle\"\n placeholder=\"请输入金额\"\n v-model=\"model.price\"\n />\n </view>\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"时间和地址\">\n <wd-form-item\n title=\"时间\"\n prop=\"time\"\n is-link\n :value=\"timeText\"\n placeholder=\"请选择时间\"\n @click=\"showTimePicker = true\"\n />\n <wd-form-item\n title=\"日期\"\n prop=\"date\"\n is-link\n :value=\"dateText\"\n placeholder=\"请选择日期\"\n @click=\"showDatePicker = true\"\n />\n <wd-form-item\n title=\"地区\"\n prop=\"address\"\n is-link\n :value=\"addressText\"\n placeholder=\"请选择地区\"\n @click=\"showAddressPicker = true\"\n />\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"其他信息\">\n <wd-form-item title=\"活动细则\" prop=\"content\">\n <wd-textarea\n type=\"textarea\"\n v-model=\"model.content\"\n :maxlength=\"300\"\n show-word-limit\n placeholder=\"请输入活动细则信息\"\n clearable\n auto-height\n compact\n />\n </wd-form-item>\n <wd-form-item title=\"发货数量\" title-width=\"100px\" prop=\"count\" value-align=\"left\">\n <wd-input-number v-model=\"model.count\" />\n </wd-form-item>\n <wd-form-item title=\"开启折扣\" title-width=\"100px\" prop=\"switchVal\" value-align=\"left\" center>\n <wd-switch v-model=\"model.switchVal\" size=\"20\" />\n </wd-form-item>\n <wd-form-item v-if=\"model.switchVal\" title=\"折扣\" prop=\"discount\">\n <wd-input placeholder=\"请输入优惠金额\" clearable v-model=\"model.discount\" compact />\n </wd-form-item>\n <wd-form-item title=\"歪比巴卜\" prop=\"cardId\">\n <wd-input suffix-icon=\"camera\" placeholder=\"请输入歪比巴卜\" clearable v-model=\"model.cardId\" compact />\n </wd-form-item>\n <wd-form-item title=\"玛卡巴卡\" prop=\"phone\">\n <wd-input placeholder=\"请输入玛卡巴卡\" clearable v-model=\"model.phone\" compact />\n </wd-form-item>\n <wd-form-item title=\"活动图片\" title-width=\"100px\" prop=\"fileList\">\n <wd-upload\n :file-list=\"model.fileList\"\n action=\"https://69bd04402bc2a25b22ad0a49.mockapi.io/upload\"\n @change=\"handleFileChange\"\n ></wd-upload>\n </wd-form-item>\n </wd-cell-group>\n <wd-cell-group custom-class=\"group\" title=\"组合示例\">\n <wd-form-item title=\"投放优先级\" prop=\"priority\">\n <wd-radio-group v-model=\"model.priority\" direction=\"horizontal\">\n <wd-radio :value=\"1\">高</wd-radio>\n <wd-radio :value=\"2\">中</wd-radio>\n <wd-radio :value=\"3\">低</wd-radio>\n </wd-radio-group>\n </wd-form-item>\n <wd-form-item title=\"投放标签\" prop=\"tags\">\n <wd-checkbox-group v-model=\"model.tags\" direction=\"horizontal\">\n <wd-checkbox :name=\"1\">新品</wd-checkbox>\n <wd-checkbox :name=\"2\">爆款</wd-checkbox>\n <wd-checkbox :name=\"3\">清仓</wd-checkbox>\n </wd-checkbox-group>\n </wd-form-item>\n <wd-form-item title=\"活动评分\" prop=\"rate\">\n <wd-rate v-model=\"model.rate\" allow-half clearable />\n </wd-form-item>\n <wd-form-item title=\"预算强度\" prop=\"budget\">\n <wd-slider ref=\"sliderRef\" v-model=\"model.budget\" show-extreme-value />\n </wd-form-item>\n <wd-form-item title=\"滑块验证\" prop=\"verified\">\n <wd-slide-verify ref=\"slideVerifyRef\" @success=\"handleVerifySuccess\" @fail=\"handleVerifyFail\" />\n </wd-form-item>\n </wd-cell-group>\n <view class=\"tip\">\n <wd-form-item prop=\"read\" title-width=\"0px\" :border=\"false\">\n <wd-checkbox v-model=\"model.read\">\n 已阅读并同意\n <text style=\"color: #4d80f0\">《巴拉巴拉吧啦协议》</text>\n </wd-checkbox>\n </wd-form-item>\n </view>\n <view class=\"footer\">\n <wd-button type=\"primary\" size=\"large\" @click=\"handleSubmit\" block>提交</wd-button>\n </view>\n</wd-form>\n```\n\n```ts [typescript]\n<script lang=\"ts\" setup>\nimport { useToast, zodAdapter } from '@/uni_modules/wot-ui'\nimport { isArray } from '@/uni_modules/wot-ui/common/util'\nimport { useCascaderAreaData } from '@vant/area-data'\nimport { type FormInstance, type FormSchema, type FormSchemaIssue } from '@/uni_modules/wot-ui/components/wd-form/types'\nimport type { SliderInstance } from '@/uni_modules/wot-ui/components/wd-slider/types'\nimport type { SlideVerifyInstance } from '@/uni_modules/wot-ui/components/wd-slide-verify/types'\nimport type { UploadFileItem } from '@/uni_modules/wot-ui/components/wd-upload/types'\nimport type { CascaderOption } from '@/uni_modules/wot-ui/components/wd-cascader/types'\n\nimport dayjs from 'dayjs'\nimport { computed, nextTick, reactive, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst showPlatformPicker = ref(false)\nconst showPromotionPicker = ref(false)\nconst showTimePicker = ref(false)\nconst showDatePicker = ref(false)\nconst showAddressPicker = ref(false)\nconst addressText = ref('')\nconst isVerticalLayout = ref(false)\nconst useZodSchema = ref(true)\nconst formItemLayout = computed(() => (isVerticalLayout.value ? 'vertical' : 'horizontal'))\nconst sliderRef = ref<SliderInstance>()\nconst slideVerifyRef = ref<SlideVerifyInstance>()\n\nconst model = reactive<{\n couponName: string\n platform: any[]\n promotion: any[]\n threshold: string\n price: string\n time: number | string\n date: null | number\n address: string\n count: number\n content: string\n switchVal: boolean\n cardId: string\n phone: string\n read: boolean\n fileList: UploadFileItem[]\n discount: number\n priority: number\n tags: number[]\n rate: number\n budget: number\n verified: boolean\n}>({\n couponName: '',\n platform: [],\n promotion: [],\n threshold: '',\n price: '',\n date: null,\n time: '',\n address: '',\n count: 1,\n content: '',\n switchVal: true,\n cardId: '',\n phone: '',\n read: false,\n fileList: [],\n discount: 1,\n priority: 2,\n tags: [],\n rate: 3.5,\n budget: 35,\n verified: false\n})\n\nconst requiredFields = new Set([\n 'couponName',\n 'content',\n 'threshold',\n 'platform',\n 'promotion',\n 'time',\n 'date',\n 'address',\n 'count',\n 'cardId',\n 'phone',\n 'fileList',\n 'discount',\n 'priority',\n 'tags',\n 'rate',\n 'budget',\n 'verified'\n])\n\nconst customSchema: FormSchema = {\n async validate(formModel) {\n const issues: FormSchemaIssue[] = []\n const pushIssue = (path: string, message: string) => {\n issues.push({ path: [path], message })\n }\n if (!formModel.couponName) {\n pushIssue('couponName', '请输入优惠券名称')\n } else if (!/\\d{6}/.test(formModel.couponName)) {\n pushIssue('couponName', '优惠券名称6个字以上')\n }\n if (!formModel.content || formModel.content.length <= 2) {\n pushIssue('content', '请输入活动细则信息')\n }\n if (!formModel.threshold || !formModel.price) {\n pushIssue('threshold', '请输入满减金额')\n }\n if (!isArray(formModel.platform) || !formModel.platform.length) {\n pushIssue('platform', '请选择推广平台')\n }\n if (!isArray(formModel.promotion) || !formModel.promotion.length) {\n pushIssue('promotion', '请选择优惠方式')\n }\n if (!formModel.time) {\n pushIssue('time', '请选择时间')\n }\n if (!formModel.date) {\n pushIssue('date', '请选择日期')\n }\n if (!formModel.address) {\n pushIssue('address', '请选择地址')\n }\n if (formModel.count === '' || formModel.count === undefined || formModel.count === null) {\n pushIssue('count', '发货数量需要大于1')\n } else if (Number(formModel.count) <= 1) {\n pushIssue('count', '发货数量需要大于1')\n }\n if (!formModel.cardId) {\n pushIssue('cardId', '请输入歪比巴卜')\n }\n if (!formModel.phone) {\n pushIssue('phone', '请输入玛卡巴卡')\n }\n if (!isArray(formModel.fileList) || !formModel.fileList.length) {\n pushIssue('fileList', '请选择活动图片')\n }\n if (!formModel.discount) {\n pushIssue('discount', '请输入优惠金额')\n }\n if (formModel.priority === '' || formModel.priority === undefined || formModel.priority === null) {\n pushIssue('priority', '请选择投放优先级')\n }\n if (!isArray(formModel.tags) || !formModel.tags.length) {\n pushIssue('tags', '请至少选择一个投放标签')\n }\n if (formModel.rate === '' || formModel.rate === undefined || formModel.rate === null) {\n pushIssue('rate', '请完成活动评分')\n }\n if (formModel.budget === '' || formModel.budget === undefined || formModel.budget === null) {\n pushIssue('budget', '请设置预算强度')\n }\n if (!formModel.verified) {\n pushIssue('verified', '请完成滑块验证')\n }\n return issues\n },\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n}\n\nconst zodSchema: FormSchema = zodAdapter(\n z.object({\n couponName: z.string().regex(/\\d{6}/, '优惠券名称6个字以上'),\n content: z.string().min(3, '请输入活动细则信息'),\n threshold: z.string().min(1, '请输入满减金额'),\n price: z.string().optional(),\n platform: z.array(z.any()).min(1, '请选择推广平台'),\n promotion: z.array(z.any()).min(1, '请选择优惠方式'),\n time: z.union([z.string(), z.number()]).refine((value) => !!value, '请选择时间'),\n date: z.union([z.number(), z.null()]).refine((value) => !!value, '请选择日期'),\n address: z.string().min(1, '请选择地址'),\n count: z.number().gt(1, '发货数量需要大于1'),\n switchVal: z.boolean().optional(),\n discount: z.number().optional(),\n cardId: z.string().min(1, '请输入歪比巴卜'),\n phone: z.string().min(1, '请输入玛卡巴卡'),\n fileList: z.array(z.any()).min(1, '请选择活动图片'),\n priority: z.number(),\n tags: z.array(z.number()).min(1, '请至少选择一个投放标签'),\n rate: z.number(),\n budget: z.number(),\n verified: z.boolean().refine((value) => value, '请完成滑块验证')\n }),\n {\n isRequired(path: string) {\n return requiredFields.has(path)\n }\n }\n)\n\nconst activeSchema = computed<FormSchema>(() => {\n return useZodSchema.value ? zodSchema : customSchema\n})\n\nconst platformList = ref<any>([\n { value: '1', label: '京东' },\n { value: '2', label: '开普勒' },\n { value: '3', label: '手Q' },\n { value: '4', label: '微信' },\n { value: '5', label: '1号店' },\n { value: '6', label: '十元街' },\n { value: '7', label: '京东极速版' }\n])\nconst promotionlist = ref<any[]>([\n { value: '1', label: '满减' },\n { value: '2', label: '无门槛' }\n])\n\nconst area = ref<any[]>([\n useCascaderAreaData().map((item) => {\n return {\n value: item.value,\n label: item.text\n }\n })\n])\n\nconst toast = useToast()\nconst form = ref<FormInstance>()\n\nwatch(\n () => isVerticalLayout.value,\n async () => {\n await nextTick()\n sliderRef.value?.initSlider()\n await slideVerifyRef.value?.init()\n slideVerifyRef.value?.reset()\n }\n)\n\nconst platformText = computed(() => {\n if (!isArray(model.platform) || !model.platform.length) return ''\n return model.platform\n .map((val: string) => {\n const item = platformList.value.find((option: any) => option.value === val)\n return item ? item.label : val\n })\n .join('、')\n})\n\nconst promotionText = computed(() => {\n if (!isArray(model.promotion) || !model.promotion.length) return ''\n return model.promotion\n .map((val: string) => {\n const item = promotionlist.value.find((option: any) => option.value === val)\n return item ? item.label : val\n })\n .join('、')\n})\n\nconst timeText = computed(() => {\n if (!model.time) return ''\n if (typeof model.time === 'number') return dayjs(model.time).format('YYYY-MM-DD HH:mm')\n return model.time\n})\n\nconst dateText = computed(() => {\n if (!model.date) return ''\n return dayjs(model.date).format('YYYY-MM-DD')\n})\n\nfunction handleAddressConfirm({ selectedOptions }: { selectedOptions: CascaderOption[] }) {\n addressText.value = selectedOptions.map((item) => item.text).join('/')\n}\n\nfunction handleVerifySuccess() {\n model.verified = true\n}\n\nfunction handleVerifyFail() {\n model.verified = false\n}\n\nfunction handleFileChange({ fileList }: any) {\n model.fileList = fileList\n}\n\nfunction handleSubmit() {\n form\n .value!.validate()\n .then(({ valid, errors }) => {\n if (valid) {\n toast.success('提交成功')\n }\n console.log(valid)\n console.log(errors)\n })\n .catch((error) => {\n console.log(error, 'error')\n })\n}\n\nfunction handleIconClick() {\n toast.info('优惠券提示信息')\n}\n</script>\n```\n\n```css [css]\n.inline-txt {\n display: inline-block;\n font-size: 14px;\n margin: 0 8px;\n color: rgba(0, 0, 0, 0.45);\n vertical-align: middle;\n}\n:deep(.group) {\n &:not(:first-child) {\n margin-top: 12px;\n }\n}\n.tip {\n margin: 12px 0 12px;\n color: #999;\n font-size: 12px;\n}\n.footer {\n padding: 0 24px 20px;\n}\n.layout-tip {\n margin-left: 8px;\n color: #666;\n font-size: 14px;\n}\n:deep(.label-class) {\n color: #999 !important;\n font-size: 12px !important;\n}\n```\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ------------- | ----------------------------------------------------------------------------------- | --------------------- | --------- |\n| model | 表单数据对象 | `Record<string, any>` | - |\n| schema | 表单校验对象 | `FormSchema` | - |\n| validate-trigger | 校验触发时机，可选值为 `change`、`blur`、`submit` | `string \\| string[]` | `submit` |\n| reset-on-change | 表单数据变化时是否重置表单提示信息（设置为 `false` 时需要开发者单独对变更项进行校验） | `boolean` | `true` |\n| error-type | 校验错误提示方式，可选值为 `toast`、`message`、`none` | `string` | `message` |\n| border | 是否展示边框线 | `boolean` | `false` |\n| center | 是否使内容垂直居中 | `boolean` | `false` |\n| size | 单元格大小，可选值为 `large` | `string` | - |\n| title-width | 左侧标题宽度 | `string \\| number` | - |\n| layout | 单元格布局方式，可选值为 `horizontal`、`vertical` | `string` | - |\n| value-align | 右侧内容对齐方式，可选值为 `left`、`right`、`center` | `string` | - |\n| asterisk-position | 必填星号位置，可选值为 `start`、`end` | `string` | - |\n| hide-asterisk | 是否隐藏必填星号 | `boolean` | `false` |\n| ellipsis | 是否超出隐藏显示省略号 | `boolean` | `false` |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 | 返回值 |\n| -------- | ------------------------------------------------------------------------------ | --------------- | --------------- |\n| validate | 验证表单，支持传入一个 prop 来验证单个表单项，不传入 prop 时，会验证所有表单项，1.6.0 版本起支持传入数组 | `prop?: string \\| string[]` | `Promise<{ valid: boolean, errors: ErrorMessage[] }>` |\n| reset | 重置表单项的验证提示 | - | - |\n\n\n### FormItem Attributes\n\n该组件的所有属性除了支持特定表单项配置外，同时也继承自 `Form` 组件的公共配置（如 `border`、`center`、`size`、`title-width` 等）。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| prop | 表单域 model 字段名 | `string` | - |\n| title | 标题 | `string` | - |\n| value | 右侧展示值，用于配合 placeholder 判断是否显示占位文字 | `string \\| number` | - |\n| placeholder | 值为空时显示的占位文字，需与 value 配合使用 | `string` | - |\n| prefix-icon | 前置图标类名 | `string` | - |\n| icon-size | 图标大小 | `string \\| number` | - |\n| icon-prefix | 类名前缀，用于使用自定义图标 | `string` | - |\n| label | 描述信息 | `string` | - |\n| clickable | 是否开启点击反馈 | `boolean` | `false` |\n| is-link | 是否展示右侧箭头并开启点击反馈 | `boolean` | `false` |\n| required | 是否必填 | `boolean` | - |\n| validate-trigger | 校验触发时机，可选值为 `change`、`blur`、`submit` | `string \\| string[]` | - |\n\n### FormSchema 数据结构\n\n| 键名 | 说明 | 类型 |\n| ---------- | ------------------------------ | ------------------------------------------------------------- |\n| validate | 校验函数，返回问题数组 | `(model) => FormSchemaIssue[] \\| Promise<FormSchemaIssue[]>` |\n| isRequired | 可选，用于推导必填星号 | `(path: string) => boolean \\| undefined` |\n\n## FormItem Events\n\n| 事件名称 | 说明 | 参数 |\n| -------- | ------------------------------------------------------------------------------ | --------------- |\n| click | 点击表单项时触发 | - |\n\n\n## 外部样式类\n\n### FormItem 外部样式类\n\n| 类名 | 说明 |\n| ------------ | ---------- |\n| custom-class | 根节点样式 |\n| custom-prefix-class | 前置图标自定义样式类 |\n| custom-label-class | label 使用 slot 时的自定义样式 |\n| custom-value-class | value 使用 slot 时的自定义样式 |\n| custom-title-class | title 使用 slot 时的自定义样式 |\n",
|
|
6670
6667
|
"props": [
|
|
6671
6668
|
{
|
|
6672
6669
|
"name": "model",
|
|
@@ -6774,7 +6771,7 @@
|
|
|
6774
6771
|
},
|
|
6775
6772
|
{
|
|
6776
6773
|
"name": "--wot-form-item-error-message-line-height",
|
|
6777
|
-
"defaultValue": "$typography-label-line
|
|
6774
|
+
"defaultValue": "$typography-label-line-height-size-small",
|
|
6778
6775
|
"description": "错误提示文字行高"
|
|
6779
6776
|
},
|
|
6780
6777
|
{
|
|
@@ -6804,7 +6801,7 @@
|
|
|
6804
6801
|
"category": "未分类",
|
|
6805
6802
|
"description": "用于页面布局中的间距占位，可替代 `margin` 或 `padding`，也可作为底部占位元素。",
|
|
6806
6803
|
"descriptionZh": "用于页面布局中的间距占位，可替代 `margin` 或 `padding`，也可作为底部占位元素。",
|
|
6807
|
-
"since": "2.0.
|
|
6804
|
+
"since": "2.0.4",
|
|
6808
6805
|
"doc": "# Gap 间隔槽\n\n用于页面布局中的间距占位，可替代 `margin` 或 `padding`，也可作为底部占位元素。\n\n## 组件类型\n\n### 基本使用\n\n默认渲染一个高度为 `14px`、背景为透明色的间隔槽。\n\n```html\n<wd-gap />\n```\n\n## 组件变体\n\n### 自定义背景色\n\n通过 `bg-color` 设置背景颜色。\n\n```html\n<wd-gap bg-color=\"#4D80F0\" />\n```\n\n### 自定义高度\n\n通过 `height` 设置高度，支持数字和带单位字符串。\n\n```html\n<wd-gap bg-color=\"#4D80F0\" height=\"120rpx\" />\n```\n\n## 组件样式\n\n### 自定义类名\n\n通过 `custom-class` 扩展样式。\n\n```html\n<wd-gap custom-class=\"custom-gap\" />\n```\n\n```css\n.custom-gap {\n padding-bottom: 120rpx;\n background: #34d19d !important;\n}\n```\n\n## 特殊样式\n\n### 底部安全区\n\n开启 `safe-area-bottom` 后会自动追加底部安全区内边距，适合底部固定占位场景。\n\n```html\n<wd-gap safe-area-bottom height=\"0\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| height | 间隔槽高度，支持数字（单位 `px`）或字符串（如 `20rpx`） | `string \\| number` | `14` |\n| bg-color | 背景颜色 | `string` | `'transparent'` |\n| safe-area-bottom | 是否开启底部安全区适配 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n",
|
|
6809
6806
|
"props": [
|
|
6810
6807
|
{
|
|
@@ -6881,7 +6878,7 @@
|
|
|
6881
6878
|
"category": "未分类",
|
|
6882
6879
|
"description": "宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。",
|
|
6883
6880
|
"descriptionZh": "宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。",
|
|
6884
|
-
"since": "2.0.
|
|
6881
|
+
"since": "2.0.4",
|
|
6885
6882
|
"doc": "# Grid 宫格\n\n宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。\n\n## 组件类型\n\n### 基础用法\n\n基础用法需要通过 `icon` 指定图标名称以及 `text` 属性指定文字。默认显示为一行。\n\n```html\n<wd-grid clickable>\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n</wd-grid>\n```\n\n### 内容插槽\n\n通过 `wd-grid-item` 的默认插槽可以自定义宫格内容。\n\n```html\n<wd-grid>\n <wd-grid-item>\n <image class=\"img\" :src=\"joy\" />\n </wd-grid-item>\n <wd-grid-item>\n <image class=\"img\" :src=\"joy\" />\n </wd-grid-item>\n <wd-grid-item>\n <image class=\"img\" :src=\"joy\" />\n </wd-grid-item>\n</wd-grid>\n```\n\n```scss\n.img {\n width: 100%;\n height: 90px;\n}\n```\n\n## 组件变体\n\n### 自定义列数\n\n通过 `column` 属性可以自定义宫格列数。未定义该属性时，默认显示为一行。\n\n```html\n<wd-grid :column=\"3\">\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n</wd-grid>\n```\n\n### 正方形格子\n\n通过 `square` 属性开启正方形格属性。此时每一个 `GridItem` 宽高相等。\n\n> 注意：开启 `square` 后，不建议再通过样式自定义 `GridItem` 的高度。\n\n```html\n<wd-grid square :column=\"4\" border :gutter=\"10\">\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n</wd-grid>\n```\n\n## 组件样式\n\n### 自定义背景颜色\n\n通过 `bg-color` 属性可以自定义宫格背景颜色。\n\n```html\n<wd-grid bg-color=\"rgba(0, 0, 0, 0.02)\">\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n</wd-grid>\n```\n\n### 开启边框\n\n通过 `border` 属性可以开启边框线展示。\n\n```html\n<wd-grid border :column=\"3\">\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n</wd-grid>\n```\n\n### 设定格间隙\n\n通过 `gutter` 属性设置格子之间的距离。\n\n```html\n<wd-grid :gutter=\"10\" :column=\"4\">\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n <wd-grid-item icon=\"image\" text=\"文字\" />\n</wd-grid>\n```\n\n### 提示信息\n\n设置 `is-dot` 属性后，会在图标右上角展示一个小红点。也可通过 `value`、`max` 设置徽标显示内容。\n\n```html\n<wd-grid>\n <wd-grid-item is-dot icon=\"gift\" text=\"文字\" />\n <wd-grid-item value=\"100\" :max=\"99\" icon=\"desktop\" text=\"文字\" />\n</wd-grid>\n```\n\n## 布局能力\n\n### 横向布局\n\n通过 `direction` 属性可以设置内容的排列方向，默认为 `vertical`（纵向），可设置为 `horizontal`（横向）。配合 `reverse` 属性可以调换图标和文本的位置。\n\n```html\n<wd-grid direction=\"horizontal\" :column=\"2\">\n <wd-grid-item icon=\"image\" text=\"图标居左\" />\n <wd-grid-item icon=\"settings\" text=\"设置选项\" />\n</wd-grid>\n\n<wd-grid direction=\"horizontal\" reverse :column=\"2\" border>\n <wd-grid-item icon=\"image\" text=\"图标居右\" />\n <wd-grid-item icon=\"settings\" text=\"设置选项\" />\n</wd-grid>\n```\n\n## 特殊样式\n\n### 图标插槽\n\n通过具名插槽 `icon` 可以自定义图标位的内容。\n\n```html\n<wd-grid>\n <wd-grid-item text=\"文字\" icon-size=\"36px\">\n <template #icon>\n <image class=\"slot-img\" :src=\"joy\" />\n </template>\n </wd-grid-item>\n</wd-grid>\n```\n\n### 文字插槽\n\n通过具名插槽 `text` 可以自定义文字位的内容。\n\n```html\n<wd-grid>\n <wd-grid-item icon=\"image\">\n <template #text>\n <view class=\"text\">自定义文字插槽</view>\n </template>\n </wd-grid-item>\n</wd-grid>\n```\n\n### 自定义样式\n\n通过 `custom-class` 或外部样式类可以深度定制样式。如果文字过长想单行显示并使用省略号，可以设置 `ellipsis` 为 `true`。\n\n```html\n<wd-grid>\n <wd-grid-item custom-class=\"custom-item\" ellipsis icon=\"search-line\" text=\"这是自定义样式的宫格项这是自定义样式的宫格项这是自定义样式的宫格项\" />\n</wd-grid>\n```\n\n```scss\n:deep(.custom-item) {\n color: #e2231a;\n text-align: left !important;\n}\n```\n\n### 页面导航\n\n通过 `clickable` 属性开启可点击状态，并通过 `url` 和 `link-type` 属性设置页面跳转。\n\n```html\n<wd-grid clickable>\n <wd-grid-item link-type=\"navigateTo\" url=\"/pages/button/Index\" icon=\"edit\" text=\"Navigate to ...\" />\n</wd-grid>\n```\n\n## Grid Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| column | 列数 | `number` | - |\n| border | 是否显示边框 | `boolean` | `false` |\n| gutter | 格子之间的间距，默认单位为 `px` | `number` | - |\n| square | 是否将格子固定为正方形 | `boolean` | `false` |\n| clickable | 是否开启格子点击反馈 | `boolean` | `false` |\n| bg-color | 背景颜色设置 | `string` | - |\n| hover-class | 指定 grid-item 按下去的样式类 | `string` | `'wd-grid-item__content--hover'` |\n| center | 是否将格子内容居中显示 | `boolean` | `true` |\n| direction | 格子内容排列的方向，可选值为 `horizontal`、`vertical` | `string` | `'vertical'` |\n| reverse | 是否调换图标和文本的位置 | `boolean` | `false` |\n| icon-size | 图标大小，默认单位为 `px` | `string` | `'28px'` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## GridItem Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| text | 文字内容 | `string` | - |\n| ellipsis | 是否超出隐藏显示省略号 | `boolean` | `false` |\n| icon | 图标名称，可选值见 `wd-icon` 组件 | `string` | - |\n| icon-color | 图标颜色 | `string` | - |\n| icon-prefix | 图标类名前缀 | `string` | - |\n| is-dot | 是否显示图标右上角小红点 | `boolean` | `false` |\n| value | 图标右上角徽标显示值 | `string \\| number` | - |\n| max | 图标右上角徽标最大值，超过最大值会显示 `{max}+` | `number` | `99` |\n| badge-props | 自定义徽标属性，透传给 [Badge 组件](/component/badge#attributes) | `BadgeProps` | - |\n| url | 点击后跳转的链接地址 | `string` | - |\n| link-type | 页面跳转方式，可选值为 `navigateTo`、`switchTab`、`reLaunch`、`redirectTo` | `string` | `'navigateTo'` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## GridItem Events\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击(跳转)事件 | - |\n\n## Grid Slot\n\n| name | 说明 |\n| --- | --- |\n| default | 宫格内容 |\n\n## GridItem Slot\n\n| name | 说明 |\n| --- | --- |\n| default | 宫格项默认内容（自定义全部内容） |\n| icon | 图标位内容 |\n| text | 文本位内容 |\n\n## Grid 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n\n## GridItem 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n| custom-text | 文字样式 |\n| custom-icon | 图标样式 |\n",
|
|
6886
6883
|
"props": [
|
|
6887
6884
|
{
|
|
@@ -6979,7 +6976,7 @@
|
|
|
6979
6976
|
},
|
|
6980
6977
|
{
|
|
6981
6978
|
"name": "--wot-grid-item-line-height",
|
|
6982
|
-
"defaultValue": "$typography-body-line
|
|
6979
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
6983
6980
|
"description": "网格项文字行高"
|
|
6984
6981
|
},
|
|
6985
6982
|
{
|
|
@@ -7116,8 +7113,8 @@
|
|
|
7116
7113
|
"category": "未分类",
|
|
7117
7114
|
"description": "基于字体的图标集。",
|
|
7118
7115
|
"descriptionZh": "基于字体的图标集。",
|
|
7119
|
-
"since": "2.0.
|
|
7120
|
-
"doc": "# Icon 图标\n\n基于字体的图标集。\n\n## 组件类型\n\n### 基础用法\n\n通过 `name` 属性设置使用哪个图标。\n\n```html\n<wd-icon name=\"del\" />\n```\n\n## 组件样式\n\n### 图标颜色\n\n设置 `color` 属性。\n\n```html\n<wd-icon name=\"del\" color=\"#0083ff\" />\n```\n\n### 图标大小\n\n设置 `size` 属性。\n\n```html\n<wd-icon name=\"del\" size=\"20px\" />\n```\n\n## 特殊样式\n\n### 自定义图标\n\n如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。\n\n``` css\n/* 路径 src/iconfont/index.css */\n\n@font-face {\n font-family: \"fish\";\n src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),\n url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),\n url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');\n}\n\n.fish {\n font-family: \"fish\" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.fish-kehuishouwu:before {\n content: \"\\e627\";\n}\n\n```\n```html\n<!-- app.vue -->\n<style>\n@import '@/iconfont/index.css';\n</style>\n```\n\n```html\n<!-- 通过 class-prefix 指定类名为 fish -->\n<wd-icon class-prefix=\"fish\" name=\"kehuishouwu\" />\n```\n\n### CSS 类名图标 (UnoCSS)\n\n如果项目中使用了 [UnoCSS](https://unocss.dev/) 等 CSS 引擎，你可以通过设置 `css-icon` 为 `true`，此时传入的 `name` 会直接被作为 CSS 类名使用，而不会拼接任何前缀。\n\n```html\n<wd-icon css-icon name=\"i-ep-apple\" />\n<wd-icon css-icon name=\"i-carbon-sun\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| name | 图标名称或图片链接 | `string` | - |\n| color\t| 图标的颜色 | `string` | `inherit` |\n| size | 图标的字体大小 | `string \\| number` | `inherit` |\n| class-prefix | 类名前缀，用于使用自定义图标 | `string` | `wd-icon` |\n| css-icon |
|
|
7116
|
+
"since": "2.0.4",
|
|
7117
|
+
"doc": "# Icon 图标\n\n基于字体的图标集。\n\n## 组件类型\n\n### 基础用法\n\n通过 `name` 属性设置使用哪个图标。\n\n```html\n<wd-icon name=\"del\" />\n```\n\n## 组件样式\n\n### 图标颜色\n\n设置 `color` 属性。\n\n```html\n<wd-icon name=\"del\" color=\"#0083ff\" />\n```\n\n### 图标大小\n\n设置 `size` 属性。\n\n```html\n<wd-icon name=\"del\" size=\"20px\" />\n```\n\n## 特殊样式\n\n### 自定义图标\n\n如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。\n\n``` css\n/* 路径 src/iconfont/index.css */\n\n@font-face {\n font-family: \"fish\";\n src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),\n url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),\n url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');\n}\n\n.fish {\n font-family: \"fish\" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.fish-kehuishouwu:before {\n content: \"\\e627\";\n}\n\n```\n```html\n<!-- app.vue -->\n<style>\n@import '@/iconfont/index.css';\n</style>\n```\n\n```html\n<!-- 通过 class-prefix 指定类名为 fish -->\n<wd-icon class-prefix=\"fish\" name=\"kehuishouwu\" />\n```\n\n### CSS 类名图标 (UnoCSS)\n\n如果项目中使用了 [UnoCSS](https://unocss.dev/) 等 CSS 引擎，你可以通过设置 `css-icon` 为 `true`，此时传入的 `name` 会直接被作为 CSS 类名使用，而不会拼接任何前缀。\n\n```html\n<wd-icon css-icon name=\"i-ep-apple\" />\n<wd-icon css-icon name=\"i-carbon-sun\" />\n\n<!-- 也可以直接传图标类名给 css-icon 而无需再传 name -->\n<wd-icon css-icon=\"i-carbon-sun\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| name | 图标名称或图片链接 | `string` | - |\n| color\t| 图标的颜色 | `string` | `inherit` |\n| size | 图标的字体大小 | `string \\| number` | `inherit` |\n| class-prefix | 类名前缀，用于使用自定义图标 | `string` | `wd-icon` |\n| css-icon | CSS 图标，为 `true` 时 `name` 直接作为 CSS class 而不会拼接 `class-prefix` 前缀，也可以直接传图标类名 | `boolean \\| string` | `false` |\n| custom-style | 根节点样式 | `string` | - |\n| custom-class | 根节点样式 | `string` | - |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击图标时触发 | `event` |\n",
|
|
7121
7118
|
"props": [
|
|
7122
7119
|
{
|
|
7123
7120
|
"name": "name",
|
|
@@ -7145,8 +7142,8 @@
|
|
|
7145
7142
|
},
|
|
7146
7143
|
{
|
|
7147
7144
|
"name": "css-icon",
|
|
7148
|
-
"description": "
|
|
7149
|
-
"type": "`boolean`",
|
|
7145
|
+
"description": "CSS 图标，为 `true` 时 `name` 直接作为 CSS class 而不会拼接 `class-prefix` 前缀，也可以直接传图标类名",
|
|
7146
|
+
"type": "`boolean | string`",
|
|
7150
7147
|
"default": "`false`"
|
|
7151
7148
|
},
|
|
7152
7149
|
{
|
|
@@ -7200,7 +7197,7 @@
|
|
|
7200
7197
|
"name": "css-unocss",
|
|
7201
7198
|
"title": "CSS 类名图标 (UnoCSS)",
|
|
7202
7199
|
"description": "CSS 类名图标 (UnoCSS)",
|
|
7203
|
-
"code": "<wd-icon css-icon name=\"i-ep-apple\" />\n<wd-icon css-icon name=\"i-carbon-sun\" />"
|
|
7200
|
+
"code": "<wd-icon css-icon name=\"i-ep-apple\" />\n<wd-icon css-icon name=\"i-carbon-sun\" />\n\n<!-- 也可以直接传图标类名给 css-icon 而无需再传 name -->\n<wd-icon css-icon=\"i-carbon-sun\" />"
|
|
7204
7201
|
}
|
|
7205
7202
|
]
|
|
7206
7203
|
},
|
|
@@ -7211,7 +7208,7 @@
|
|
|
7211
7208
|
"category": "未分类",
|
|
7212
7209
|
"description": "图片预览组件，支持多图预览、滑动切换和函数式调用。",
|
|
7213
7210
|
"descriptionZh": "图片预览组件，支持多图预览、滑动切换和函数式调用。",
|
|
7214
|
-
"since": "2.0.
|
|
7211
|
+
"since": "2.0.4",
|
|
7215
7212
|
"doc": "# ImagePreview 图片预览\n\n图片预览组件，支持多图预览、滑动切换和函数式调用。\n\n## 组件类型\n\n### useImagePreview\n\n`useImagePreview` 用于函数式调用 `wd-image-preview`。调用前需要先在页面中声明一个 `wd-image-preview` 实例。\n\n### 基本用法\n\n通过 `useImagePreview` 函数式调用打开图片预览。\n\n```html\n<wd-button @click=\"handlePreview\">预览图片</wd-button>\n<wd-image-preview />\n```\n\n```typescript\nimport { useImagePreview } from '@wot-ui/ui'\n\nconst { previewImage } = useImagePreview()\n\nfunction handlePreview() {\n previewImage({\n images: [\n 'https://example.com/image1.jpg',\n 'https://example.com/image2.jpg',\n 'https://example.com/image3.jpg'\n ]\n })\n}\n```\n\n### 传入图片数组\n\n可以直接传入图片 URL 数组，简化调用方式。\n\n```typescript\npreviewImage([\n 'https://example.com/image1.jpg',\n 'https://example.com/image2.jpg'\n])\n```\n\n## 组件变体\n\n### 指定起始位置\n\n通过 `startPosition` 指定预览时的起始位置（从 0 开始）。\n\n```typescript\npreviewImage({\n images: ['url1', 'url2', 'url3'],\n startPosition: 1 // 从第二张图片开始预览\n})\n```\n\n## 组件配置\n\n### 隐藏页码\n\n通过 `showIndex` 属性控制是否显示页码。\n\n```typescript\npreviewImage({\n images: ['url1', 'url2'],\n showIndex: false\n})\n```\n\n### 隐藏关闭按钮\n\n通过 `closeable` 控制是否显示关闭按钮。\n\n```typescript\npreviewImage({\n images: ['url1', 'url2'],\n closeable: false\n})\n```\n\n### 关闭按钮位置\n\n通过 `closeIconPosition` 控制按钮位置。\n\n```typescript\npreviewImage({\n images: ['url1', 'url2'],\n closeIconPosition: 'top-left' // 或 'top-right'\n})\n```\n\n### 禁用点击关闭\n\n通过 `closeOnClick` 控制是否点击图片或遮罩时关闭。\n\n```typescript\npreviewImage({\n images: ['url1', 'url2'],\n closeOnClick: false\n})\n```\n\n### 禁用循环\n\n通过 `loop` 属性禁用循环播放。\n\n```typescript\npreviewImage({\n images: ['url1', 'url2'],\n loop: false\n})\n```\n\n## 特殊用法\n\n### 监听事件\n\n通过回调函数监听预览事件。\n\n```typescript\nimport { useImagePreview } from '@wot-ui/ui'\n\nconst { previewImage, closeImagePreview } = useImagePreview()\n\npreviewImage({\n images: ['url1', 'url2'],\n onOpen: () => {\n console.log('预览已打开')\n },\n onClose: () => {\n console.log('预览已关闭')\n },\n onChange: (index) => {\n console.log('当前图片索引:', index)\n }\n})\n\nfunction handleClose() {\n closeImagePreview()\n}\n```\n\n### 使用插槽\n\n可以通过具名插槽自定义指示器或底部内容。若页面中存在多个实例，需要通过 `selector` 区分，并在 `useImagePreview(selector)` 中传入相同标识。\n\n```html\n<wd-button @click=\"handleSlotPreview\">自定义插槽</wd-button>\n\n<wd-image-preview selector=\"slot-preview\">\n <!-- 自定义指示器 -->\n <template #indicator=\"{ current, total }\">\n <wd-swiper-nav :current=\"current\" :total=\"total\" type=\"dots-bar\" custom-style=\"bottom: 64px;\" />\n </template>\n <!-- 底部自定义内容 -->\n <template #default=\"{ current }\">\n <view class=\"custom-bottom\">\n <text class=\"custom-bottom__text\">{{ imageDescriptions[current] }}</text>\n </view>\n </template>\n</wd-image-preview>\n```\n\n```typescript\nimport { useImagePreview } from '@wot-ui/ui'\n\nconst { previewImage } = useImagePreview('slot-preview')\n\nconst images = [\n 'https://wot-ui.cn/assets/redpanda.jpg',\n 'https://wot-ui.cn/assets/capybara.jpg'\n]\n\nconst imageDescriptions = ['小熊猫', '水豚']\n\nfunction handleSlotPreview() {\n previewImage({\n images,\n showIndex: false // 隐藏默认指示器\n })\n}\n```\n\n### 组件式调用\n\n也可以通过组件的方式使用，并通过 ref 控制。\n\n```html\n<wd-image-preview ref=\"imagePreviewRef\" :images=\"images\" />\n<wd-button @click=\"openPreview\">预览</wd-button>\n```\n\n```typescript\nimport { ref } from 'vue'\nimport type { ImagePreviewInstance } from '@wot-ui/ui'\n\nconst imagePreviewRef = ref<ImagePreviewInstance>()\nconst images = ref([\n 'https://example.com/image1.jpg',\n 'https://example.com/image2.jpg'\n])\n\nfunction openPreview() {\n imagePreviewRef.value?.open()\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 选择器 | `string` | - |\n| images | 图片 URL 数组 | `string[]` | `[]` |\n| start-position | 起始位置索引 | `number` | `0` |\n| show-index | 是否显示页码 | `boolean` | `true` |\n| loop | 是否循环播放 | `boolean` | `true` |\n| closeable | 是否显示关闭按钮 | `boolean` | `true` |\n| close-icon | 关闭图标名称 | `string` | `close` |\n| close-icon-position | 关闭图标位置，可选值为 `top-left`、`top-right` | `string` | `top-right` |\n| close-on-click | 是否点击图片或遮罩时关闭 | `boolean` | `true` |\n| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单 | `boolean` | `true` |\n| z-index | 层级 | `number` | `1000` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开预览时触发 | - |\n| close | 关闭预览时触发 | - |\n| change | 切换图片时触发 | `{ index: number }` |\n| long-press | 长按图片时触发 | `{ image: string }` |\n\n## Methods\n\n通过 ref 调用组件实例方法。\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| open | 打开图片预览 | `options?: ImagePreviewOptions \\| string[]` | - |\n| close | 关闭图片预览 | - | - |\n| setActive | 切换到指定图片 | `index: number` | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 底部自定义内容，参数为 `{ current: number }` |\n| indicator | 自定义指示器，参数为 `{ current: number, total: number }` |\n\n## 外部样式类\n\n| 类名 | 说明 | 最低版本 |\n|------|------|----------|\n| custom-class | 根节点样式类 | - |\n\n## CSS 变量\n\n| 变量名 | 说明 | 默认值 |\n|--------|------|--------|\n| --wot-image-preview-bg | 背景颜色 | `rgba(0, 0, 0, 0.9)` |\n| --wot-image-preview-index-color | 页码颜色 | `#fff` |\n| --wot-image-preview-index-font-size | 页码字号 | `15px` |\n| --wot-image-preview-close-size | 关闭按钮尺寸 | `44px` |\n| --wot-image-preview-close-margin | 关闭按钮边距 | `12px` |\n",
|
|
7216
7213
|
"props": [
|
|
7217
7214
|
{
|
|
@@ -7341,7 +7338,7 @@
|
|
|
7341
7338
|
},
|
|
7342
7339
|
{
|
|
7343
7340
|
"name": "--wot-image-preview-index-line-height",
|
|
7344
|
-
"defaultValue": "$typography-title-line
|
|
7341
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
7345
7342
|
"description": "页码文字行高"
|
|
7346
7343
|
},
|
|
7347
7344
|
{
|
|
@@ -7412,7 +7409,7 @@
|
|
|
7412
7409
|
"category": "未分类",
|
|
7413
7410
|
"description": "增强版图片组件，支持填充模式、懒加载、加载态/失败态插槽，以及点击预览。",
|
|
7414
7411
|
"descriptionZh": "增强版图片组件，支持填充模式、懒加载、加载态/失败态插槽，以及点击预览。",
|
|
7415
|
-
"since": "2.0.
|
|
7412
|
+
"since": "2.0.4",
|
|
7416
7413
|
"doc": "# Img 图片\n\n增强版图片组件，支持填充模式、懒加载、加载态/失败态插槽，以及点击预览。\n\n## 组件类型\n\n### 基本用法\n\n基础用法与原生 `image` 标签一致，可以设置 `src`、`width`、`height` 等属性。\n\n使用本地资源时，建议通过文件导入方式传入 `src`。在微信小程序中，`image` 标签支持二进制数据和 base64 编码，单独使用导入路径时需要结合构建配置处理。\n\n```html\n<wd-img :width=\"100\" :height=\"100\" :src=\"imgURL\" />\n```\n\n```typescript\nimport blackMao from './black_mao.png'\n\nconst imgURL = blackMao\n```\n\n:::tip 提示\n可以配置 `transformAssetUrls`，让 `wd-img` 的 `src` 属性获得与原生 `image` 一致的资源转换体验。\n\n```typescript\nimport uni from '@dcloudio/vite-plugin-uni'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n plugins: [\n uni({\n vueOptions: {\n template: {\n transformAssetUrls: {\n tags: {\n 'wd-img': ['src']\n }\n }\n }\n }\n })\n ]\n})\n```\n\n修改完成后重启开发服务即可生效，更多背景可参考 [uni-app issue#4997](https://github.com/dcloudio/uni-app/issues/4997#issuecomment-2456851123)。\n:::\n\n## 组件状态\n\n### 加载中提示\n\n图片加载时会显示默认占位内容，也可以通过 `loading` 插槽自定义加载态。若不希望显示默认加载态，可将 `show-loading` 设为 `false`。\n\n```html\n<wd-img width=\"100%\" height=\"27vw\" src=\"https://www.123.wot.com/a.jpg\" />\n\n<wd-img width=\"100%\" height=\"27vw\" src=\"https://www.123.wot.com/a.jpg\">\n <template #loading>\n <wd-loading />\n </template>\n</wd-img>\n```\n\n### 加载失败提示\n\n图片加载失败时会显示默认占位内容，也可以通过 `error` 插槽自定义失败态。若不希望显示默认失败态，可将 `show-error` 设为 `false`。\n\n```html\n<wd-img width=\"100%\" height=\"27vw\" src=\"https://www.123.wot.com/a.jpg\" />\n\n<wd-img width=\"100%\" height=\"27vw\" src=\"https://www.123.wot.com/a.jpg\">\n <template #error>\n <view class=\"error-wrap\">加载失败</view>\n </template>\n</wd-img>\n```\n\n```css\n.error-wrap {\n width: 100%;\n height: 100%;\n background-color: red;\n color: white;\n line-height: 100px;\n text-align: center;\n}\n```\n\n## 组件样式\n\n### 填充模式\n\n通过 `mode` 设置图片填充模式。可选值为 `top left`、`top right`、`bottom left`、`bottom right`、`right`、`left`、`center`、`bottom`、`top`、`heightFix`、`widthFix`、`scaleToFill`、`aspectFit`、`aspectFill`。\n\n```html\n<wd-img :width=\"100\" :height=\"100\" :src=\"imgURL\" mode=\"center\" />\n```\n\n### 圆形\n\n通过 `round` 将图片显示为圆形。\n\n```html\n<wd-img :width=\"100\" :height=\"100\" :src=\"imgURL\" round />\n```\n\n### 圆角\n\n通过 `radius` 设置图片圆角，默认单位为 `px`。\n\n```html\n<wd-img :width=\"100\" :height=\"100\" :src=\"imgURL\" :radius=\"8\" />\n```\n\n## 特殊用法\n\n### 可预览\n\n通过 `enable-preview` 开启点击预览，内部调用 `uni.previewImage` 实现。组件仅在图片加载成功后才会触发预览。\n\n```html\n<wd-img :width=\"100\" :height=\"100\" :src=\"imgURL\" :enable-preview=\"true\" />\n```\n\n### 指定预览图片\n\n通过 `preview-src` 指定预览时展示的图片，可与组件当前显示的图片不同。\n\n```html\n<wd-img :width=\"100\" :height=\"100\" :src=\"imgURL\" :preview-src=\"previewURL\" :enable-preview=\"true\" />\n```\n\n```typescript\nimport blackMao from './black_mao.png'\nimport blackMaoPreview from './black_mao_1.png'\n\nconst imgURL = blackMao\nconst previewURL = blackMaoPreview\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| src | 图片链接 | `string` | - |\n| preview-src | 预览图片链接 | `string` | - |\n| width | 宽度，支持数字（单位 `px`）或字符串 | `string \\| number` | - |\n| height | 高度，支持数字（单位 `px`）或字符串 | `string \\| number` | - |\n| mode | 填充模式，可选值为 `top left`、`top right`、`bottom left`、`bottom right`、`right`、`left`、`center`、`bottom`、`top`、`heightFix`、`widthFix`、`scaleToFill`、`aspectFit`、`aspectFill` | `ImageMode` | `scaleToFill` |\n| round | 是否显示为圆形 | `boolean` | `false` |\n| radius | 圆角大小，默认单位为 `px` | `string \\| number` | - |\n| lazy-load | 是否开启图片懒加载 | `boolean` | `false` |\n| enable-preview | 是否支持点击预览 | `boolean` | `false` |\n| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单，仅微信小程序平台有效 | `boolean` | `false` |\n| show-loading | 是否展示默认加载态 | `boolean` | `true` |\n| show-error | 是否展示默认失败态 | `boolean` | `true` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n| custom-image | 内部 `image` 节点自定义类名 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击图片时触发 | `event: MouseEvent` |\n| load | 图片加载完成时触发，返回图片加载事件对象 | `event: Event` |\n| error | 图片加载失败时触发，返回图片错误事件对象 | `event: Event` |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| loading | 自定义图片加载中的展示内容 |\n| error | 自定义图片加载失败后的展示内容 |\n",
|
|
7417
7414
|
"props": [
|
|
7418
7415
|
{
|
|
@@ -7536,7 +7533,7 @@
|
|
|
7536
7533
|
"cssVars": [
|
|
7537
7534
|
{
|
|
7538
7535
|
"name": "--wot-img-border-radius",
|
|
7539
|
-
"defaultValue": "$radius-
|
|
7536
|
+
"defaultValue": "$radius-full",
|
|
7540
7537
|
"description": "圆形模式圆角"
|
|
7541
7538
|
},
|
|
7542
7539
|
{
|
|
@@ -7648,7 +7645,7 @@
|
|
|
7648
7645
|
"category": "未分类",
|
|
7649
7646
|
"description": "图片剪裁组件，用于图片裁剪，支持拖拽、缩放、旋转等操作。",
|
|
7650
7647
|
"descriptionZh": "图片剪裁组件，用于图片裁剪，支持拖拽、缩放、旋转等操作。",
|
|
7651
|
-
"since": "2.0.
|
|
7648
|
+
"since": "2.0.4",
|
|
7652
7649
|
"doc": "# ImgCropper 图片裁剪\n\n图片剪裁组件，用于图片裁剪，支持拖拽、缩放、旋转等操作。\n\n## 组件类型\n\n### 基本用法\n\n图片裁剪组件需要绑定 `v-model` 来控制组件的显示与隐藏，通过属性 `img-src` 控制展示的图片资源。进入组件后，可以对图片进行拖拽、双指缩放、旋转等操作，监听 `confirm` 事件获取裁剪结果。\n\n> *注意：建议在新页面中使用图片裁剪组件，保持 `show` 为 true，完成裁剪后返回上一页。*\n\n```html\n<wd-img-cropper\n v-model=\"show\"\n :img-src=\"src\"\n @confirm=\"handleConfirm\"\n @cancel=\"handleCancel\"\n>\n</wd-img-cropper>\n<view class=\"profile\">\n <view v-if=\"!imgSrc\" class=\"img\" @click=\"upload\">\n <wd-icon name=\"fill-camera\" custom-class=\"img-icon\"></wd-icon>\n </view>\n <wd-img v-if=\"imgSrc\" round width=\"200px\" height=\"200px\" :src=\"imgSrc\" mode=\"aspectFit\" custom-class=\"profile-img\" @click=\"upload\" />\n <view style=\"font-size: 14px;\">点击上传头像</view>\n</view>\n```\n\n```typescript\nconst src = ref<string>('')\nconst imgSrc = ref<string>('')\nconst show = ref<boolean>(false)\n\nfunction upload() {\n uni.chooseImage({\n count: 1,\n success: (res) => {\n const tempFilePaths = res.tempFilePaths[0]\n src.value = tempFilePaths\n show.value = true\n }\n })\n}\nfunction handleConfirm(event) {\n const { tempFilePath } = event\n imgSrc.value = tempFilePath\n}\nfunction imgLoaderror(res) {\n console.log('加载失败', res)\n}\nfunction imgLoaded(res) {\n console.log('加载成功', res)\n}\nfunction handleCancel(event) {\n console.log('取消', event)\n}\n```\n\n## 组件配置\n\n### 自定义裁剪比例\n\n通过 `aspect-ratio` 属性可以设置裁剪框的宽高比，格式为 `width:height`。\n\n#### 3:2 适合拍照\n\n```html\n<wd-img-cropper\n v-model=\"show\"\n :img-src=\"src\"\n aspect-ratio=\"3:2\"\n @confirm=\"handleConfirm\"\n @cancel=\"handleCancel\"\n>\n</wd-img-cropper>\n```\n\n#### 16:9 影视比例\n\n```html\n<wd-img-cropper\n v-model=\"show\"\n :img-src=\"src\"\n aspect-ratio=\"16:9\"\n @confirm=\"handleConfirm\"\n @cancel=\"handleCancel\"\n>\n</wd-img-cropper>\n```\n\n#### 16:10 这么阔 很有型\n\n16:10 的显示比例非常适合展示风景照片或者电影海报等宽屏内容。\n\n```html\n<wd-img-cropper\n v-model=\"show\"\n :img-src=\"src\"\n aspect-ratio=\"16:10\"\n @confirm=\"handleConfirm\"\n @cancel=\"handleCancel\"\n>\n</wd-img-cropper>\n```\n\n## 特殊用法\n\n### 裁剪后上传\n\n结合 `useUpload` 可以实现裁剪完成后自动上传图片的功能。\n\n```html\n<wd-img-cropper\n v-model=\"show\"\n :img-src=\"src\"\n @confirm=\"handleConfirmUpload\"\n @cancel=\"handleCancel\"\n>\n</wd-img-cropper>\n```\n\n```typescript\nimport { ref } from 'vue'\nimport { useUpload, useToast } from '@/uni_modules/wot-ui'\nimport { type UploadFileItem } from '@/uni_modules/wot-ui/components/wd-upload/types'\n\nconst { startUpload, UPLOAD_STATUS } = useUpload()\nconst { show: showToast } = useToast()\n\nconst show = ref(false)\nconst src = ref('')\nconst imgSrc = ref('')\n\nasync function handleConfirmUpload(event) {\n const { tempFilePath } = event\n \n // 构建上传文件对象\n const file: UploadFileItem = {\n url: tempFilePath,\n status: UPLOAD_STATUS.PENDING,\n percent: 0,\n uid: new Date().getTime()\n }\n\n try {\n // 开始上传\n await startUpload(file, {\n action: 'https://your-upload-url',\n onSuccess() {\n imgSrc.value = tempFilePath\n showToast({\n msg: '上传成功'\n })\n },\n onError() {\n showToast({\n msg: '上传失败'\n })\n },\n onProgress(res) {\n console.log('上传进度:', res.progress)\n }\n })\n } catch (error) {\n console.error('上传失败:', error)\n }\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 打开图片裁剪组件 | `boolean` | `false` |\n| img-src | 图片资源链接 | `string` | - |\n| img-width | 截屏预览图片的初始宽度; `1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; `string` 类型只支持 `%` 单位，`number` 类型时单位为 `px` | `number \\| string` | - |\n| img-height | 截屏预览图片的初始高度; `1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; `string` 类型只支持 `%` 单位，`number` 类型时单位为 `px` | `number \\| string` | - |\n| disabled-rotate | 禁止图片旋转 | `boolean` | `false` |\n| export-scale | 设置导出图片尺寸 | `number` | `2` |\n| max-scale | 最大缩放倍数 | `number` | `3` |\n| cancel-button-text | 取消按钮文案 | `string` | `取消` |\n| confirm-button-text | 确认按钮文案 | `string` | `完成` |\n| quality | 生成的图片质量 [wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | `number` | `1` |\n| file-type | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | `string` | `png` |\n| aspect-ratio | 裁剪框宽高比，格式为 `width:height` | `string` | `1:1` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| confirm | 完成截图时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高 |\n| cancel | 当取消截图时触发 | - |\n| imgloaderror | 当图片加载错误时触发 | `{err}` |\n| imgloaded | 当图片加载完成时触发 | `{res}` |\n\n## Methods\n\n通过 `ref` 对外暴露组件内部函数：\n\n| 方法名称 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| setRotate | 设置图片旋转角度 | `deg` (设置的旋转角度) | - |\n| resetImg | 重置图片的角度、缩放、位置 | - | - |\n| revertIsAnimation | 切换图片过渡动画效果 | `animation` (是否启用动画) | - |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |",
|
|
7653
7650
|
"props": [
|
|
7654
7651
|
{
|
|
@@ -7899,7 +7896,7 @@
|
|
|
7899
7896
|
"category": "未分类",
|
|
7900
7897
|
"description": "用于列表的索引分类显示和快速定位。",
|
|
7901
7898
|
"descriptionZh": "用于列表的索引分类显示和快速定位。",
|
|
7902
|
-
"since": "2.0.
|
|
7899
|
+
"since": "2.0.4",
|
|
7903
7900
|
"doc": "# IndexBar 索引栏\n\n用于列表的索引分类显示和快速定位。\n\n## 组件类型\n\n### 基础用法\n\n使用一个固定高度的元素包裹 `wd-index-bar` 组件，组件的宽高会和包裹元素相同。\n\n将 `wd-index-anchor` 作为子组件使用，会根据 anchor 组件的 `index` 属性生成锚点以及侧边栏。\n\n```vue\n<template>\n <view class=\"wraper\">\n <wd-index-bar sticky>\n <view v-for=\"item in data\" :key=\"item.index\">\n <wd-index-anchor :index=\"item.index\" />\n <wd-cell border clickable v-for=\"city in item.data\" :key=\"city\" :title=\"city\" @click=\"handleClick(item.index, city)\"></wd-cell>\n </view>\n </wd-index-bar>\n </view>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue'\n\nconst data = ref([\n {\n index: 'A',\n data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门']\n },\n {\n index: 'B',\n data: ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州']\n },\n {\n index: 'C',\n data: [\n '重庆',\n '成都',\n '长沙',\n '长春',\n '沧州',\n '常德',\n '昌都',\n '长治',\n '常州',\n '巢湖',\n '潮州',\n '承德',\n '郴州',\n '赤峰',\n '池州',\n '崇左',\n '楚雄',\n '滁州',\n '朝阳'\n ]\n },\n {\n index: 'D',\n data: ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营']\n },\n {\n index: 'E',\n data: ['鄂尔多斯', '恩施', '鄂州']\n },\n {\n index: 'F',\n data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳']\n },\n {\n index: 'G',\n data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛']\n },\n {\n index: 'H',\n data: [\n '杭州',\n '哈尔滨',\n '合肥',\n '海口',\n '呼和浩特',\n '海北',\n '海东',\n '海南',\n '海西',\n '邯郸',\n '汉中',\n '鹤壁',\n '河池',\n '鹤岗',\n '黑河',\n '衡水',\n '衡阳',\n '河源',\n '贺州',\n '红河',\n '淮安',\n '淮北',\n '怀化',\n '淮南',\n '黄冈',\n '黄南',\n '黄山',\n '黄石',\n '惠州',\n '葫芦岛',\n '呼伦贝尔',\n '湖州',\n '菏泽'\n ]\n }\n])\n\nfunction handleClick(index: string, city: string) {\n console.log(`当前点击项：${index}，城市：${city}`)\n}\n</script>\n\n<style lang=\"scss\">\n.wraper {\n height: calc(100vh - var(--window-top));\n height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));\n height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));\n}\n</style>\n```\n\n## 特殊用法\n\n### 更新列表数据\n\n当前示例页仅提供基础用法演示。如果你的列表数据需要动态更新，可以参考下面这个扩展示例，配合 `wd-search` 组件使用：\n\n::: details 查看更新列表数据示例\n::: code-group\n\n```html [vue/html]\n<template>\n <view>\n <wd-search hide-cancel placeholder=\"我要去哪里？\" v-model=\"keyword\" @search=\"handleSearch\" @clear=\"handleClear\" />\n <view class=\"wraper\">\n <wd-index-bar sticky v-if=\"showList.length\">\n <view v-for=\"item in showList\" :key=\"item.index\">\n <wd-index-anchor :index=\"item.index\" />\n <wd-cell border clickable v-for=\"city in item.data\" :key=\"city\" :title=\"city\" @click=\"handleClick(item.index, city)\"></wd-cell>\n </view>\n </wd-index-bar>\n </view>\n </view>\n</template>\n```\n\n```typescript [typescript]\n<script lang=\"ts\" setup>\nimport { useToast } from '@/uni_modules/wot-ui'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst { show: showToast } = useToast()\nconst keyword = ref('')\nconst showList = ref<any>([])\n\nconst indexList = [\n {\n index: 'A',\n data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门']\n },\n {\n index: 'B',\n data: ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州']\n },\n {\n index: 'C',\n data: [\n '重庆',\n '成都',\n '长沙',\n '长春',\n '沧州',\n '常德',\n '昌都',\n '长治',\n '常州',\n '巢湖',\n '潮州',\n '承德',\n '郴州',\n '赤峰',\n '池州',\n '崇左',\n '楚雄',\n '滁州',\n '朝阳'\n ]\n },\n {\n index: 'D',\n data: ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营']\n },\n {\n index: 'E',\n data: ['鄂尔多斯', '恩施', '鄂州']\n },\n {\n index: 'F',\n data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳']\n },\n {\n index: 'G',\n data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛']\n },\n {\n index: 'H',\n data: [\n '杭州',\n '哈尔滨',\n '合肥',\n '海口',\n '呼和浩特',\n '海北',\n '海东',\n '海南',\n '海西',\n '邯郸',\n '汉中',\n '鹤壁',\n '河池',\n '鹤岗',\n '黑河',\n '衡水',\n '衡阳',\n '河源',\n '贺州',\n '红河',\n '淮安',\n '淮北',\n '怀化',\n '淮南',\n '黄冈',\n '黄南',\n '黄山',\n '黄石',\n '惠州',\n '葫芦岛',\n '呼伦贝尔',\n '湖州',\n '菏泽'\n ]\n }\n]\n\nonMounted(() => {\n handleSearch()\n})\n\nfunction handleClick(index: string, city: string) {\n showToast(`当前点击项：${index}，城市：${city}`)\n}\n\nfunction handleSearch() {\n showList.value = []\n nextTick(() => {\n if (keyword.value) {\n showList.value = indexList.filter((item) => {\n return item.data.some((city) => {\n return city.includes(keyword.value)\n })\n })\n } else {\n showList.value = indexList\n }\n })\n}\n\nfunction handleClear() {\n keyword.value = ''\n handleSearch()\n}\n</script>\n```\n\n```css [css]\n.wraper {\n height: calc(100vh - var(--window-top) - 54px);\n height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - 54px);\n height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - 54px);\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| sticky | 索引是否吸顶 | `boolean` | `false` |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 自定义索引列表内容 |\n\n## IndexAnchor Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| index | 索引字符 | `string \\| number` | - |\n| custom-style | 根节点自定义样式 | `string` | - |\n| custom-class | 根节点自定义类名 | `string` | - |\n\n## IndexAnchor Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 自定义内容 |\n",
|
|
7904
7901
|
"props": [
|
|
7905
7902
|
{
|
|
@@ -7929,12 +7926,12 @@
|
|
|
7929
7926
|
},
|
|
7930
7927
|
{
|
|
7931
7928
|
"name": "--wot-index-bar-index-width",
|
|
7932
|
-
"defaultValue": "$typography-label-line
|
|
7929
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
7933
7930
|
"description": "-"
|
|
7934
7931
|
},
|
|
7935
7932
|
{
|
|
7936
7933
|
"name": "--wot-index-bar-index-height",
|
|
7937
|
-
"defaultValue": "$typography-label-line
|
|
7934
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
7938
7935
|
"description": "-"
|
|
7939
7936
|
},
|
|
7940
7937
|
{
|
|
@@ -7949,7 +7946,7 @@
|
|
|
7949
7946
|
},
|
|
7950
7947
|
{
|
|
7951
7948
|
"name": "--wot-index-bar-index-border-radius",
|
|
7952
|
-
"defaultValue": "$radius-
|
|
7949
|
+
"defaultValue": "$radius-full",
|
|
7953
7950
|
"description": "-"
|
|
7954
7951
|
},
|
|
7955
7952
|
{
|
|
@@ -8029,7 +8026,7 @@
|
|
|
8029
8026
|
"category": "未分类",
|
|
8030
8027
|
"description": "用户可以在文本框中输入内容。",
|
|
8031
8028
|
"descriptionZh": "用户可以在文本框中输入内容。",
|
|
8032
|
-
"since": "2.0.
|
|
8029
|
+
"since": "2.0.4",
|
|
8033
8030
|
"doc": "# Input 输入框\n\n用户可以在文本框中输入内容。\n\n## 组件类型\n\n### 基本用法\n\n通过 `v-model` 绑定输入值，通过 `placeholder` 设置占位提示。\n\n```html\n<wd-input v-model=\"value\" type=\"text\" placeholder=\"请输入用户名\" @input=\"handleInput\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref('')\n\nfunction handleInput(event) {\n console.log(event)\n}\n```\n\n### 数字类型\n\n将 `type` 设置为 `number` 后，仅允许输入数字。\n\n```html\n<wd-input v-model=\"value\" type=\"number\" />\n```\n\n## 组件状态\n\n### 禁用\n\n设置 `disabled` 后不可输入。\n\n```html\n<wd-input v-model=\"value\" disabled />\n```\n\n### 只读\n\n设置 `readonly` 后不可编辑，但仍会保留展示样式。\n\n```html\n<wd-input v-model=\"value\" readonly />\n```\n\n### 错误状态\n\n设置 `error` 后，输入内容会展示为错误态。\n\n```html\n<wd-input v-model=\"value\" placeholder=\"请输入用户名\" error />\n```\n\n## 组件变体\n\n### 清空按钮\n\n设置 `clearable` 后，在可清空条件满足时显示清空按钮。\n\n```html\n<wd-input v-model=\"value\" clearable @clear=\"handleClear\" />\n```\n\n### 聚焦时显示清空按钮\n\n通过 `clear-trigger=\"focus\"` 控制仅在输入框聚焦且有值时展示清空按钮。\n\n:::warning 注意\n支付宝小程序暂不支持 `clear-trigger`，且某些场景下清空按钮无法点击，可参考 [issue](https://github.com/ant-design/ant-design-mini/issues/1255)。\n:::\n\n```html\n<wd-input v-model=\"value\" clear-trigger=\"focus\" clearable />\n```\n\n### 清空后不自动聚焦\n\n通过 `focus-when-clear` 控制点击清空按钮后是否重新聚焦。\n\n```html\n<wd-input v-model=\"value\" :focus-when-clear=\"false\" clearable />\n```\n\n### 密码输入框\n\n设置 `show-password` 后，可切换密码显隐状态。\n\n```html\n<wd-input v-model=\"value\" clearable show-password />\n```\n\n## 内容形态\n\n### 前后图标\n\n通过 `prefix-icon` 和 `suffix-icon` 设置前后图标，图标名称可参考 [Icon](/component/icon)。\n\n```html\n<wd-input\n v-model=\"value\"\n prefix-icon=\"sound\"\n suffix-icon=\"send\"\n clearable\n @clickprefixicon=\"handlePrefixClick\"\n @clicksuffixicon=\"handleSuffixClick\"\n/>\n```\n\n### 后缀插槽\n\n通过 `suffix` 插槽自定义后缀内容。\n\n```html\n<wd-input v-model=\"value\" clearable placeholder=\"请输入\">\n <template #suffix>\n <wd-button size=\"small\">获取验证码</wd-button>\n </template>\n</wd-input>\n```\n\n## 组件样式\n\n### 字数限制\n\n设置 `maxlength` 后，可以通过 `show-word-limit` 展示当前字数统计。\n\n```html\n<wd-input v-model=\"value\" :maxlength=\"20\" show-word-limit />\n```\n\n### 紧凑布局\n\n设置 `compact` 后会移除输入框的默认内边距和背景，适合配合 `wd-cell` 或 `wd-form-item` 使用。\n\n```html\n<wd-input\n v-model=\"price\"\n compact\n placeholder=\"请输入价格\"\n custom-style=\"display: inline-block; width: 70px; vertical-align: middle;\"\n/>\n<text style=\"margin-left: 8px;\">元</text>\n```\n\n## 特殊用法\n\n### 结合表单使用\n\n当前表单场景推荐使用 `wd-form` 与 `wd-form-item` 承载标题、必填态与校验提示，`wd-input` 仅负责输入能力。\n\n```html\n<wd-form :model=\"formData\" border title-width=\"98px\">\n <wd-form-item title=\"基本用法\" prop=\"basic\">\n <wd-input v-model=\"formData.basic\" placeholder=\"请输入\" compact />\n </wd-form-item>\n\n <wd-form-item title=\"自定义插槽\" prop=\"slot\" center>\n <wd-input v-model=\"formData.slot\" placeholder=\"请输入\" clearable compact>\n <template #suffix>\n <wd-button size=\"small\">获取验证码</wd-button>\n </template>\n </wd-input>\n </wd-form-item>\n</wd-form>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 输入框绑定值 | `string \\| number` | `''` |\n| type | 输入框类型，可选值为 `text`、`number`、`digit`、`idcard`、`safe-password`、`nickname`、`tel` | `InputType` | `text` |\n| placeholder | 占位文本 | `string` | `请输入...` |\n| placeholder-style | placeholder 样式，目前支持 `color`、`font-size`、`font-weight` | `string` | - |\n| placeholder-class | placeholder 样式类 | `string` | `''` |\n| maxlength | 最大输入长度 | `number` | 支付宝小程序无默认值，其余平台为 `-1` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| readonly | 是否只读 | `boolean` | `false` |\n| clearable | 是否显示清空按钮 | `boolean` | `false` |\n| clear-trigger | 清空按钮显示时机，可选值为 `focus`、`always` | `InputClearTrigger` | `always` |\n| focus-when-clear | 点击清空按钮后是否自动聚焦 | `boolean` | `true` |\n| show-password | 是否显示密码切换按钮 | `boolean` | `false` |\n| prefix-icon | 前置图标名称 | `string` | - |\n| suffix-icon | 后置图标名称 | `string` | - |\n| show-word-limit | 是否显示字数统计，需要同时设置 `maxlength` | `boolean` | `false` |\n| error | 是否展示错误状态 | `boolean` | `false` |\n| align-right | 输入内容是否右对齐 | `boolean` | `false` |\n| compact | 是否开启紧凑模式；未显式设置时，在 `wd-form-item` 中会自动启用 | `boolean` | - |\n| focus | 是否获取焦点 | `boolean` | `false` |\n| cursor-spacing | 光标与键盘的距离 | `number` | `0` |\n| cursor | 获取焦点时的光标位置 | `number` | `-1` |\n| selection-start | 光标起始位置，需与 `selection-end` 搭配使用 | `number` | `-1` |\n| selection-end | 光标结束位置，需与 `selection-start` 搭配使用 | `number` | `-1` |\n| adjust-position | 键盘弹起时是否自动上推页面 | `boolean` | `true` |\n| hold-keyboard | 聚焦时点击页面是否保持键盘不收起 | `boolean` | `false` |\n| confirm-type | 键盘右下角按钮文字，可选值为 `done`、`go`、`next`、`search`、`send` | `InputConfirmType` | `done` |\n| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起 | `boolean` | `false` |\n| always-embed | 是否强制 input 处于同层状态，仅微信小程序 iOS 生效 | `boolean` | `false` |\n| ignore-composition-event | 是否忽略文本合成系统事件处理；为 `false` 时会触发 composition 相关事件，且合成期间会触发 `input` | `boolean` | `true` |\n| inputmode | 输入模式提示，可选值为 `none`、`text`、`decimal`、`numeric`、`tel`、`search`、`email`、`url` | `InputMode` | `text` |\n| enable-native | 支付宝小程序下是否启用原生输入框，设为 `false` 可避免弹起键盘后内容上移 | `boolean` | `true` |\n| custom-input-class | 输入框自定义类名 | `string` | `''` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n### InputMode 可选值\n\n`inputmode` 为 HTML 规范后期扩展能力，在符合条件的高版本 WebView 中可用于 uni-app 的 Web 与 App-Vue 平台，详见 [inputmode](https://uniapp.dcloud.net.cn/component/input.html#inputmode)。\n\n| 值 | 说明 |\n| --- | --- |\n| none | 不弹出虚拟键盘 |\n| text | 标准文本输入键盘 |\n| decimal | 小数输入键盘 |\n| numeric | 纯数字输入键盘 |\n| tel | 电话输入键盘 |\n| search | 搜索输入优化键盘 |\n| email | 邮箱输入优化键盘 |\n| url | URL 输入优化键盘 |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| input | 输入时触发 | `{ value, cursor, keyCode }` |\n| focus | 聚焦时触发 | `{ value, height }` |\n| blur | 失焦时触发 | `{ value }` |\n| clear | 点击清空按钮时触发 | - |\n| confirm | 点击键盘完成按钮时触发 | `{ value }` |\n| keyboardheightchange | 键盘高度变化时触发 | `{ height, duration }` |\n| clickprefixicon | 点击前置图标时触发 | - |\n| clicksuffixicon | 点击后置图标时触发 | - |\n| click | 点击组件根节点时触发 | `event: MouseEvent` |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| prefix | 自定义前置内容 |\n| suffix | 自定义后置内容 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-input-class | 输入框样式类 |\n",
|
|
8034
8031
|
"props": [
|
|
8035
8032
|
{
|
|
@@ -8362,7 +8359,7 @@
|
|
|
8362
8359
|
},
|
|
8363
8360
|
{
|
|
8364
8361
|
"name": "--wot-input-count-line-height",
|
|
8365
|
-
"defaultValue": "$typography-body-line
|
|
8362
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
8366
8363
|
"description": "输入框字数统计行高"
|
|
8367
8364
|
},
|
|
8368
8365
|
{
|
|
@@ -8465,7 +8462,7 @@
|
|
|
8465
8462
|
"category": "未分类",
|
|
8466
8463
|
"description": "由增加按钮、减少按钮和输入框组成，用于在一定范围内输入或调整数字。",
|
|
8467
8464
|
"descriptionZh": "由增加按钮、减少按钮和输入框组成，用于在一定范围内输入或调整数字。",
|
|
8468
|
-
"since": "2.0.
|
|
8465
|
+
"since": "2.0.4",
|
|
8469
8466
|
"doc": "# InputNumber 计数器\n\n由增加按钮、减少按钮和输入框组成，用于在一定范围内输入或调整数字。\n\n## 组件类型\n\n### 基本用法\n\n通过 `v-model` 绑定输入值，通过 `change` 事件监听数值变化。\n\n```html\n<wd-input-number v-model=\"value\" @change=\"handleChange\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref<number>(1)\n\nfunction handleChange({ value }) {\n console.log(value)\n}\n```\n\n## 组件状态\n\n### 禁用\n\n设置 `disabled` 后，按钮和输入框都不可操作。\n\n```html\n<wd-input-number v-model=\"value\" disabled />\n```\n\n### 禁用输入框\n\n设置 `disable-input` 后，仅允许通过按钮调整数值。\n\n```html\n<wd-input-number v-model=\"value\" disable-input @change=\"handleChange\" />\n```\n\n### 禁用减号按钮\n\n可以单独禁用减号按钮。\n\n```html\n<wd-input-number v-model=\"value\" disable-minus @change=\"handleChange\" />\n```\n\n### 禁用加号按钮\n\n可以单独禁用加号按钮。\n\n```html\n<wd-input-number v-model=\"value\" disable-plus @change=\"handleChange\" />\n```\n\n## 组件变体\n\n### 主题样式\n\n通过 `theme` 切换不同视觉风格，可选值为 `default`、`primary`、`outline-split`、`outline`。\n\n```html\n<wd-input-number v-model=\"value1\" theme=\"default\" />\n<wd-input-number v-model=\"value2\" theme=\"primary\" />\n<wd-input-number v-model=\"value3\" theme=\"outline-split\" />\n<wd-input-number v-model=\"value4\" theme=\"outline\" />\n```\n\n### 圆角样式\n\n设置 `round` 后，可将按钮显示为圆角样式。\n\n```html\n<wd-input-number v-model=\"value\" round theme=\"primary\" />\n```\n\n## 组件样式\n\n### 设置步长\n\n设置 `step` 后，每次增减都会按对应步长变化。\n\n```html\n<wd-input-number v-model=\"value\" :step=\"2\" @change=\"handleChange\" />\n```\n\n### 设置最小值与最大值\n\n通过 `min` 和 `max` 控制可输入范围。\n\n```html\n<wd-input-number v-model=\"value\" :min=\"3\" :max=\"10\" @change=\"handleChange\" />\n```\n\n### 设置小数精度\n\n通过 `precision` 控制结果精度。\n\n```html\n<wd-input-number v-model=\"value\" :precision=\"1\" :step=\"0.1\" @change=\"handleChange\" />\n```\n\n### 严格步进\n\n设置 `step-strictly` 后，输入值会在变更完成时修正为 `step` 的倍数。\n\n```html\n<wd-input-number v-model=\"value\" step-strictly :step=\"2\" @change=\"handleChange\" />\n```\n\n### 严格步进与边界限制\n\n在同时设置 `step-strictly`、`min`、`max` 时，组件会自动修正到合法区间内最接近的步进值。\n\n```html\n<wd-input-number v-model=\"value\" step-strictly :step=\"2\" :min=\"3\" :max=\"15\" @change=\"handleChange\" />\n```\n\n### 修改输入框宽度\n\n通过 `input-width` 设置输入框宽度，支持数字和带单位字符串。\n\n```html\n<wd-input-number v-model=\"value\" input-width=\"70px\" @change=\"handleChange\" />\n```\n\n## 特殊用法\n\n### 无输入框\n\n设置 `without-input` 后，仅展示加减按钮。\n\n```html\n<wd-input-number v-model=\"value\" without-input @change=\"handleChange\" />\n```\n\n### 允许空值\n\n设置 `allow-null` 后，输入框允许为空，可配合 `placeholder` 使用。\n\n```html\n<wd-input-number v-model=\"value\" allow-null placeholder=\"不限\" input-width=\"70px\" @change=\"handleChange\" />\n```\n\n```typescript\nconst value = ref<number | string>('')\n```\n\n### 非允许空值但可临时删除\n\n当 `allow-null` 为 `false` 时，输入框可以被临时清空，但在失焦后会自动修正回合法值。\n\n```html\n<wd-input-number v-model=\"value\" :allow-null=\"false\" :min=\"1\" @change=\"handleChange\" />\n```\n\n### 键盘弹起不上推页面\n\n设置 `adjust-position=\"false\"` 后，键盘弹起时不自动上推页面。\n\n```html\n<wd-input-number v-model=\"value\" :adjust-position=\"false\" @change=\"handleChange\" />\n```\n\n### 非立即更新模式\n\n设置 `immediate-change=\"false\"` 后，输入框内容变化时不会立即触发 `change`，仅在失焦或点击按钮时触发。\n\n```html\n<wd-input-number v-model=\"value1\" :immediate-change=\"true\" @change=\"handleChange\" />\n<wd-input-number v-model=\"value2\" :immediate-change=\"false\" @change=\"handleChange\" />\n```\n\n### 初始化时自动修正\n\n设置 `update-on-init` 控制组件初始化时是否将值修正为符合规则的结果。\n\n```html\n<wd-input-number v-model=\"value1\" :update-on-init=\"true\" :min=\"3\" :max=\"15\" :step=\"2\" step-strictly @change=\"handleChange\" />\n<wd-input-number v-model=\"value2\" :update-on-init=\"false\" :min=\"3\" :max=\"15\" :step=\"2\" step-strictly @change=\"handleChange\" />\n```\n\n### 异步变更\n\n通过 `before-change` 可以在数值变化前进行校验和拦截。\n\n```html\n<wd-input-number v-model=\"value\" :before-change=\"beforeChange\" />\n```\n\n```typescript\nimport { ref } from 'vue'\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { InputNumberBeforeChange } from '@/uni_modules/wot-ui/components/wd-input-number/types'\n\nconst { loading, close } = useToast()\nconst value = ref<number>(1)\n\nconst beforeChange: InputNumberBeforeChange = (value) => {\n loading({ msg: `正在更新到${value}...` })\n return new Promise((resolve) => {\n setTimeout(() => {\n close()\n resolve(true)\n }, 500)\n })\n}\n```\n\n### 长按加减\n\n设置 `long-press` 后，支持长按按钮连续增减。\n\n```html\n<wd-input-number v-model=\"value\" long-press @change=\"handleChange\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 绑定值 | `number \\| string` | - |\n| min | 最小值 | `number` | `1` |\n| max | 最大值 | `number` | `Number.MAX_SAFE_INTEGER` |\n| step | 步进值 | `number` | `1` |\n| step-strictly | 是否严格按步进值递增或递减 | `boolean` | `false` |\n| precision | 数值精度 | `number \\| string` | `0` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| disable-input | 是否禁用输入框 | `boolean` | `false` |\n| disable-minus | 是否禁用减号按钮 | `boolean` | `false` |\n| disable-plus | 是否禁用加号按钮 | `boolean` | `false` |\n| without-input | 是否不显示输入框 | `boolean` | `false` |\n| input-width | 输入框宽度，支持数字和带单位字符串 | `number \\| string` | - |\n| allow-null | 是否允许输入值为空，设置为 `true` 后允许传入空字符串 | `boolean` | `false` |\n| placeholder | 输入框占位文本 | `string` | `''` |\n| adjust-position | 键盘弹起时是否自动上推页面 | `boolean` | `true` |\n| before-change | 数值变更前触发，返回 `false` 可阻止值更新，支持返回 `Promise<boolean>` | `(value: number \\| string) => boolean \\| Promise<boolean>` | - |\n| long-press | 是否允许长按进行加减 | `boolean` | `false` |\n| immediate-change | 是否立即响应输入变化，`false` 时仅在失焦或按钮点击时更新 | `boolean` | `true` |\n| update-on-init | 是否在初始化时更新 `v-model` 为修正后的值 | `boolean` | `true` |\n| input-type | 输入框类型，可选值为 `number`、`digit` | `'number' \\| 'digit'` | `digit` |\n| theme | 主题风格，可选值为 `default`、`outline`、`outline-split`、`primary` | `InputNumberTheme` | `default` |\n| round | 是否启用圆角样式 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 值修改时触发 | `{ value }` |\n| focus | 输入框获取焦点时触发 | `{ value, height }` |\n| blur | 输入框失去焦点时触发 | `{ value }` |\n| update:modelValue | `v-model` 更新时触发 | `number \\| string` |",
|
|
8470
8467
|
"props": [
|
|
8471
8468
|
{
|
|
@@ -8659,7 +8656,7 @@
|
|
|
8659
8656
|
},
|
|
8660
8657
|
{
|
|
8661
8658
|
"name": "--wot-input-number-action-border-radius-full",
|
|
8662
|
-
"defaultValue": "$radius-
|
|
8659
|
+
"defaultValue": "$radius-full",
|
|
8663
8660
|
"description": "圆角模式操作按钮圆角"
|
|
8664
8661
|
},
|
|
8665
8662
|
{
|
|
@@ -8889,7 +8886,7 @@
|
|
|
8889
8886
|
"category": "未分类",
|
|
8890
8887
|
"description": "虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。",
|
|
8891
8888
|
"descriptionZh": "虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。",
|
|
8892
|
-
"since": "2.0.
|
|
8889
|
+
"since": "2.0.4",
|
|
8893
8890
|
"doc": "# Keyboard 虚拟键盘\n\n虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。\n\n## 基本用法\n\n可以通过 `v-model:visible` 控制键盘是否展示。\n\n```html\n<wd-cell title=\"默认键盘\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" @input=\"onInput\" @delete=\"onDelete\"></wd-keyboard>\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n## 组件类型\n\n### 带右侧栏的键盘\n\n将 `mode` 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景。\n\n```html\n<wd-cell title=\"带右侧栏的键盘\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" mode=\"custom\" extra-key=\".\" close-text=\"完成\" @input=\"onInput\" @delete=\"onDelete\"></wd-keyboard>\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 身份证键盘\n\n通过 `extra-key` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extra-key` 设置为 `X`。\n\n```html\n<wd-cell title=\"身份证键盘\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" extra-key=\"X\" close-text=\"完成\" @input=\"onInput\" @delete=\"onDelete\" />\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 车牌号键盘\n\n将 `mode` 属性设置为 `car` 来展示车牌号键盘，常用于输入车牌号的场景。\n\n```html\n<wd-cell title=\"车牌号键盘\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" mode=\"car\" @input=\"onInput\" @delete=\"onDelete\"></wd-keyboard>\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n## 组件变体\n\n### 车牌号键盘语言控制\n\n通过 `car-lang` 属性可以控制车牌键盘的语言模式，支持中文省份（`zh`）和英文字母（`en`）。通过 `auto-switch-lang` 属性可以控制是否自动切换语言。\n\n```html\n<!-- 受控模式：手动控制语言切换 -->\n<wd-cell title=\"车牌号键盘（受控）\" :value=\"value\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model=\"value\" v-model:visible=\"visible\" v-model:car-lang=\"lang\" mode=\"car\" @input=\"onInput\" @delete=\"onDelete\"></wd-keyboard>\n\n<!-- 非受控模式：启用自动切换 -->\n<wd-cell title=\"车牌号键盘（非受控）\" :value=\"value2\" is-link @click=\"showKeyBoard2\" />\n\n<wd-keyboard v-model=\"value2\" v-model:visible=\"visible2\" mode=\"car\" auto-switch-lang @input=\"onInput\" @delete=\"onDelete\"></wd-keyboard>\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\nconst visible2 = ref<boolean>(false)\nconst value = ref<string>('')\nconst value2 = ref<string>('')\nconst lang = ref<'zh' | 'en'>('zh')\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nfunction showKeyBoard2() {\n visible2.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 带标题的键盘\n\n通过 `title` 属性可以设置键盘标题。\n\n```html\n<wd-cell title=\"带标题的键盘\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" title=\"输入密码\" extra-key=\".\" close-text=\"完成\" @input=\"onInput\" @delete=\"onDelete\" />\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 使用 slot 自定义标题\n\n```html\n<wd-cell title=\"使用 slot 自定义标题\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" extra-key=\".\" close-text=\"完成\" @input=\"onInput\" @delete=\"onDelete\">\n <template #title>\n <text style=\"color: red\">自定义标题</text>\n </template>\n</wd-keyboard>\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 多个额外按键\n\n当 `mode` 为 `custom` 时，支持以数组的形式配置两个 `extra-key`。\n\n```html\n<wd-cell title=\"多个额外按键\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" mode=\"custom\" :extra-key=\"['00', '.']\" close-text=\"完成\" @input=\"onInput\" @delete=\"onDelete\" />\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 随机数字键盘\n\n通过 `random-key-order` 属性可以随机排序数字键盘，常用于安全等级较高的场景。\n\n```html\n<wd-cell title=\"随机数字键盘\" is-link @click=\"showKeyBoard\" />\n\n<wd-keyboard v-model:visible=\"visible\" random-key-order @input=\"onInput\" @delete=\"onDelete\" />\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n## 特殊用法\n\n### 双向绑定\n\n可以通过 `v-model` 绑定键盘当前输入值，并通过 `maxlength` 属性来限制输入长度。\n\n```html\n<wd-cell title=\"双向绑定\" :value=\"value1\" is-link @click=\"showKeyBoard\" />\n<wd-keyboard\n v-model=\"value1\"\n :maxlength=\"6\"\n v-model:visible=\"visible\"\n title=\"键盘标题\"\n extra-key=\".\"\n close-text=\"完成\"\n @input=\"onInput\"\n @delete=\"onDelete\"\n></wd-keyboard>\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\nconst value1 = ref<string>('')\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n### 展示蒙层遮罩\n\n`hideOnClickOutside`控制键盘弹窗是否有遮罩，通过`modal`控制遮罩是否为透明。\n\n::: tip 提示\n当前`modal`仅控制遮罩是否为透明，`hideOnClickOutside`控制弹窗是否有遮罩，当存在遮罩时，点击遮罩就可以关闭键盘，但是键盘展开时必须点击遮罩关闭当前键盘后才可以再点击别的按钮。也可以关闭`hideOnClickOutside`，手动控制键盘是否展示来实现点击外部时收起键盘，这样更灵活。\n:::\n\n```html\n<wd-cell title=\"双向绑定\" :value=\"value1\" is-link @click=\"showKeyBoard\" />\n<wd-keyboard :modal=\"true\" :hide-on-click-outside=\"true\" v-model:visible=\"visible\" @input=\"onInput\" @delete=\"onDelete\" />\n```\n\n```ts\nconst { show: showToast } = useToast()\nconst visible = ref<boolean>(false)\nconst value1 = ref<string>('')\n\nfunction showKeyBoard() {\n visible.value = true\n}\n\nconst onInput = (value) => showToast(`${value}`)\nconst onDelete = () => showToast('删除')\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model:visible | 是否展开 | `boolean` | `false` |\n| v-model | 当前输入值 | `string` | `''` |\n| title | 键盘标题 | `string` | - |\n| mode | 键盘模式，可选值为 `default`、`custom`、`car` | `KeyboardMode` | `default` |\n| z-index | 层级 | `number` | `100` |\n| maxlength | 最大输入长度 | `number` | `Infinity` |\n| show-delete-key | 是否显示删除键；仅对默认数字键盘与右侧栏键盘生效 | `boolean` | `true` |\n| random-key-order | 是否随机排序数字按键 | `boolean` | `false` |\n| close-text | 关闭按钮文本；在默认/车牌模式中显示在头部，在 `custom` 模式中显示在右侧大按钮上 | `string` | - |\n| delete-text | 删除按钮文本 | `string` | - |\n| close-button-loading | 关闭按钮是否显示加载状态 | `boolean` | `false` |\n| modal | 是否显示蒙层；设为 `false` 时蒙层透明 | `boolean` | `false` |\n| hide-on-click-outside | 是否允许点击外部关闭键盘，同时控制是否渲染遮罩 | `boolean` | `true` |\n| lock-scroll | 是否锁定背景滚动 | `boolean` | `true` |\n| safe-area-inset-bottom | 是否适配底部安全区 | `boolean` | `true` |\n| extra-key | 额外按键，可传单个字符串或字符串数组；`custom` 模式下支持两个额外按键 | `string \\| string[]` | - |\n| root-portal | 是否从页面中脱离出来，用于解决 fixed 失效问题 | `boolean` | `false` |\n| v-model:car-lang | 车牌键盘语言模式，当 `mode=car` 时生效，可选值为 `zh`、`en` | `CarKeyboardLang` | - |\n| auto-switch-lang | 是否自动切换车牌键盘语言，当 `mode=car` 且 `car-lang` 为非受控状态时生效 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| title | 自定义标题内容 |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| input | 点击可输入按键时触发 | `key: string` |\n| delete | 点击删除键时触发 | - |\n| close | 点击关闭按钮或遮罩关闭时触发 | - |\n| update:visible | 键盘显隐状态变化时触发 | `visible: boolean` |\n| update:modelValue | 当前输入值变化时触发 | `value: string` |\n| update:carLang | 车牌键盘语言变化时触发 | `lang: 'zh' \\| 'en'` |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点样式 |\n",
|
|
8894
8891
|
"props": [
|
|
8895
8892
|
{
|
|
@@ -9179,7 +9176,7 @@
|
|
|
9179
9176
|
"category": "未分类",
|
|
9180
9177
|
"description": "用于快速进行布局。",
|
|
9181
9178
|
"descriptionZh": "用于快速进行布局。",
|
|
9182
|
-
"since": "2.0.
|
|
9179
|
+
"since": "2.0.4",
|
|
9183
9180
|
"doc": "# Layout 布局\n\n用于快速进行布局。\n\n## 布局能力\n\n### 基础用法\n\n`Layout` 组件提供了 `24列` 栅格，通过在 `wd-col` 上设置 `span` 属性，通过计算当前内容所占百分比进行分栏。\n\n注意：分栏布局仅提供布局，即元素宽度，内部样式用户可根据需要通过 `custom-class` 或修改内部标签来自行定义样式。\n\n::: code-group\n\n```html\n<wd-row>\n <wd-col :span=\"24\"><view class=\"bg-dark1\">span: 24</view></wd-col>\n</wd-row>\n<wd-row>\n <wd-col :span=\"12\"><view class=\"bg-dark\">span: 12</view></wd-col>\n <wd-col :span=\"12\"><view class=\"bg-light\">span: 12</view></wd-col>\n</wd-row>\n<wd-row>\n <wd-col :span=\"8\"><view class=\"bg-dark\">span: 8</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-light\">span: 8</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-dark\">span: 8</view></wd-col>\n</wd-row>\n<wd-row>\n <wd-col :span=\"6\"><view class=\"bg-dark\">span: 6</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-light\">span: 6</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-dark\">span: 6</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-light\">span: 6</view></wd-col>\n</wd-row>\n```\n\n```scss\n.bg-dark1,\n.bg-dark,\n.bg-light {\n border-radius: 4px;\n min-height: 30px;\n text-align: center;\n line-height: 30px;\n font-size: 12px;\n margin-bottom: 10px;\n color: rgba(0, 0, 0, 0.45);\n}\n.bg-dark1 {\n background: #99a9bf;\n color: #fff;\n}\n.bg-dark {\n background: #d3dce6;\n}\n.bg-light {\n background: #e5e9f2;\n}\n```\n\n:::\n\n### 分栏偏移\n\n`offset` 属性可以设置分栏的偏移量，计算方式以及偏移大小与 `span` 相同。\n\n```html\n<wd-row>\n <wd-col :span=\"4\"><view class=\"bg-dark\">span: 4</view></wd-col>\n <wd-col :span=\"8\" :offset=\"4\"><view class=\"bg-light\">span: 8 offset: 4</view></wd-col>\n</wd-row>\n<wd-row>\n <wd-col :span=\"8\" :offset=\"4\"><view class=\"bg-dark\">span: 8 offset: 4</view></wd-col>\n <wd-col :span=\"8\" :offset=\"4\"><view class=\"bg-light\">span: 8 offset: 4</view></wd-col>\n</wd-row>\n```\n\n### 分栏间隔\n\n通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。\n\n```html\n<wd-row :gutter=\"20\">\n <wd-col :span=\"8\"><view class=\"bg-dark\">span: 8</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-light\">span: 8</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-dark\">span: 8</view></wd-col>\n</wd-row>\n```\n\n### Justify 对齐\n\n通过 `justify` 属性可以设置主轴对齐方式，可选值为 `start`、`center`、`end`、`space-between`、`space-around`、`space-evenly`。\n\n```html\n<wd-row justify=\"center\">\n <wd-col :span=\"6\"><view class=\"bg-dark\">center</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-light\">center</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-dark\">center</view></wd-col>\n</wd-row>\n<wd-row justify=\"end\">\n <wd-col :span=\"6\"><view class=\"bg-dark\">end</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-light\">end</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-dark\">end</view></wd-col>\n</wd-row>\n<wd-row justify=\"space-between\">\n <wd-col :span=\"6\"><view class=\"bg-dark\">between</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-light\">between</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-dark\">between</view></wd-col>\n</wd-row>\n<wd-row justify=\"space-around\">\n <wd-col :span=\"6\"><view class=\"bg-dark\">around</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-light\">around</view></wd-col>\n <wd-col :span=\"6\"><view class=\"bg-dark\">around</view></wd-col>\n</wd-row>\n```\n\n### Align 对齐\n\n通过 `align` 属性可以设置交叉轴对齐方式，可选值为 `top`、`middle`、`bottom`。\n\n```html\n<wd-row align=\"middle\">\n <wd-col :span=\"8\"><view class=\"bg-dark\" style=\"height: 60px; line-height: 60px\">middle</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-light\" style=\"height: 30px; line-height: 30px\">middle</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-dark\" style=\"height: 50px; line-height: 50px\">middle</view></wd-col>\n</wd-row>\n<wd-row align=\"bottom\">\n <wd-col :span=\"8\"><view class=\"bg-dark\" style=\"height: 60px; line-height: 60px\">bottom</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-light\" style=\"height: 30px; line-height: 30px\">bottom</view></wd-col>\n <wd-col :span=\"8\"><view class=\"bg-dark\" style=\"height: 50px; line-height: 50px\">bottom</view></wd-col>\n</wd-row>\n```\n\n## Row Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| gutter | 列元素之间的间距（单位为 px） | `number` | `0` |\n| justify | 主轴对齐方式，可选值为 `start`、`center`、`end`、`space-between`、`space-around`、`space-evenly` | `string` | `start` |\n| align | 交叉轴对齐方式，可选值为 `top`、`middle`、`bottom` | `string` | `top` |\n| custom-class | 根节点样式类名 | `string` | - |\n| custom-style | 根节点样式 | `string` | - |\n\n## Col Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| span | 列元素宽度（栅格占据的列数，共 24 列） | `number` | `24` |\n| offset | 列元素偏移距离（栅格左侧的间隔列数） | `number` | `0` |\n| custom-class | 根节点样式类名 | `string` | - |\n| custom-style | 根节点样式 | `string` | - |\n\n## Row Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 行内容 |\n\n## Col Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 列内容 |\n",
|
|
9184
9181
|
"props": [
|
|
9185
9182
|
{
|
|
@@ -9261,7 +9258,7 @@
|
|
|
9261
9258
|
"category": "未分类",
|
|
9262
9259
|
"description": "加载动画，用于表示加载中的过渡状态。",
|
|
9263
9260
|
"descriptionZh": "加载动画，用于表示加载中的过渡状态。",
|
|
9264
|
-
"since": "2.0.
|
|
9261
|
+
"since": "2.0.4",
|
|
9265
9262
|
"doc": "# Loading 加载指示器\n\n加载动画，用于表示加载中的过渡状态。\n\n## 组件类型\n\n### 类型\n\n通过 `type` 属性设置指示器类型，可选值为 `circular`、`spinner`、`dots`、`wave`，默认为 `circular`。\n\n```html\n<wd-loading />\n<wd-loading type=\"spinner\" />\n<wd-loading type=\"dots\" />\n<wd-loading type=\"wave\" />\n```\n\n## 组件样式\n\n### 颜色\n\n通过 `color` 属性修改指示器的颜色。\n\n```html\n<wd-loading color=\"#fa34aa\" />\n<wd-loading type=\"spinner\" color=\"#fa34aa\" />\n<wd-loading type=\"dots\" color=\"#fa34aa\" />\n<wd-loading type=\"wave\" color=\"#fa34aa\" />\n```\n\n### 大小\n\n通过 `size` 属性设置指示器的大小，支持 `number` / `string` 类型。\n\n```html\n<wd-loading :size=\"20\" type=\"wave\" />\n<wd-loading :size=\"30\" type=\"wave\" />\n<wd-loading size=\"50px\" type=\"wave\" />\n```\n\n## 内容形态\n\n### 显示文字\n\n通过 `text` 属性或默认插槽设置加载文字。\n\n```html\n<wd-loading text=\"加载中...\"></wd-loading>\n<wd-loading>加载中...</wd-loading>\n<wd-loading type=\"spinner\">加载中...</wd-loading>\n<wd-loading type=\"wave\">加载中...</wd-loading>\n```\n\n### 水平方向\n\n通过 `direction` 属性设置文字与指示器的排列方向，可选值为 `vertical`、`horizontal`，默认为 `vertical`。\n\n```html\n<wd-loading direction=\"horizontal\" text=\"加载中...\"></wd-loading>\n<wd-loading direction=\"horizontal\">加载中...</wd-loading>\n<wd-loading direction=\"horizontal\" type=\"spinner\">加载中...</wd-loading>\n<wd-loading direction=\"horizontal\" type=\"wave\">加载中...</wd-loading>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 加载指示器类型，可选值为 `circular`、`spinner`、`dots`、`wave` | `LoadingType` | `circular` |\n| color | 设置加载指示器颜色 | `string` | - |\n| size | 设置加载指示器大小 | `number \\| string` | - |\n| text | 加载指示器文字 | `string` | - |\n| direction | 排列方向，可选值为 `vertical`、`horizontal` | `LoadingDirection` | `vertical` |\n| inherit-color | 是否继承父元素颜色 | `boolean` | `false` |\n| custom-class | 根节点样式类名 | `string` | - |\n| custom-style | 根节点样式 | `string` | - |\n| custom-spinner-class | 自定义加载指示器样式类 | `string` | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 加载文字内容 |\n",
|
|
9266
9263
|
"props": [
|
|
9267
9264
|
{
|
|
@@ -9369,7 +9366,7 @@
|
|
|
9369
9366
|
},
|
|
9370
9367
|
{
|
|
9371
9368
|
"name": "--wot-loading-spinner-circle-radius",
|
|
9372
|
-
"defaultValue": "$radius-
|
|
9369
|
+
"defaultValue": "$radius-full",
|
|
9373
9370
|
"description": "圆形加载器圆角"
|
|
9374
9371
|
},
|
|
9375
9372
|
{
|
|
@@ -9389,7 +9386,7 @@
|
|
|
9389
9386
|
},
|
|
9390
9387
|
{
|
|
9391
9388
|
"name": "--wot-loading-spinner-dot-radius",
|
|
9392
|
-
"defaultValue": "$radius-
|
|
9389
|
+
"defaultValue": "$radius-full",
|
|
9393
9390
|
"description": "条状点圆角"
|
|
9394
9391
|
},
|
|
9395
9392
|
{
|
|
@@ -9399,7 +9396,7 @@
|
|
|
9399
9396
|
},
|
|
9400
9397
|
{
|
|
9401
9398
|
"name": "--wot-loading-spinner-dots-dot-radius",
|
|
9402
|
-
"defaultValue": "$radius-
|
|
9399
|
+
"defaultValue": "$radius-full",
|
|
9403
9400
|
"description": "点状加载器单点圆角"
|
|
9404
9401
|
},
|
|
9405
9402
|
{
|
|
@@ -9419,7 +9416,7 @@
|
|
|
9419
9416
|
},
|
|
9420
9417
|
{
|
|
9421
9418
|
"name": "--wot-loading-wave-bar-radius",
|
|
9422
|
-
"defaultValue": "$radius-
|
|
9419
|
+
"defaultValue": "$radius-full",
|
|
9423
9420
|
"description": "波形加载器单柱圆角"
|
|
9424
9421
|
},
|
|
9425
9422
|
{
|
|
@@ -9444,7 +9441,7 @@
|
|
|
9444
9441
|
},
|
|
9445
9442
|
{
|
|
9446
9443
|
"name": "--wot-loading-text-line-height",
|
|
9447
|
-
"defaultValue": "$typography-body-line
|
|
9444
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
9448
9445
|
"description": "文本行高"
|
|
9449
9446
|
}
|
|
9450
9447
|
],
|
|
@@ -9488,7 +9485,7 @@
|
|
|
9488
9485
|
"category": "未分类",
|
|
9489
9486
|
"description": "用于在列表底部展示加载状态。",
|
|
9490
9487
|
"descriptionZh": "用于在列表底部展示加载状态。",
|
|
9491
|
-
"since": "2.0.
|
|
9488
|
+
"since": "2.0.4",
|
|
9492
9489
|
"doc": "# loadmore 加载更多\n\n用于在列表底部展示加载状态。\n\n## 基本用法\n\n在需要进行加载的列表的底部引入该组件即可。当滑动到列表底部时，通过设置`state`展示不同的文案。\n\n```html\n<wd-loadmore custom-class=\"loadmore\" state=\"loading\" />\n\n<wd-loadmore custom-class=\"loadmore\" state=\"finished\" />\n\n<wd-loadmore custom-class=\"loadmore\" state=\"error\" />\n```\n\n```scss\n:deep(.loadmore) {\n background-color: #f4f4f4;\n margin: 20px 0;\n}\n```\n\n## 自定义文案\n\n通过设置`loading-text`、`finished-text`、`error-text`配合`state`展示不同状态时的文案\n\n```html\n<wd-loadmore custom-class=\"loadmore\" state=\"loading\" loading-text=\"自定义加载文案\" />\n\n<wd-loadmore custom-class=\"loadmore\" state=\"finished\" finished-text=\"自定义完成文案\" />\n\n<wd-loadmore custom-class=\"loadmore\" state=\"error\" error-text=\"自定义错误文案\" />\n```\n\n## 点击继续加载\n\n当 `state` 为 `error` 时，点击组件区域会触发 `reload` 事件。\n\n```html\n<wd-loadmore custom-class=\"loadmore\" state=\"error\" @reload=\"loadmore\" />\n```\n\n## 应用实现\n\n配合`onReachBottom`事件实现滚动到底部加载更多\n\n```html\n<view class=\"container\">\n <view v-for=\"index in num\" :key=\"index\" class=\"list-item\">\n <image src=\"https://img10.360buyimg.com/jmadvertisement/jfs/t1/70325/36/14954/36690/5dcd3e3bEee5006e0/aed1ccf6d5ffc764.png\" />\n <view class=\"right\">这是一条测试{{ index + 1 }}</view>\n </view>\n <wd-loadmore :state=\"state\" @reload=\"loadmore\" />\n</view>\n```\n\n```typescript\nimport { ref } from 'vue'\nimport { onLoad, onReachBottom } from '@dcloudio/uni-app'\n\n\nconst state = ref<string>('loading')\nconst num = ref<number>(0)\nconst max = ref<number>(60)\n\nonReachBottom(() => {\n if (num.value === 45) {\n state.value = 'error'\n } else if (num.value < max.value) {\n loadmore()\n } else if (num.value === max.value) {\n state.value = 'finished'\n }\n})\n\nonLoad(() => {\n loadmore()\n})\n\nfunction loadmore() {\n setTimeout(() => {\n num.value = num.value + 15\n state.value = 'loading'\n }, 200)\n}\n```\n\n```scss\n.list-item {\n position: relative;\n display: flex;\n padding: 10px 15px;\n background: #fff;\n color: #464646;\n}\n\n.list-item:after {\n position: absolute;\n display: block;\n content: '';\n height: 1px;\n left: 0;\n width: 100%;\n bottom: 0;\n background: #eee;\n transform: scaleY(0.5);\n}\nimage {\n display: block;\n width: 120px;\n height: 78px;\n margin-right: 15px;\n}\n.right {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| state | 加载状态，可选值为 `loading`、`finished`、`error` | `LoadMoreState` | - |\n| loading-text | 加载状态文案 | `string` | 国际化文案“正在努力加载中...” |\n| finished-text | 加载完成文案 | `string` | 国际化文案“已加载完毕” |\n| error-text | 加载失败文案；“点击重试”为组件内独立提示文案，不包含在该属性默认值中 | `string` | 国际化文案“加载失败” |\n| loading-props | 内部 `wd-loading` 的属性配置，类型参见下方 `LoadingProps` | `Partial<LoadingProps>` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n#### LoadingProps\n\n参见 [LoadingProps](/component/loading.html#attributes)。传入的 `customClass` 会自动追加 `wd-loadmore__loading` 类名。\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| loading | 自定义加载中内容 |\n| finished | 自定义加载完成内容 |\n| error | 自定义加载失败内容 |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| reload | `state` 为 `error` 时，点击组件触发 | - |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n",
|
|
9493
9490
|
"props": [
|
|
9494
9491
|
{
|
|
@@ -9578,7 +9575,7 @@
|
|
|
9578
9575
|
},
|
|
9579
9576
|
{
|
|
9580
9577
|
"name": "--wot-loadmore-line-height",
|
|
9581
|
-
"defaultValue": "$typography-body-line
|
|
9578
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
9582
9579
|
"description": "默认文字行高"
|
|
9583
9580
|
},
|
|
9584
9581
|
{
|
|
@@ -9603,7 +9600,7 @@
|
|
|
9603
9600
|
},
|
|
9604
9601
|
{
|
|
9605
9602
|
"name": "--wot-loadmore-refresh-line-height",
|
|
9606
|
-
"defaultValue": "$typography-body-line
|
|
9603
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
9607
9604
|
"description": "刷新图标行高"
|
|
9608
9605
|
},
|
|
9609
9606
|
{
|
|
@@ -9621,7 +9618,7 @@
|
|
|
9621
9618
|
"category": "未分类",
|
|
9622
9619
|
"description": "为页面提供导航功能，常用于页面顶部。",
|
|
9623
9620
|
"descriptionZh": "为页面提供导航功能，常用于页面顶部。",
|
|
9624
|
-
"since": "2.0.
|
|
9621
|
+
"since": "2.0.4",
|
|
9625
9622
|
"doc": "# Navbar 导航栏\n\n为页面提供导航功能，常用于页面顶部。\n\n::: tip 常见问题\n\n**右图标被小程序胶囊挡住？**\n\n在小程序平台开启自定义顶部导航时，右上角会固定显示胶囊，所以此时右侧插槽及选项是不建议使用。\n\n**如何设置为背景透明？**\n\n通过 `custom-style` 设置组件 `background-color` 为 `transparent`。\n\n```html\n<wd-navbar title=\"标题\" custom-style=\"background-color: transparent !important;\"></wd-navbar>\n```\n\n**组件会被 `video` 覆盖？**\n\n`video` 为原生组件，层级较高，目前无法遮盖，需要具体平台具体分析。\n:::\n\n## 组件类型\n\n### 基础用法\n\n通过 `title` 属性设置导航栏标题。\n\n```html\n<wd-navbar title=\"标题\"></wd-navbar>\n```\n\n### 返回上级\n\n在导航栏实现返回上级功能。\n\n::: code-group\n\n```html\n<wd-navbar title=\"标题\" left-text=\"返回\" left-arrow @click-left=\"handleClickLeft\"></wd-navbar>\n```\n\n```ts\nfunction handleClickLeft() {\n uni.navigateBack()\n}\n```\n\n:::\n\n### 右侧按钮\n\n在导航栏右侧添加可点击的按钮。\n\n::: code-group\n\n```html\n<wd-navbar title=\"标题\" left-text=\"返回\" left-arrow right-text=\"按钮\" @click-left=\"handleClickLeft\" @click-right=\"handleClickRight\"></wd-navbar>\n```\n\n```ts\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst { show: showToast } = useToast()\n\nfunction handleClickRight() {\n showToast('按钮')\n}\n```\n\n:::\n\n## 组件状态\n\n### 禁用按钮\n\n通过 `left-disabled` 或 `right-disabled` 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。\n\n```html\n<wd-navbar title=\"标题\" left-text=\"返回\" right-text=\"按钮\" left-arrow left-disabled right-disabled></wd-navbar>\n```\n\n## 组件样式\n\n### 固定在顶部\n\n通过 `fixed` 属性设置导航栏固定在页面顶部，通过 `placeholder` 在顶部生成占位空间，通过 `safeAreaInsetTop` 开启顶部安全区的适配。\n\n```html\n<wd-navbar fixed placeholder title=\"Navbar 导航栏\" left-arrow safeAreaInsetTop></wd-navbar>\n```\n\n## 内容形态\n\n### 使用插槽\n\n可以通过 `left` 和 `right` 插槽自定义导航栏两侧的内容。\n\n```html\n<wd-navbar title=\"标题\">\n <template #left>\n <wd-icon name=\"left\" size=\"24px\" class=\"wd-navbar__arrow\" />\n </template>\n <template #right>\n <wd-icon name=\"search-line\" size=\"18\" />\n </template>\n</wd-navbar>\n```\n\n### 胶囊样式\n\n通过 `capsule` 插槽和 `wd-navbar-capsule` 组件定制返回胶囊。\n\n::: code-group\n\n```html\n<wd-navbar title=\"标题\" left-text=\"返回\" right-text=\"设置\" left-arrow>\n <template #capsule>\n <wd-navbar-capsule @back=\"handleBack\" @back-home=\"handleBackHome\" />\n </template>\n</wd-navbar>\n```\n\n```ts\nfunction handleBack() {\n uni.navigateBack({})\n}\n\nfunction handleBackHome() {\n uni.reLaunch({ url: '/pages/index/Index' })\n}\n```\n\n:::\n\n### 带搜索栏\n\n通过 `title` 插槽自定义标题区域。\n\n::: code-group\n\n```html\n<wd-navbar left-text=\"返回\" right-text=\"设置\" left-arrow>\n <template #title>\n <view class=\"search-box\">\n <wd-search v-model=\"keyword\" hide-cancel placeholder-left></wd-search>\n </view>\n </template>\n</wd-navbar>\n```\n\n```scss\n.search-box {\n display: flex;\n height: 100%;\n align-items: center;\n --wot-search-padding: 0;\n --wot-search-side-padding: 0;\n :deep() {\n .wd-search {\n background: transparent;\n }\n }\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 标题文字 | `string` | - |\n| left-text | 左侧文案 | `string` | - |\n| right-text | 右侧文案 | `string` | - |\n| left-arrow | 是否显示左侧箭头 | `boolean` | `false` |\n| bordered | 是否显示下边框 | `boolean` | `false` |\n| fixed | 是否固定到顶部 | `boolean` | `false` |\n| placeholder | 固定在顶部时，在标签位置生成一个等高的占位元素 | `boolean` | `false` |\n| z-index | 导航栏 z-index | `number` | `10` |\n| safe-area-inset-top | 是否开启顶部安全区适配 | `boolean` | `false` |\n| left-disabled | 是否禁用左侧按钮，禁用时透明度降低，且无法点击 | `boolean` | `false` |\n| right-disabled | 是否禁用右侧按钮，禁用时透明度降低，且无法点击 | `boolean` | `false` |\n| custom-class | 根节点样式类名 | `string` | - |\n| custom-style | 根节点样式 | `string` | - |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click-left | 点击左侧按钮时触发 | - |\n| click-right | 点击右侧按钮时触发 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| capsule | 自定义胶囊（当存在胶囊时，left 不生效） |\n| left | 左侧内容 |\n| title | 标题内容 |\n| right | 右侧内容 |\n\n## NavbarCapsule Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| custom-class | 根节点样式类名 | `string` | - |\n| custom-style | 根节点样式 | `string` | - |\n\n## NavbarCapsule Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| back | 点击返回按钮时触发 | - |\n| back-home | 点击返回首页按钮时触发 | - |\n",
|
|
9626
9623
|
"props": [
|
|
9627
9624
|
{
|
|
@@ -9848,7 +9845,7 @@
|
|
|
9848
9845
|
"category": "未分类",
|
|
9849
9846
|
"description": "通知栏组件，用于在页面顶部展示通知提醒。",
|
|
9850
9847
|
"descriptionZh": "通知栏组件，用于在页面顶部展示通知提醒。",
|
|
9851
|
-
"since": "2.0.
|
|
9848
|
+
"since": "2.0.4",
|
|
9852
9849
|
"doc": "# NoticeBar 通知栏\n\n通知栏组件，用于在页面顶部展示通知提醒。\n\n## 组件类型\n\n### 基本用法\n\n设置 `text` 文本内容和 `prefix` 左侧图标。\n\n```html\n<wd-notice-bar text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\" prefix=\"warn-bold\" />\n```\n\n## 组件变体\n\n### 类型修改\n\n设置 `type` 可修改通知类型，通知类型共有三种 `info`|`warning`|`danger`，默认值为`warning`。\n\n```html\n<wd-notice-bar text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\" prefix=\"warn-bold\" custom-class=\"space\" />\n<wd-notice-bar text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\" prefix=\"check-outline\" type=\"info\" custom-class=\"space\" />\n<wd-notice-bar text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\" prefix=\"wifi-error\" type=\"danger\" />\n```\n\n```scss\n:deep(.space) {\n margin-bottom: 10px;\n}\n```\n\n### 可关闭的\n\n设置 `closable` 属性，使通知栏可以关闭。\n\n```html\n<wd-notice-bar text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\" closable />\n```\n\n## 内容形态\n\n### 禁止滚动\n\n设置 `scrollable` 为 `false` 可以关闭滚动效果，通知栏会保持静态展示。\n\n```html\n<wd-notice-bar text=\"欲买桂花同载酒，终不似，少年游\" :scrollable=\"false\" prefix=\"stop\" />\n```\n\n### 插槽演示\n\n未传 `prefix` 属性时，可以通过 `prefix` 插槽自定义左侧内容；`suffix` 插槽会覆盖默认的关闭图标区域。\n\n```html\n<wd-notice-bar :scrollable=\"false\">\n <template #prefix>\n <wd-icon class=\"prefix\" name=\"warn-bold\">占位符</wd-icon>\n </template>\n 通知被禁或时段内消息屏蔽可能造成消…\n <template #suffix>\n <div style=\"color: #4d80f0\">查看</div>\n </template>\n</wd-notice-bar>\n```\n\n```scss\n:deep(.prefix) {\n font-size: 18px;\n padding-right: 4px;\n width: 18px;\n height: 18px;\n}\n```\n\n### 多行展示\n\n设置 `wrapable` 属性为 `true` 且同时禁止滚动 `scrollable` 即可开启多行展示。\n\n```html\n<wd-notice-bar text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\" wrapable :scrollable=\"false\" />\n```\n\n## 组件样式\n\n### 自定义颜色\n\n设置 `color` 修改文字和图标颜色，设置 `background-color` 修改背景颜色。\n\n```html\n<wd-notice-bar\n text=\"这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息\"\n prefix=\"check-outline\"\n color=\"#34D19D\"\n background-color=\"#f0f9eb\"\n/>\n```\n\n## 特殊用法\n\n### 多文本轮播\n\n将一个`string[]`传递给`text`属性，即可开启多文本轮播，并且会在展示下一条文本时触发`next`事件，该事件接收一个`number`参数，代表的是当前展示的文本数组索引\n\n```html\n<wd-notice-bar :text=\"textArray\" prefix=\"check-outline\" @next=\"onNext\" />\n```\n\n```javascript\nimport { ref } from 'vue'\n\nconst textArray = ref([\n '欢迎使用 wot-ui 组件库',\n '该组件库基于uniapp ->Vue3, ts构建',\n '项目地址：https://github.com/wot-ui/wot-ui',\n '我们的目标是打造最强uniapp组件库',\n '诚挚邀请大家共同建设',\n '这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息'\n])\n\nconst onNext = (index: number) => {\n console.log('展示下一条，index: ', index)\n console.log('文本是：' + textArray.value[index])\n}\n```\n\n### 垂直滚动\n\n1. `direction`传递`vertical`即可开启垂直滚动，目前仅支持一个方向的垂直滚动\n2. `text`为数组时才会进行滚动\n\n```html\n<wd-notice-bar prefix=\"warn-bold\" direction=\"vertical\" :text=\"textArray\" :delay=\"3\" custom-class=\"space\" />\n<wd-notice-bar prefix=\"warn-bold\" direction=\"vertical\" text=\"只有一条消息不会滚动\" :delay=\"3\" custom-class=\"space\" />\n```\n\n### 点击事件\n\n点击通知内容区时会触发 `click` 事件，返回当前展示文本和对应索引。\n\n```html\n<wd-notice-bar :text=\"textArray\" prefix=\"thunderbolt\" @click=\"handleClick\" />\n```\n\n```ts\nfunction handleClick(result: { text: string; index: number }) {\n console.log(result)\n}\n```\n\n### 重置播放动画\n\n通过`ref`获取组件实例，调用`reset`方法即可重置播放动画。当你遇到`NoticeBar`的播放动画异常的情况时，可以调用`reset`方法重置动画。 \n\n例如：在`APP-VUE`端，`Tabbar`页面使用`NoticeBar`时，从其它界面返回到`NoticeBar`页面，会偶发`NoticeBar`动画异常，此时可以调用`reset`方法重置动画。\n\n参考issues：[#358](https://github.com/Moonofweisheng/wot-design-uni/issues/358)、[#650](https://github.com/Moonofweisheng/wot-design-uni/issues/650)\n\n```html\n<wd-notice-bar ref=\"notice\" prefix=\"warn-bold\" direction=\"vertical\" :text=\"textArray\" :delay=\"3\" />\n<wd-button @click=\"handleReset\">重置播放动画</wd-button>\n```\n\n```ts\n// uni_modules\nimport { type NoticeBarInstance } from '@/uni_modules/wot-design-uni/components/wd-notice-bar/types'\n// npm\n// import { type NoticeBarInstance } from 'wot-design-uni/components/wd-notice-bar/types'\n\nconst notice = ref<NoticeBarInstance>()\n\nconst textArray = ref([\n '欢迎使用 wot-ui 组件库',\n '该组件库基于uniapp ->Vue3, ts构建',\n '项目地址：https://github.com/wot-ui/wot-ui',\n '我们的目标是打造最强uniapp组件库',\n '诚挚邀请大家共同建设',\n '这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息'\n])\n\nfunction handleReset() {\n notice.value?.reset()\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| text | 通知栏文案 | `string \\| string[]` | `''` |\n| type | 通知栏类型，可选值为 `warning`、`info`、`danger` | `NoticeBarType` | `warning` |\n| prefix | 左侧图标名称 | `string` | - |\n| scrollable | 是否开启滚动播放 | `boolean` | `true` |\n| delay | 滚动动画初始延时，单位为秒 | `number` | `1` |\n| speed | 滚动速度，单位为 `px/s` | `number` | `50` |\n| closable | 是否显示关闭按钮 | `boolean` | `false` |\n| wrapable | 是否换行展示；仅在 `scrollable=false` 的横向模式下生效 | `boolean` | `false` |\n| color | 文字和图标颜色 | `string` | - |\n| background-color | 背景颜色 | `string` | - |\n| direction | 滚动方向，可选值为 `horizontal`、`vertical` | `NoticeBarScrollDirection` | `horizontal` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| close | 点击关闭按钮时触发 | - |\n| next | 切换到下一条文本时触发 | `index: number` |\n| click | 点击内容区时触发 | `{ text: string, index: number }` |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| reset | 重置播放动画 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| prefix | 自定义前置内容；传入 `prefix` 属性时该插槽不生效 |\n| suffix | 自定义后置内容；会覆盖默认关闭图标 |\n| default | 自定义通知文本内容；仅在 `direction='horizontal'` 时生效 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n",
|
|
9853
9850
|
"props": [
|
|
9854
9851
|
{
|
|
@@ -9979,7 +9976,7 @@
|
|
|
9979
9976
|
},
|
|
9980
9977
|
{
|
|
9981
9978
|
"name": "--wot-notice-bar-line-height",
|
|
9982
|
-
"defaultValue": "$typography-body-line
|
|
9979
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
9983
9980
|
"description": "公告栏文字行高"
|
|
9984
9981
|
},
|
|
9985
9982
|
{
|
|
@@ -10114,7 +10111,7 @@
|
|
|
10114
10111
|
"category": "未分类",
|
|
10115
10112
|
"description": "通知类组件，用于在页面顶部展示通知信息。",
|
|
10116
10113
|
"descriptionZh": "通知类组件，用于在页面顶部展示通知信息。",
|
|
10117
|
-
"since": "2.0.
|
|
10114
|
+
"since": "2.0.4",
|
|
10118
10115
|
"doc": "# Notify 消息通知\n\n通知类组件，用于在页面顶部展示通知信息。\n\n## 组件状态\n\n### 基础用法\n\n需要在页面中引入该组件，作为挂载点。\n\n::: code-group\n\n```html\n<wd-notify />\n```\n\n```ts\nimport { useNotify } from '@/uni_modules/wot-ui'\n\nconst { showNotify, closeNotify } = useNotify()\n\n// 3 秒后自动关闭\nshowNotify('通知内容')\n\n// 主动关闭\ncloseNotify()\n```\n\n:::\n\n### 自定义配置\n\n支持自定义颜色、弹出位置、展示时长以及是否显示关闭按钮。\n\n::: code-group\n\n```ts\n// 自定义颜色\nshowNotify({\n message: '自定义颜色',\n color: '#ad0000',\n background: '#ffe1e1'\n})\n\n// 自定义位置\nshowNotify({\n message: '自定义位置',\n position: 'bottom'\n})\n\n// 自定义时长\nshowNotify({\n message: '自定义时长',\n duration: 1000\n})\n\n// 显示关闭按钮\nshowNotify({\n message: '通知内容',\n closable: true,\n duration: 0\n})\n```\n\n:::\n\n## 组件类型\n\n### 通知类型\n\n支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。\n\n::: code-group\n\n```ts\n// 主要通知\nshowNotify({ type: 'primary', message: '通知内容' })\n\n// 成功通知\nshowNotify({ type: 'success', message: '通知内容' })\n\n// 危险通知\nshowNotify({ type: 'danger', message: '通知内容' })\n\n// 警告通知\nshowNotify({ type: 'warning', message: '通知内容' })\n```\n\n:::\n\n## 组件样式\n\n### 悬浮通知\n\n通过 `variant` 属性设置为 `floating` 可展示悬浮卡片式通知。悬浮通知具有独立的外边距、圆角与阴影，并且其前缀图标会自动适配当前 `type` 的状态主色。\n\n::: code-group\n\n```ts\nshowNotify({\n type: 'primary',\n message: '通知内容',\n variant: 'floating',\n closable: true\n})\n```\n\n:::\n\n## 内容形态\n\n### 使用 Notify 组件\n\n如果需要在 Notify 内嵌入组件或其他自定义内容，可以直接使用 Notify 组件，并使用默认插槽进行定制。\n\n::: code-group\n\n```html\n<wd-button type=\"primary\" @click=\"showNotify\">使用 Notify 组件调用</wd-button>\n<wd-notify type=\"success\" :safe-height=\"safeHeight\" v-model:visible=\"visible\">\n <wd-icon name=\"check-outline\" size=\"inherit\" color=\"inherit\" />\n 成功通知\n</wd-notify>\n```\n\n```ts\nimport { ref, onMounted } from 'vue'\n\nlet timer: ReturnType<typeof setTimeout>\nexport default {\n setup() {\n const visible = ref(false)\n const safeHeight = ref(0)\n\n const showNotify = () => {\n visible.value = true\n if (timer) clearTimeout(timer)\n timer = setTimeout(() => {\n visible.value = false\n }, 3000)\n }\n\n onMounted(() => {\n // #ifdef H5\n safeHeight.value = 44\n // #endif\n })\n\n return {\n visible,\n showNotify,\n safeHeight\n }\n }\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 类型，可选值为 `primary` `success` `warning` `danger` | `NotifyType` | `danger` |\n| message | 展示文案，支持通过`\\n`换行 | `string \\| number` | - |\n| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `number` | `3000` |\n| visible | 显示状态（支持 v-model） | `boolean` | `false` |\n| position | 弹出位置，可选值为 `top` `bottom` | `NotifyPosition` | `top` |\n| color | 字体颜色 | `string` | - |\n| background | 背景颜色 | `string` | - |\n| z-index | 将组件的 z-index 层级设置为一个固定值 | `number` | `99` |\n| safe-height | 顶部安全高度 | `number \\| string` | - |\n| selector | 指定唯一标识 | `string` | - |\n| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | `boolean` | `false` |\n| closable | 是否显示关闭按钮 | `boolean` | `false` |\n| variant | 展示形态，可选值为 `filled` `floating` | `NotifyVariant` | `filled` |\n| custom-class | 根节点样式类名 | `string` | - |\n| custom-style | 根节点样式 | `string` | - |\n\n## Events\n\n| 事件名 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击时的回调函数 | `(event: MouseEvent) => void` |\n| closed | 关闭时的回调函数 | `() => void` |\n| opened | 展示后的回调函数 | `() => void` |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 自定义通知内容 |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| showNotify | 展示提示 | `NotifyOptions` / `string` |\n| closeNotify | 关闭提示 | - |\n| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `NotifyOptions` |\n| resetNotifyDefaultOptions | 重置默认配置，影响所有的 `showNotify` 调用 | - |\n\n## Options\n\n调用 `showNotify`、 `setNotifyDefaultOptions` 等方法时，支持传入以下选项：\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 类型，可选值为 `primary` `success` `warning` `danger` | `NotifyType` | `danger` |\n| message | 展示文案，支持通过`\\n`换行 | `string \\| number` | - |\n| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `number` | `3000` |\n| position | 弹出位置，可选值为 `top` `bottom` | `NotifyPosition` | `top` |\n| color | 字体颜色 | `string` | - |\n| background | 背景颜色 | `string` | - |\n| zIndex | 将组件的 z-index 层级设置为一个固定值 | `number` | `99` |\n| safeHeight | 顶部安全高度 | `number \\| string` | - |\n| rootPortal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | `boolean` | `false` |\n| closable | 是否显示关闭按钮 | `boolean` | `false` |\n| variant | 展示形态，可选值为 `filled` `floating` | `NotifyVariant` | `filled` |\n| customClass | 根节点样式类名 | `string` | - |\n| customStyle | 根节点样式 | `string` | - |\n| onClick | 点击时的回调函数 | `(event: MouseEvent) => void` | - |\n| onClosed | 关闭时的回调函数 | `() => void` | - |\n| onOpened | 展示后的回调函数 | `() => void` | - |",
|
|
10119
10116
|
"props": [
|
|
10120
10117
|
{
|
|
@@ -10249,7 +10246,7 @@
|
|
|
10249
10246
|
},
|
|
10250
10247
|
{
|
|
10251
10248
|
"name": "--wot-notify-line-height",
|
|
10252
|
-
"defaultValue": "$typography-body-line
|
|
10249
|
+
"defaultValue": "$typography-body-line-height-size-large",
|
|
10253
10250
|
"description": "通知文字行高"
|
|
10254
10251
|
},
|
|
10255
10252
|
{
|
|
@@ -10356,7 +10353,7 @@
|
|
|
10356
10353
|
"category": "未分类",
|
|
10357
10354
|
"description": "创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。",
|
|
10358
10355
|
"descriptionZh": "创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。",
|
|
10359
|
-
"since": "2.0.
|
|
10356
|
+
"since": "2.0.4",
|
|
10360
10357
|
"doc": "# Overlay 遮罩层\n\n创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。\n\n## 基础用法\n\n### 基础组件\n\n使用 `show` 控制遮罩层的显示/隐藏。\n\n```html\n<wd-button type=\"primary\" @click=\"show = true\">显示遮罩层</wd-button>\n<wd-overlay :show=\"show\" @click=\"show = false\" />\n```\n\n## 特殊样式\n\n### 嵌入内容\n\n通过默认插槽可以在遮罩层上嵌入任意内容。\n\n::: code-group\n\n```html\n<wd-button type=\"primary\" @click=\"show = true\">嵌入内容</wd-button>\n<wd-overlay :show=\"show\" @click=\"show = false\">\n <view class=\"wrapper\">\n <view class=\"block\" @click.stop=\"\" />\n </view>\n</wd-overlay>\n```\n\n```scss\n.wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.block {\n width: 120px;\n height: 120px;\n background-color: #fff;\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| show | 是否展示遮罩层 | `boolean` | `false` |\n| duration | 动画时长，单位为毫秒 | <code>Record<string, number> | number | boolean</code> | `300` |\n| lock-scroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | `boolean` | `true` |\n| z-index | 层级 | `number` | `10` |\n| custom-style | 根节点样式 | `string` | `''` |\n| custom-class | 根节点样式类名 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击遮罩层时触发 | - |\n| before-enter | 进入动画开始前触发 | - |\n| enter | 进入动画开始时触发 | - |\n| after-enter | 进入动画结束后触发 | - |\n| before-leave | 离开动画开始前触发 | - |\n| leave | 离开动画开始时触发 | - |\n| after-leave | 离开动画结束后触发 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 遮罩层内容 |\n",
|
|
10361
10358
|
"props": [
|
|
10362
10359
|
{
|
|
@@ -10468,7 +10465,7 @@
|
|
|
10468
10465
|
"category": "未分类",
|
|
10469
10466
|
"description": "当数据量过多时，使用分页分解数据。",
|
|
10470
10467
|
"descriptionZh": "当数据量过多时，使用分页分解数据。",
|
|
10471
|
-
"since": "2.0.
|
|
10468
|
+
"since": "2.0.4",
|
|
10472
10469
|
"doc": "# Pagination 分页\n\n当数据量过多时，使用分页分解数据。\n\n## 组件类型\n\n### 基本用法\n\n通过 `v-model` 来绑定当前页码，`total`设置总条数，`page-size`设置一页展示条数，默认为10条，总页数通过`total`和`page-size`自动计算。\n\n```html\n<wd-pagination v-model=\"value\" :total=\"190\" @change=\"handleChange\" />\n```\n\n```typescript\nconst value = ref<number>(1)\nfunction handleChange({ value }) {\n console.log(value)\n}\n```\n\n## 组件变体\n\n### 按钮风格\n\n通过 `button-variant` 设置按钮风格，可选值为 `text`、`plain`、`dashed`、`base`。\n\n```html\n<wd-pagination v-model=\"value1\" :total=\"190\" button-variant=\"plain\" />\n<wd-pagination v-model=\"value2\" :total=\"190\" button-variant=\"dashed\" />\n<wd-pagination v-model=\"value3\" :total=\"190\" button-variant=\"base\" />\n```\n\n### Icon 图标\n\n设置 `show-icon` 属性，将分页导航展示为Icon图标。\n\n```html\n<wd-pagination v-model=\"value\" :total=\"19\" @change=\"handleChange\" show-icon />\n```\n\n### 文字提示\n\n设置 `show-message` 属性，展示文字提示。\n\n```html\n<wd-pagination \n v-model=\"value\" \n :total=\"total\" \n :page-size=\"pageSize\" \n @change=\"handleChange\" \n show-icon \n show-message\n/>\n```\n\n```typescript\nconst value = ref<number>(1)\nconst total = ref<number>(160)\nconst pageSize = ref<number>(20)\n```\n\n## 内容形态\n\n### 自定义插槽\n\n组件提供 `prev`、`size`、`next`、`message` 四个插槽，可用于自定义分页按钮、中间页码信息和底部提示。\n\n```html\n<wd-pagination v-model=\"value\" :total=\"190\" show-message>\n <template #prev=\"{ modelValue }\">\n <wd-button :disabled=\"modelValue <= 1\" size=\"small\" type=\"danger\" @click=\"value -= 1\">上一页</wd-button>\n </template>\n <template #next=\"{ modelValue, totalPageNum }\">\n <wd-button :disabled=\"modelValue >= totalPageNum\" size=\"small\" type=\"danger\" @click=\"value += 1\">下一页</wd-button>\n </template>\n <template #size=\"{ modelValue, totalPageNum }\">\n <view class=\"custom-pagination__content\">\n <text class=\"custom-pagination__page\">{{ modelValue }}</text>\n <text class=\"custom-pagination__separator\">/</text>\n <text class=\"custom-pagination__total\">{{ totalPageNum }}</text>\n </view>\n </template>\n <template #message=\"{ total }\">\n <view class=\"custom-pagination__message\">当前第{{ value }}页，共{{ total }}条数据</view>\n </template>\n</wd-pagination>\n```\n\n```scss\n.custom-pagination__content {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n}\n\n.custom-pagination__page {\n color: #f00;\n}\n\n.custom-pagination__separator {\n margin: 0 5px;\n}\n\n.custom-pagination__total {\n color: #00f;\n}\n\n.custom-pagination__message {\n margin-top: 10px;\n color: #999;\n text-align: center;\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前页码 | `number` | - |\n| total-page | 总页数；传入 `total` 时会优先根据 `total` 与 `page-size` 计算 | `number` | `1` |\n| total | 总数据条数 | `number` | `0` |\n| page-size | 每页条数 | `number` | `10` |\n| prev-text | 上一页按钮文字；未设置时使用内置国际化文案 | `string` | - |\n| next-text | 下一页按钮文字；未设置时使用内置国际化文案 | `string` | - |\n| show-icon | 是否展示翻页图标 | `boolean` | `false` |\n| show-message | 是否展示文字提示 | `boolean` | `false` |\n| button-variant | 分页按钮风格，可选值为 `base`、`plain`、`dashed`、`text` | `ButtonVariant` | `text` |\n| hide-if-one-page | 总页数只有一页时是否隐藏 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 页码变化时触发 | `{ value }` |\n| update:modelValue | `v-model` 更新时触发 | `value: number` |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| prev | 自定义上一页按钮 | `{ modelValue, totalPageNum, total, pageSize }` |\n| size | 自定义中间页码显示区域 | `{ modelValue, totalPageNum, total, pageSize }` |\n| next | 自定义下一页按钮 | `{ modelValue, totalPageNum, total, pageSize }` |\n| message | 自定义底部提示信息，仅在 `show-message` 为 `true` 时生效 | `{ modelValue, totalPageNum, total, pageSize }` |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n",
|
|
10473
10470
|
"props": [
|
|
10474
10471
|
{
|
|
@@ -10602,7 +10599,7 @@
|
|
|
10602
10599
|
},
|
|
10603
10600
|
{
|
|
10604
10601
|
"name": "--wot-pagination-message-line-height",
|
|
10605
|
-
"defaultValue": "$typography-body-line
|
|
10602
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
10606
10603
|
"description": "辅助文案行高"
|
|
10607
10604
|
},
|
|
10608
10605
|
{
|
|
@@ -10622,7 +10619,7 @@
|
|
|
10622
10619
|
},
|
|
10623
10620
|
{
|
|
10624
10621
|
"name": "--wot-pagination-size-line-height",
|
|
10625
|
-
"defaultValue": "$typography-title-line
|
|
10622
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
10626
10623
|
"description": "页码行高"
|
|
10627
10624
|
},
|
|
10628
10625
|
{
|
|
@@ -10681,7 +10678,7 @@
|
|
|
10681
10678
|
"category": "未分类",
|
|
10682
10679
|
"description": "带网格的密码输入组件，适用于支付密码、短信验证码等场景，通常与 [Keyboard 键盘](./keyboard.md) 组件配合使用。",
|
|
10683
10680
|
"descriptionZh": "带网格的密码输入组件，适用于支付密码、短信验证码等场景，通常与 [Keyboard 键盘](./keyboard.md) 组件配合使用。",
|
|
10684
|
-
"since": "2.0.
|
|
10681
|
+
"since": "2.0.4",
|
|
10685
10682
|
"doc": "# PasswordInput 密码输入框\n\n带网格的密码输入组件，适用于支付密码、短信验证码等场景，通常与 [Keyboard 键盘](./keyboard.md) 组件配合使用。\n\n`wd-password-input` 仅负责展示输入值、光标和提示信息，不直接处理录入逻辑。通常将 `focused` 与键盘显隐状态绑定，并在 `focus` 事件中打开键盘。\n\n## 组件类型\n\n### 基础用法\n\n搭配 `wd-keyboard` 组件实现密码输入。\n\n```html\n<wd-password-input v-model=\"value\" :focused=\"showKeyboard\" @focus=\"showKeyboard = true\" />\n<wd-keyboard v-model=\"value\" v-model:visible=\"showKeyboard\" :maxlength=\"6\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref<string>('123')\nconst showKeyboard = ref<boolean>(false)\n```\n\n## 组件变体\n\n### 自定义长度\n\n通过 `length` 设置密码位数，并同步设置键盘的 `maxlength`。\n\n```html\n<wd-password-input v-model=\"value\" :length=\"4\" :focused=\"showKeyboard\" @focus=\"showKeyboard = true\" />\n<wd-keyboard v-model=\"value\" v-model:visible=\"showKeyboard\" :maxlength=\"4\" />\n```\n\n## 组件样式\n\n### 格子间距\n\n通过 `gutter` 设置格子之间的间距，默认单位为 `px`。\n\n```html\n<wd-password-input v-model=\"value\" :gutter=\"10\" :focused=\"showKeyboard\" @focus=\"showKeyboard = true\" />\n<wd-keyboard v-model=\"value\" v-model:visible=\"showKeyboard\" :maxlength=\"6\" />\n```\n\n## 内容形态\n\n### 明文展示\n\n将 `mask` 设置为 `false` 可以明文展示输入内容，适用于短信验证码等场景。\n\n```html\n<wd-password-input v-model=\"value\" :mask=\"false\" :focused=\"showKeyboard\" @focus=\"showKeyboard = true\" />\n<wd-keyboard v-model=\"value\" v-model:visible=\"showKeyboard\" :maxlength=\"6\" />\n```\n\n### 提示信息\n\n通过 `info` 设置普通提示信息，通过 `error-info` 设置错误提示。\n\n```html\n<wd-password-input\n v-model=\"value\"\n info=\"密码为 6 位数字\"\n :error-info=\"errorInfo\"\n :focused=\"showKeyboard\"\n @focus=\"showKeyboard = true\"\n/>\n<wd-keyboard v-model=\"value\" v-model:visible=\"showKeyboard\" :maxlength=\"6\" />\n```\n\n```typescript\nimport { ref, watch } from 'vue'\n\nconst value = ref('123')\nconst errorInfo = ref('')\nconst showKeyboard = ref(false)\n\nwatch(value, (newVal) => {\n if (newVal.length === 6 && newVal !== '123456') {\n errorInfo.value = '密码错误'\n } else {\n errorInfo.value = ''\n }\n})\n```\n\n## 特殊用法\n\n### 随机键盘\n\n结合 `wd-keyboard` 的 `random-key-order` 能力，可以提升数字输入场景的安全性。\n\n```html\n<wd-password-input v-model=\"value\" :focused=\"showKeyboard\" @focus=\"showKeyboard = true\" />\n<wd-keyboard v-model=\"value\" v-model:visible=\"showKeyboard\" :maxlength=\"6\" random-key-order />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前输入值 | `string` | `''` |\n| mask | 是否隐藏密码内容 | `boolean` | `true` |\n| info | 输入框下方文字提示 | `string` | `''` |\n| error-info | 输入框下方错误提示 | `string` | `''` |\n| gutter | 输入框格子之间的间距，默认单位为 `px` | `number \\| string` | `0` |\n| length | 密码长度 | `number` | `6` |\n| focused | 是否处于聚焦状态；聚焦时显示光标，通常与键盘显隐状态联动 | `boolean` | `true` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| focus | 点击密码输入框时触发 | `event: Event` |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n",
|
|
10686
10683
|
"props": [
|
|
10687
10684
|
{
|
|
@@ -10765,7 +10762,7 @@
|
|
|
10765
10762
|
},
|
|
10766
10763
|
{
|
|
10767
10764
|
"name": "--wot-password-input-line-height",
|
|
10768
|
-
"defaultValue": "$typography-title-line
|
|
10765
|
+
"defaultValue": "$typography-title-line-height-size-large",
|
|
10769
10766
|
"description": "输入行高"
|
|
10770
10767
|
},
|
|
10771
10768
|
{
|
|
@@ -10815,7 +10812,7 @@
|
|
|
10815
10812
|
},
|
|
10816
10813
|
{
|
|
10817
10814
|
"name": "--wot-password-input-dot-radius",
|
|
10818
|
-
"defaultValue": "$radius-
|
|
10815
|
+
"defaultValue": "$radius-full",
|
|
10819
10816
|
"description": "密码点圆角"
|
|
10820
10817
|
},
|
|
10821
10818
|
{
|
|
@@ -10890,7 +10887,7 @@
|
|
|
10890
10887
|
"category": "未分类",
|
|
10891
10888
|
"description": "Picker 包含了一个弹出层（`wd-popup`）与一个选择器视图（`wd-picker-view`），不包含外层的触发元素（如 Input、Cell 等）。通常需要结合 `wd-cell` 或表单相关组件来触发显示。",
|
|
10892
10889
|
"descriptionZh": "Picker 包含了一个弹出层（`wd-popup`）与一个选择器视图（`wd-picker-view`），不包含外层的触发元素（如 Input、Cell 等）。通常需要结合 `wd-cell` 或表单相关组件来触发显示。",
|
|
10893
|
-
"since": "2.0.
|
|
10890
|
+
"since": "2.0.4",
|
|
10894
10891
|
"doc": "# Picker 选择器\n\nPicker 包含了一个弹出层（`wd-popup`）与一个选择器视图（`wd-picker-view`），不包含外层的触发元素（如 Input、Cell 等）。通常需要结合 `wd-cell` 或表单相关组件来触发显示。\n\n## 基础用法\n\n需结合一个外部触发器，比如 `wd-cell`，并通过绑定 `v-model` 来保存选中的内容数组，利用 `v-model:visible` 控制 Picker 的显示或隐藏。\n\n::: code-group\n\n```html\n<wd-cell title=\"单列选项\" placeholder=\"请选择\" :value=\"value[0]\" is-link @click=\"show = true\" />\n<wd-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst show = ref(false)\nconst value = ref<string[]>([])\nconst columns = ref([\n { label: '选项1', value: '1' },\n { label: '选项2', value: '2' },\n { label: '选项3', value: '3' }\n])\n```\n\n:::\n\n## 多列\n\n`columns` 属性传入二维数组，此时 `value` 为对应列选中项 `value` 的一维数组。\n\n::: code-group\n\n```html\n<wd-cell title=\"多列\" :value=\"displayValue\" is-link @click=\"show = true\" />\n<wd-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" @confirm=\"handleConfirm\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst show = ref(false)\nconst value = ref([])\nconst displayValue = ref('')\n\nconst columns = ref([\n [\n { label: '中山大学', value: '1' },\n { label: '中南大学', value: '2' },\n { label: '华南理工大学', value: '3' }\n ],\n [\n { label: '计算机科学与技术', value: '1' },\n { label: '软件工程', value: '2' },\n { label: '通信工程', value: '3' }\n ]\n])\n\nconst handleConfirm = ({ selectedItems }: any) => {\n displayValue.value = selectedItems.map((item: any) => item.label).join(', ')\n}\n```\n\n:::\n\n## 多级联动\n\n设置 `cascade` 属性，并将 `columns` 设定为带层级的树状结构（通过 `children` 嵌套子项）。\n可以结合自定义的展示函数进行页面回填格式化。\n\n::: code-group\n\n```html\n<wd-cell title=\"多级联动\" :value=\"displayValue\" is-link @click=\"show = true\" />\n<wd-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" cascade @confirm=\"handleConfirm\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst show = ref(false)\nconst value = ref(['110000', '110100', '110102'])\nconst displayValue = ref('北京 - 北京市 - 西城区')\n\nconst columns = ref([\n {\n label: '北京',\n value: '110000',\n children: [\n {\n label: '北京市',\n value: '110100',\n children: [\n { label: '东城区', value: '110101' },\n { label: '西城区', value: '110102' },\n { label: '朝阳区', value: '110105' }\n ]\n }\n ]\n }\n])\n\nfunction handleConfirm({ selectedItems }: any) {\n displayValue.value = selectedItems.map((item: any) => item.label).join(' - ')\n}\n```\n\n:::\n\n\n\n## 自定义弹窗标题\n\n可通过 `title` 属性为内部弹窗配置顶部提示性文字标题。\n\n::: code-group\n\n```html\n<wd-cell title=\"标题\" :value=\"value[0]\" is-link @click=\"showTitle = true\" />\n<wd-picker v-model=\"value\" v-model:visible=\"showTitle\" :columns=\"columns\" title=\"请选择您心仪的选项\" />\n```\n\n:::\n\n## 确定前校验\n\n设置 `before-confirm` 函数，在用户点击弹出层右上角“完成”按钮时进行拦截，支持返回 `boolean` 或 `Promise<boolean>` 控制是否允许选定并关闭弹窗。\n\n::: code-group\n\n```html\n<wd-toast />\n<wd-cell title=\"选项拦截\" :value=\"value[0]\" is-link @click=\"show = true\" />\n<wd-picker :columns=\"columns\" v-model=\"value\" v-model:visible=\"show\" :before-confirm=\"beforeConfirm\" />\n```\n\n```typescript\nimport { ref } from 'vue'\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst toast = useToast()\nconst show = ref(false)\nconst columns = ref([\n { label: '选项1', value: '1' },\n { label: '选项2', value: '2' },\n { label: '选项3', value: '3' }\n])\nconst value = ref<string[]>([])\n\nconst beforeConfirm = (value: string[]) => {\n return new Promise<boolean>((resolve) => {\n setTimeout(() => {\n // 假设选项2与选项3被判断为无效选择\n if (['2', '3'].includes(value[0])) {\n toast.error('该选项校验不通过，请重新选择')\n resolve(false)\n } else {\n resolve(true)\n }\n }, 1000)\n })\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 选中项。单列选择器为长度为 1 的数组，多列则为对应多项值组成的数组 | `(string \\| number)[]` | `[]` |\n| v-model:visible | 控制选择器弹出层的显示与隐藏 | `boolean` | `false` |\n| columns | 选项数据结构数组配置，对于多列使用二维数组，多级联动结合 cascade 嵌套 children | `PickerOption[] \\| PickerOption[][]` | `[]` |\n| cascade | 是否开启级联模式 | `boolean` | `false` |\n| title | 弹出层大标题 | `string` | - |\n| cancel-button-text | 顶部操作栏左侧取消按钮文案 | `string` | - |\n| confirm-button-text | 顶部操作栏右侧确认按钮文案 | `string` | - |\n| value-key | 选项对象中负责标示值的键名 | `string` | `'value'` |\n| label-key | 选项对象中负责呈现文本的键名 | `string` | `'label'` |\n| children-key | 级联模式中对应的下一级子级键名 | `string` | `'children'` |\n| item-height | 内部滚筒每个选项的单个高度（px） | `number` | `44` |\n| visible-item-count | 单屏视窗内最多可见的选项数量 | `number` | `6` |\n| before-confirm | 确定前校验函数，接收 `(value)` 参数，返回 `boolean` 或 `Promise<boolean>` | `Function` | - |\n| close-on-click-modal | 点击遮罩层时是否关闭弹窗 | `boolean` | `true` |\n| z-index | 弹出层层级深度 | `number` | `15` |\n| safe-area-inset-bottom | 弹出面板是否设置默认的底部安全距离 | `boolean` | `true` |\n| immediate-change | 是否在手指松开时立即触发 `change` 而非滚动结束 | `boolean` | `false` |\n| root-portal | 是否开启 `root-portal` 将组件脱离当前节点进行渲染 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n| custom-view-class | pickerView 组件的外部自定义样式类 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| confirm | 点击完成按钮触发 | `{ value, selectedItems }` |\n| cancel | 点击取消或蒙层关闭触发 | - |\n| open | 打开弹出层选择器时触发 | - |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开 Picker 弹窗 | - |\n| close | 关闭 Picker 弹窗 | - |\n\n\n",
|
|
10895
10892
|
"props": [
|
|
10896
10893
|
{
|
|
@@ -11086,7 +11083,7 @@
|
|
|
11086
11083
|
},
|
|
11087
11084
|
{
|
|
11088
11085
|
"name": "--wot-picker-title-line-height",
|
|
11089
|
-
"defaultValue": "$typography-title-line
|
|
11086
|
+
"defaultValue": "$typography-title-line-height-size-main",
|
|
11090
11087
|
"description": "标题文字行高"
|
|
11091
11088
|
},
|
|
11092
11089
|
{
|
|
@@ -11104,7 +11101,7 @@
|
|
|
11104
11101
|
"category": "未分类",
|
|
11105
11102
|
"description": "选择器视图，用于从一组数据中选择单个或多个值。",
|
|
11106
11103
|
"descriptionZh": "选择器视图，用于从一组数据中选择单个或多个值。",
|
|
11107
|
-
"since": "2.0.
|
|
11104
|
+
"since": "2.0.4",
|
|
11108
11105
|
"doc": "# PickerView 选择器视图\n\n选择器视图，用于从一组数据中选择单个或多个值。\n\n`wd-picker-view` 只负责滚筒选择区域本身，不包含弹出层与顶部操作栏；如果需要完整的弹窗选择器，可以使用 [Picker](./picker.md)。\n\n当 `columns` 中的选项为对象时，组件默认读取 `label` 作为展示文本、读取 `value` 作为选中值；也可以通过 `label-key`、`value-key`、`children-key` 自定义字段映射。\n\n## 组件类型\n\n### 基本用法\n\n单列选择器可直接传入字符串数组或对象数组，`v-model` 推荐始终使用数组形式保存当前选中值。\n\n::: code-group\n\n```html\n<wd-picker-view v-model=\"value\" :columns=\"columns\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['选项1'])\nconst columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])\n```\n\n:::\n\n当 `columns` 为对象数组时，单项数据结构如下：\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value | 选项值 | `string \\| number` | - |\n| label | 选项文本 | `string \\| number` | - |\n| disabled | 是否禁用 | `boolean` | `false` |\n| children | 子选项列表，用于级联模式 | `PickerOption[]` | - |\n\n## 组件状态\n\n### 禁用选项\n\n通过给选项对象设置 `disabled`，可以禁止某一项被选中。\n\n::: code-group\n\n```html\n<wd-picker-view v-model=\"value\" :columns=\"columns\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['选项1'])\nconst columns = ref([\n { label: '选项1', value: '选项1' },\n { label: '选项2', value: '选项2' },\n { label: '选项3', value: '选项3', disabled: true },\n { label: '选项4', value: '选项4' }\n])\n```\n\n:::\n\n## 组件变体\n\n### 立即触发\n\n设置 `immediate-change` 后，手指松开时就会触发 `change` 事件；默认情况下会在滚动动画结束后再触发。\n\n::: code-group\n\n```html\n<wd-picker-view v-model=\"value\" :columns=\"columns\" immediate-change @change=\"handleChange\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['选项1'])\nconst columns = ref([\n { label: '选项1', value: '选项1' },\n { label: '选项2', value: '选项2' },\n { label: '选项3', value: '选项3' }\n])\n\nfunction handleChange({ selectedValues, selectedLabels, columnIndex }: any) {\n console.log(selectedValues, selectedLabels, columnIndex)\n}\n```\n\n:::\n\n### 多列\n\n将 `columns` 设为二维数组即可展示多列选择器，对应的 `v-model` 仍为一维数组，按列顺序保存每一列的选中值。\n\n::: code-group\n\n```html\n<wd-picker-view v-model=\"value\" :columns=\"columns\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref(['中南大学', '软件工程'])\nconst columns = ref([\n ['中山大学', '中南大学', '华南理工大学'],\n ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']\n])\n```\n\n:::\n\n### 多级联动\n\n设置 `cascade` 后，`columns` 应传入树形数据结构。组件会根据当前选中值自动展开后续列。\n\n::: code-group\n\n```html\n<wd-picker-view v-model=\"value\" :columns=\"columns\" cascade />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref(['110000', '110100', '110102'])\nconst columns = ref([\n {\n label: '北京',\n value: '110000',\n children: [\n {\n label: '北京市',\n value: '110100',\n children: [\n { label: '东城区', value: '110101' },\n { label: '西城区', value: '110102' },\n { label: '朝阳区', value: '110105' }\n ]\n }\n ]\n },\n {\n label: '广东省',\n value: '440000',\n children: [\n {\n label: '广州市',\n value: '440100',\n children: [\n { label: '荔湾区', value: '440103' },\n { label: '越秀区', value: '440104' },\n { label: '海珠区', value: '440105' }\n ]\n }\n ]\n }\n])\n```\n\n:::\n\n## 特殊用法\n\n### 自定义字段名\n\n通过 `value-key`、`label-key`、`children-key` 可以适配非标准字段名的数据结构。\n\n::: code-group\n\n```html\n<wd-picker-view v-model=\"value\" :columns=\"columns\" value-key=\"id\" label-key=\"text\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref<number[]>([1])\nconst columns = ref([\n { id: 1, text: '选项一' },\n { id: 2, text: '选项二' },\n { id: 3, text: '选项三' }\n])\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前选中值；单列时通常为长度为 1 的数组，多列与级联时按列顺序保存各列选中值 | `(string \\| number)[]` | `[]` |\n| columns | 选择器数据；可传入一维数组、对象数组、二维数组，级联模式下传入树形数据 | `Array<string \\| number \\| PickerOption> \\| Array<Array<string \\| number \\| PickerOption>>` | `[]` |\n| item-height | 每个选项的高度 | `number` | `44` |\n| visible-item-count | 可见选项数量 | `number` | `6` |\n| value-key | 选项对象中值字段对应的键名 | `string` | `'value'` |\n| label-key | 选项对象中文本字段对应的键名 | `string` | `'label'` |\n| immediate-change | 是否在手指松开时立即触发 `change` 事件；若不开启，则在滚动动画结束后触发 | `boolean` | `false` |\n| cascade | 是否开启级联模式；开启后 `columns` 应传入树形数据 | `boolean` | `false` |\n| children-key | 级联模式下子节点字段对应的键名 | `string` | `'children'` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Methods\n\n| 方法名称 | 说明 | 参数 |\n| --- | --- | --- |\n| getSelectedOptions | 获取所有列选中项 | - |\n| getSelectedValues | 获取所有列的选中值 | - |\n| getColumnsData | 获取所有列数据 | - |\n| getColumnData | 获取指定列数据 | `columnIndex: number` |\n| getColumnIndex | 获取指定列的选中下标 | `columnIndex: number` |\n| getSelectedLabels | 获取所有列选中项的文本 | - |\n| getSelectedIndex | 获取所有列的选中下标 | - |\n| resetColumns | 重置列数据 | `columns: PickerOption[] \\| PickerOption[][]` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 选中值变化时触发 | `{ selectedValues, selectedOptions, selectedLabels, selectedIndexes, columnIndex }` |\n| pickstart | 开始滚动选择时触发 | - |\n| pickend | 结束滚动选择时触发 | - |\n| update:modelValue | `v-model` 更新时触发 | `value: (string \\| number)[]` |\n\n### change 事件参数\n\n| 参数名 | 说明 | 类型 |\n| --- | --- | --- |\n| selectedValues | 所有列的选中值数组 | `Array<string \\| number>` |\n| selectedOptions | 所有列的选中项对象数组 | `Array<PickerOption>` |\n| selectedLabels | 所有列的选中文本数组 | `Array<string>` |\n| selectedIndexes | 所有列的选中下标数组 | `Array<number>` |\n| columnIndex | 当前发生变化的列索引；单列时为当前选项下标 | `number` |\n\n## Slots\n\n组件未提供插槽。\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n",
|
|
11109
11106
|
"props": [
|
|
11110
11107
|
{
|
|
@@ -11315,7 +11312,7 @@
|
|
|
11315
11312
|
"category": "未分类",
|
|
11316
11313
|
"description": "常用于展示提示信息或菜单操作。",
|
|
11317
11314
|
"descriptionZh": "常用于展示提示信息或菜单操作。",
|
|
11318
|
-
"since": "2.0.
|
|
11315
|
+
"since": "2.0.4",
|
|
11319
11316
|
"doc": "# Popover 气泡\n\n常用于展示提示信息或菜单操作。\n\nPopover 的定位规则与 [Tooltip](/component/tooltip.html) 保持一致，支持 12 个方向的弹出位置，并提供内容插槽和菜单模式。\n\n:::warning\n因为 `uni-app` 组件无法监听点击自己以外的地方，为了在点击页面其他地方时自动关闭 `popover`，建议使用组件库的 `useQueue` hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），并在页面根元素上监听点击事件冒泡。\n\n如果存在用户手动点击 `popover` 以外某个地方如按钮弹出 `popover` 的场景，则需要在该元素上加 `@click.stop=\"\"` 阻止事件冒泡到根元素上，避免触发 `closeOutside` 把要手动打开的 `popover` 关闭。\n:::\n\n## 组件类型\n\n### 普通模式\n\n默认使用 `normal` 模式，直接通过 `content` 展示一段文本内容。\n\n::: code-group\n```html [vue/html]\n<view @click=\"closeOutside\">\n <wd-popover v-model=\"showBasic\" content=\"这是一段信息。\">\n <wd-button>点击展示</wd-button>\n </wd-popover>\n</view>\n```\n```ts [typescript]\nimport { ref } from 'vue'\nimport { useQueue } from '@/uni_modules/wot-ui'\n\nconst { closeOutside } = useQueue()\nconst showBasic = ref<boolean>(false)\n```\n:::\n\n### 菜单模式\n\n设置 `mode=\"menu\"` 后，`content` 需要传入 `PopoverMenuItem[]`。点击菜单项后会自动关闭当前气泡，并触发 `menuclick` 事件。\n\n::: code-group\n```html [vue/html]\n<wd-popover v-model=\"showMenu\" mode=\"menu\" :content=\"menuItems\" @menuclick=\"handleMenuClick\">\n <wd-button>列表</wd-button>\n</wd-popover>\n```\n```ts [typescript]\nimport { ref } from 'vue'\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { PopoverMenuItem } from '@/uni_modules/wot-ui/components/wd-popover/types'\n\nconst { show: showToast } = useToast()\nconst showMenu = ref<boolean>(false)\nconst menuItems: PopoverMenuItem[] = [\n {\n iconClass: 'check',\n content: '全部标记已读'\n },\n {\n iconClass: 'delete',\n content: '清空最近会话'\n },\n {\n iconClass: 'subscribe',\n content: '消息订阅设置'\n },\n {\n iconClass: 'scan',\n content: '消息异常检测'\n }\n]\n\nfunction handleMenuClick({ item }: { item: PopoverMenuItem }) {\n showToast('选择了' + item.content)\n}\n```\n:::\n\n### PopoverMenuItem\n\n`mode=\"menu\"` 时，`content` 数组内每一项的数据结构如下：\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| content | 菜单项文案 | string | - |\n| iconClass | 菜单项图标类名，不设置时只展示标题 | string | - |\n\n## 组件状态\n\n### 受控显隐\n\n通过 `v-model` 控制 Popover 的显示与隐藏，外部按钮和触发目标都可以驱动显隐状态变化。\n\n::: code-group\n```html [vue/html]\n<wd-button plain size=\"small\" @click.stop=\"showControlled = !showControlled\">\n {{ showControlled ? '关闭' : '打开' }}\n</wd-button>\n\n<wd-popover v-model=\"showControlled\" content=\"通过 v-model 控制显隐\" placement=\"top\">\n <wd-button>触发目标</wd-button>\n</wd-popover>\n```\n```ts [typescript]\nimport { ref } from 'vue'\n\nconst showControlled = ref<boolean>(false)\n```\n:::\n\n### 禁用\n\n设置 `disabled` 后，点击触发目标不会打开气泡。\n\n```html\n<wd-popover disabled content=\"禁用状态\">\n <wd-button>禁用状态</wd-button>\n</wd-popover>\n```\n\n## 组件变体\n\n### 弹出位置\n\n通过 `placement` 指定弹出位置，支持 `top`、`bottom`、`left`、`right` 及各自的 `start`、`end` 对齐方式。\n\n::: code-group\n```html [vue/html]\n<wd-radio-group v-model=\"placement\" direction=\"horizontal\" type=\"dot\">\n <wd-radio v-for=\"item in placementItems\" :key=\"item\" :value=\"item\">{{ item }}</wd-radio>\n</wd-radio-group>\n\n<wd-popover v-model=\"showPlacement\" :content=\"'当前方向：' + placement\" :placement=\"placement\">\n <wd-button>{{ placement }}</wd-button>\n</wd-popover>\n```\n```ts [typescript]\nimport { ref } from 'vue'\nimport type { PlacementType } from '@/uni_modules/wot-ui/components/wd-popover/types'\n\nconst placement = ref<PlacementType>('bottom')\nconst showPlacement = ref<boolean>(false)\nconst placementItems = [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end'\n] as const\n```\n:::\n\n## 组件样式\n\n### 内容插槽\n\n通过 `content` 插槽可以自定义气泡内容结构和样式，不需要额外开启开关属性。\n\n::: code-group\n```html [vue/html]\n<wd-popover v-model=\"showCustom\">\n <template #content>\n <view class=\"pop-content\">这是一段自定义样式的内容。</view>\n </template>\n <wd-button>点击展示</wd-button>\n</wd-popover>\n```\n```ts [typescript]\nimport { ref } from 'vue'\n\nconst showCustom = ref<boolean>(false)\n```\n```scss [scss]\n.pop-content {\n position: relative;\n z-index: 500;\n border-radius: 4px;\n background: #fff;\n color: #8268de;\n font-weight: 600;\n padding: 10px;\n width: 150px;\n}\n```\n:::\n\n### 显示关闭按钮\n\n设置 `show-close` 后，会在气泡内容区域右上角显示关闭按钮。\n\n```html\n<wd-popover v-model=\"showClosable\" content=\"这是一段信息。\" show-close>\n <wd-button>显示关闭按钮</wd-button>\n</wd-popover>\n```\n\n## 特殊样式\n\n### 动态内容与位置更新\n\n当使用 `content` 插槽且插槽内容尺寸发生变化时，可以通过组件实例的 `updatePosition` 重新测量并更新定位。\n\n::: code-group\n```html [vue/html]\n<wd-popover v-model=\"showDynamic\" ref=\"popoverRef\" :placement=\"placement\">\n <template #content>\n <view class=\"pop-content\" :style=\"{ width: `${dynamicWidth}px` }\">\n <view class=\"status\">当前宽度：{{ dynamicWidth }}px</view>\n <wd-button size=\"small\" @click=\"changeSize\">改变大小并更新</wd-button>\n </view>\n </template>\n <wd-button>动态内容</wd-button>\n</wd-popover>\n```\n```ts [typescript]\nimport { nextTick, ref } from 'vue'\nimport type { PlacementType, PopoverInstance } from '@/uni_modules/wot-ui/components/wd-popover/types'\n\nconst placement = ref<PlacementType>('bottom')\nconst showDynamic = ref<boolean>(false)\nconst dynamicWidth = ref<number>(150)\nconst popoverRef = ref<PopoverInstance | null>(null)\n\nfunction changeSize() {\n dynamicWidth.value = dynamicWidth.value === 150 ? 250 : 150\n nextTick(() => {\n popoverRef.value?.updatePosition()\n })\n}\n```\n```scss [scss]\n.status {\n margin-bottom: 10px;\n}\n```\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 是否显示气泡 | `boolean` | `false` |\n| content | 显示内容，`normal` 模式下为字符串，`menu` 模式下为 `PopoverMenuItem[]`，也可以通过 `content` 插槽传入 | `string \\| PopoverMenuItem[]` | - |\n| mode | 当前显示模式，可选值为 `normal`、`menu` | `PopoverMode` | `normal` |\n| placement | 弹出位置，可选值为 `top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end`、`left`、`left-start`、`left-end`、`right`、`right-start`、`right-end` | `PlacementType` | `bottom` |\n| offset | 偏移量，支持 number、number[] 或 `{ x: number, y: number }` | `PopoverOffset` | `0` |\n| visible-arrow | 是否显示箭头 | `boolean` | `true` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| show-close | 是否显示关闭按钮 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n| custom-arrow | 箭头节点自定义类名 | `string` | `''` |\n| custom-pop | 气泡内容容器自定义类名 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 气泡显示时触发 | - |\n| close | 气泡隐藏时触发 | - |\n| change | 显隐状态变化时触发 | `{ show: boolean }` |\n| menuclick | `menu` 模式下点击选项时触发 | `{ item: PopoverMenuItem; index: number }` |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开气泡 | - |\n| close | 关闭气泡 | - |\n| updatePosition | 重新测量内容尺寸并更新定位 | - |\n\n## Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| default | 触发器区域内容 | - |\n| content | 自定义气泡内容 | - |\n\n",
|
|
11320
11317
|
"props": [
|
|
11321
11318
|
{
|
|
@@ -11466,7 +11463,7 @@
|
|
|
11466
11463
|
},
|
|
11467
11464
|
{
|
|
11468
11465
|
"name": "--wot-popover-line-height",
|
|
11469
|
-
"defaultValue": "$typography-body-line
|
|
11466
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
11470
11467
|
"description": "浮层行高"
|
|
11471
11468
|
},
|
|
11472
11469
|
{
|
|
@@ -11527,7 +11524,7 @@
|
|
|
11527
11524
|
"category": "未分类",
|
|
11528
11525
|
"description": "弹出层组件，用于展示弹窗、信息提示等内容。",
|
|
11529
11526
|
"descriptionZh": "弹出层组件，用于展示弹窗、信息提示等内容。",
|
|
11530
|
-
"since": "2.0.
|
|
11527
|
+
"since": "2.0.4",
|
|
11531
11528
|
"doc": "# Popup 弹出层\n\n弹出层组件，用于展示弹窗、信息提示等内容。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 为绑定值，表示是否展示弹出层。\n\n```html\n<wd-popup v-model=\"show\" custom-style=\"border-radius: 32rpx;\" @close=\"handleClose\">\n <text class=\"custom-txt\">弹弹弹</text>\n</wd-popup>\n```\n\n```css\n.custom-txt {\n color: black;\n width: 400rpx;\n height: 400rpx;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 40rpx;\n border-radius: 32rpx;\n}\n```\n\n### 弹出位置\n\n设置 `position`，可选值为 `center`、`top`、`right`、`bottom`、`left`，默认值为 `center`。\n\n```html\n<wd-popup v-model=\"show\" position=\"top\" custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n<wd-popup v-model=\"show\" position=\"right\" custom-style=\"width: 200px;\" @close=\"handleClose\"></wd-popup>\n<wd-popup v-model=\"show\" position=\"bottom\" custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n<wd-popup v-model=\"show\" position=\"left\" custom-style=\"width: 200px;\" @close=\"handleClose\"></wd-popup>\n```\n\n## 组件状态\n\n### 关闭按钮\n\n设置 `closable` 属性。\n\n```html\n<wd-popup v-model=\"show\" position=\"bottom\" closable custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n```\n\n### 禁用遮罩点击\n\n通过设置 `close-on-click-modal=\"false\"`，可以禁用点击遮罩层关闭弹出层。\n\n```html\n<wd-popup v-model=\"show\" position=\"bottom\" :close-on-click-modal=\"false\" closable custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n```\n\n### 禁用遮罩\n\n通过设置 `modal=\"false\"`，可以关闭遮罩层，使底层内容仍可交互。\n\n```html\n<wd-popup v-model=\"show\" position=\"bottom\" :modal=\"false\" closable custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n```\n\n## 组件样式\n\n### 底部安全区\n\n通过设置 `safe-area-inset-bottom=\"true\"`，可以确保底部弹层在刘海屏机型上不会被安全区域遮挡。\n\n```html\n<wd-popup v-model=\"show\" position=\"bottom\" :safe-area-inset-bottom=\"true\" custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n```\n\n## 特殊样式\n\n### 锁定滚动\n\n`lock-scroll` 用于锁定背景滚动。在小程序和 APP 中，如果还需要彻底防止页面滚动穿透，推荐配合 `page-meta` 控制页面 `overflow`。\n\n```html\n<!-- page-meta 只能作为页面第一个节点 -->\n<page-meta :page-style=\"`overflow:${show ? 'hidden' : 'visible'};`\"></page-meta>\n\n<wd-popup v-model=\"show\" lock-scroll position=\"bottom\" :safe-area-inset-bottom=\"true\" custom-style=\"height: 200px;\" @close=\"handleClose\"></wd-popup>\n```\n\n:::tip 提示\nH5 端默认已经处理滚动锁定，一般不需要额外处理滚动穿透。\n:::\n\n### 嵌套弹窗与 root-portal\n\n当使用 `root-portal` 属性时，弹出层会从当前页面结构中脱离出来，用于避免父元素的 `transform`、`filter` 等样式影响弹层的 fixed 定位。\n\n不同平台的实现方式如下：\n\n- H5：使用 Vue 3 的 teleport 特性\n- APP：使用 renderjs 将元素移动到 uni-app 根节点\n- 微信小程序 / 支付宝小程序：使用 root-portal 组件\n- 其他平台：不支持此能力\n\n```html\n<wd-popup v-model=\"showParent\" position=\"center\" custom-style=\"padding: 20px; border-radius: 16px;\">\n <wd-button type=\"success\" size=\"small\" @click=\"showChild = true\">打开传送子弹窗</wd-button>\n\n <wd-popup v-model=\"showChild\" root-portal position=\"center\" custom-style=\"padding: 20px; border-radius: 16px;\">\n <text>这个子弹窗会脱离父层级渲染</text>\n </wd-popup>\n</wd-popup>\n```\n\n:::tip 提示\n`root-portal` 主要用于解决复杂布局中的层级和定位问题，建议在有明确需要时再开启。\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 弹出层是否显示 | `boolean` | `false` |\n| transition | 动画类型，参见 `wd-transition` 组件的 `name` | `TransitionName` | - |\n| closable | 是否显示关闭按钮 | `boolean` | `false` |\n| position | 弹出位置，可选值为 `center`、`top`、`right`、`bottom`、`left` | `string` | `center` |\n| close-on-click-modal | 点击遮罩是否关闭弹出层 | `boolean` | `true` |\n| duration | 动画持续时间 | `number \\| boolean` | `300` |\n| modal | 是否显示遮罩 | `boolean` | `true` |\n| z-index | 弹层层级 | `number` | `10` |\n| hide-when-close | 关闭时是否隐藏弹层节点 | `boolean` | `true` |\n| modal-style | 自定义遮罩样式 | `string` | - |\n| safe-area-inset-bottom | 底部弹层是否适配底部安全区 | `boolean` | `false` |\n| lazy-render | 弹层内容是否懒渲染 | `boolean` | `true` |\n| lock-scroll | 是否锁定背景滚动，锁定后蒙层内内容也将无法滚动 | `boolean` | `true` |\n| root-portal | 是否从页面结构中脱离出来，用于解决 fixed 失效问题 | `boolean` | `false` |\n| round | 是否开启圆角，开启后根据弹出位置自动适配（底部弹出→上圆角，顶部弹出→下圆角，居中→四圆角） | `boolean` | `false` |\n| custom-class | 自定义根节点类名 | `string` | - |\n| custom-style | 自定义弹层样式 | `string` | - |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| close | 弹出层关闭时触发 | - |\n| click-modal | 点击遮罩时触发 | - |\n| before-enter | 进入前触发 | - |\n| enter | 进入时触发 | - |\n| after-enter | 进入后触发 | - |\n| before-leave | 离开前触发 | - |\n| leave | 离开时触发 | - |\n| after-leave | 离开后触发 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 弹层内容 |\n",
|
|
11532
11529
|
"props": [
|
|
11533
11530
|
{
|
|
@@ -11766,7 +11763,7 @@
|
|
|
11766
11763
|
"category": "未分类",
|
|
11767
11764
|
"description": "用于展示操作的当前进度。",
|
|
11768
11765
|
"descriptionZh": "用于展示操作的当前进度。",
|
|
11769
|
-
"since": "2.0.
|
|
11766
|
+
"since": "2.0.4",
|
|
11770
11767
|
"doc": "# Progress 进度条\n\n用于展示操作的当前进度。\n\n## 组件类型\n\n### 基本用法\n\n设置百分比 `percentage`。\n\n```html\n<wd-progress :percentage=\"50\" />\n```\n\n### 内置百分比\n\n通过 `percent-position` 配置百分比显示在进度条内部，并设置对齐方式。\n\n```html\n<wd-progress :percentage=\"50\" :percent-position=\"{ type: 'inner', align: 'center' }\" />\n<wd-progress :percentage=\"50\" status=\"success\" :percent-position=\"{ type: 'inner', align: 'right' }\" />\n<wd-progress :percentage=\"50\" status=\"danger\" :percent-position=\"{ type: 'inner', align: 'left' }\" />\n```\n\n## 组件状态\n\n### 状态\n\n设置 `status`，告知用户当前状态和预期。\n\n```html\n<wd-progress :percentage=\"50\" status=\"success\" hide-text />\n<wd-progress :percentage=\"50\" status=\"danger\" hide-text />\n<wd-progress :percentage=\"50\" status=\"warning\" hide-text />\n```\n\n## 组件样式\n\n### 隐藏进度文字\n\n设置 `hide-text` 隐藏进度文字。\n\n```html\n<wd-progress :percentage=\"50\" hide-text />\n```\n\n### 修改颜色\n\n设置 `color` 修改进度条颜色。\n\n```html\n<wd-progress :percentage=\"50\" color=\"var(--wot-color-theme, #0083ff)\" />\n<wd-progress :percentage=\"50\" color=\"var(--wot-color-success, #00c740)\" />\n<wd-progress :percentage=\"50\" color=\"var(--wot-color-warning, #ffb300)\" />\n```\n\n### 颜色数组\n\n`color` 也可以设置为颜色数组或 `ProgressColor[]`。当传入字符串数组时，组件会自动计算每段颜色对应的进度边界。\n\n```html\n<wd-progress :percentage=\"50\" :color=\"['#00c740', '#ffb300', '#e2231a', '#0083ff']\" />\n<wd-progress :percentage=\"50\" :color=\"colorObject\" />\n```\n\n```ts\nimport type { ProgressColor } from '@/uni_modules/wot-ui/components/wd-progress/types'\n\nconst colorObject: ProgressColor[] = [\n {\n color: 'yellow',\n percentage: 30\n },\n {\n color: 'red',\n percentage: 60\n },\n {\n color: 'blue',\n percentage: 80\n },\n {\n color: 'black',\n percentage: 90\n }\n]\n```\n\n## 特殊样式\n\n### 动态控制\n\n通过修改 `percentage` 绑定值，可以实现动态进度控制。\n\n```html\n<wd-progress :percentage=\"percentage\" />\n<wd-button type=\"danger\" size=\"small\" @click=\"reduce\">-10</wd-button>\n<wd-button type=\"success\" size=\"small\" @click=\"add\">+10</wd-button>\n```\n\n```ts\nconst percentage = ref(50)\n\nfunction add() {\n percentage.value = Math.min(percentage.value + 10, 100)\n}\n\nfunction reduce() {\n percentage.value = Math.max(percentage.value - 10, 0)\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| percentage | 进度数值，最大值为 `100` | `number` | `0` |\n| hide-text | 是否隐藏进度文字 | `boolean` | `false` |\n| color | 进度条颜色，可选值为 `string`、`string[]`、`ProgressColor[]` | `string \\| string[] \\| ProgressColor[]` | - |\n| status | 进度条状态，可选值为 `success`、`danger`、`warning` | `string` | - |\n| duration | 进度增加 `1%` 所需毫秒数 | `number` | `30` |\n| percent-position | 百分比显示位置配置，`type` 可选 `inner`、`outer`，`align` 可选 `left`、`center`、`right` | `PercentPosition` | `{ align: 'right', type: 'outer' }` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n### ProgressColor\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| color | 颜色值 | `string` | - |\n| percentage | 颜色生效的进度阈值 | `number` | - |\n\n### PercentPosition\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 百分比显示位置，可选值为 `inner`、`outer` | `string` | `'outer'` |\n| align | 百分比文本对齐方式，可选值为 `left`、`center`、`right` | `string` | `'right'` |\n",
|
|
11771
11768
|
"props": [
|
|
11772
11769
|
{
|
|
@@ -11898,7 +11895,7 @@
|
|
|
11898
11895
|
},
|
|
11899
11896
|
{
|
|
11900
11897
|
"name": "--wot-progress-label-line-height",
|
|
11901
|
-
"defaultValue": "$typography-label-line
|
|
11898
|
+
"defaultValue": "$typography-label-line-height-size-large",
|
|
11902
11899
|
"description": "文案行高"
|
|
11903
11900
|
},
|
|
11904
11901
|
{
|
|
@@ -11908,7 +11905,7 @@
|
|
|
11908
11905
|
},
|
|
11909
11906
|
{
|
|
11910
11907
|
"name": "--wot-progress-radius",
|
|
11911
|
-
"defaultValue": "$radius-
|
|
11908
|
+
"defaultValue": "$radius-full",
|
|
11912
11909
|
"description": "进度条圆角"
|
|
11913
11910
|
}
|
|
11914
11911
|
],
|
|
@@ -11964,7 +11961,7 @@
|
|
|
11964
11961
|
"category": "未分类",
|
|
11965
11962
|
"description": "单选框用于在一组备选项中进行单选。",
|
|
11966
11963
|
"descriptionZh": "单选框用于在一组备选项中进行单选。",
|
|
11967
|
-
"since": "2.0.
|
|
11964
|
+
"since": "2.0.4",
|
|
11968
11965
|
"doc": "# Radio 单选框\n\n单选框用于在一组备选项中进行单选。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 为绑定值，即当前选中的 `wd-radio` 的 `value`。\n\n```html\n<wd-radio-group v-model=\"value\">\n <wd-radio :value=\"1\">单选框 1</wd-radio>\n <wd-radio type=\"square\" :value=\"2\">单选框 2</wd-radio>\n <wd-radio type=\"dot\" :value=\"3\">单选框 3</wd-radio>\n</wd-radio-group>\n```\n\n```ts\nconst value = ref(1)\n```\n\n### 按钮形态\n\n设置 `type=\"button\"`，可切换为按钮式单选。\n\n```html\n<wd-radio-group v-model=\"value\" type=\"button\">\n <wd-radio :value=\"1\">选项一</wd-radio>\n <wd-radio :value=\"2\">选项二</wd-radio>\n</wd-radio-group>\n```\n\n## 组件状态\n\n### 禁用\n\n可以在 `wd-radio-group` 上设置 `disabled`，统一禁用整组单选框；也可以在单个 `wd-radio` 上单独设置。\n\n```html\n<wd-radio-group v-model=\"value\" disabled>\n <wd-radio :value=\"1\">选项一</wd-radio>\n <wd-radio :value=\"2\">选项二</wd-radio>\n</wd-radio-group>\n```\n\n### 只读状态\n\n设置 `readonly` 后，单选项仍然展示当前值，但不会响应点击切换。\n\n```html\n<wd-radio-group v-model=\"value\" readonly>\n <wd-radio :value=\"1\">选项一</wd-radio>\n <wd-radio :value=\"2\">选项二</wd-radio>\n</wd-radio-group>\n```\n\n### 允许取消选中\n\n设置 `allow-uncheck` 后，点击当前已选中的单选项可以取消选中。\n\n```html\n<wd-radio-group v-model=\"value\" allow-uncheck>\n <wd-radio :value=\"1\">支持取消选中</wd-radio>\n <wd-radio :value=\"2\">支持取消选中</wd-radio>\n</wd-radio-group>\n```\n\n## 组件样式\n\n### 图标位置\n\n设置 `placement` 控制图标显示在文本左侧还是右侧。\n\n```html\n<wd-radio-group v-model=\"value\" placement=\"right\">\n <wd-radio :value=\"1\">单选框 1</wd-radio>\n <wd-radio :value=\"2\">单选框 2</wd-radio>\n</wd-radio-group>\n```\n\n### 修改选中的颜色\n\n设置 `checked-color` 修改选中状态的图标颜色。\n\n```html\n<wd-radio-group v-model=\"value\" checked-color=\"#fa4350\">\n <wd-radio :value=\"1\">选项一</wd-radio>\n <wd-radio :value=\"2\">选项二</wd-radio>\n</wd-radio-group>\n```\n\n### 修改未选中颜色\n\n设置 `unchecked-color` 修改未选中状态的图标颜色。\n\n```html\n<wd-radio-group v-model=\"value\" unchecked-color=\"#fa4350\">\n <wd-radio :value=\"1\">选项一</wd-radio>\n <wd-radio :value=\"2\">选项二</wd-radio>\n</wd-radio-group>\n```\n\n## 特殊样式\n\n### Props 优先级\n\n单个 `wd-radio` 上设置的属性优先级高于 `wd-radio-group`。\n\n```html\n<wd-radio-group v-model=\"value\" type=\"button\" disabled checked-color=\"#fa4350\">\n <wd-radio :value=\"1\" checked-color=\"#000\" :disabled=\"false\">选项一</wd-radio>\n <wd-radio :value=\"2\" :disabled=\"false\">选项二</wd-radio>\n <wd-radio :value=\"3\">选项三</wd-radio>\n</wd-radio-group>\n```\n\n### 结合 Cell 使用\n\n可以将 `wd-radio` 放入 `wd-cell` 的右侧区域，配合整行点击实现列表选择效果。\n\n```html\n<wd-radio-group v-model=\"value\">\n <wd-cell-group border insert>\n <wd-cell title=\"单选框 1\" clickable @click=\"value = 1\">\n <template #right-icon>\n <wd-radio :value=\"1\" />\n </template>\n </wd-cell>\n <wd-cell title=\"单选框 2\" clickable @click=\"value = 2\">\n <template #right-icon>\n <wd-radio :value=\"2\" />\n </template>\n </wd-cell>\n </wd-cell-group>\n</wd-radio-group>\n```\n\n### 自定义图标\n\n通过 `icon` 插槽可自定义选中与未选中图标。\n\n```html\n<wd-radio-group v-model=\"value\">\n <wd-radio :value=\"1\">\n 自定义图标\n <template #icon=\"{ isChecked }\">\n <wd-icon :name=\"isChecked ? 'star-fill' : 'star'\" size=\"22px\" :color=\"isChecked ? '#fa4350' : '#ccc'\" />\n </template>\n </wd-radio>\n</wd-radio-group>\n```\n\n## 布局能力\n\n### 同行展示\n\n设置 `direction=\"horizontal\"`，可让单选框同行排列。\n\n```html\n<wd-radio-group v-model=\"value\" direction=\"horizontal\">\n <wd-radio :value=\"1\">单选框 1</wd-radio>\n <wd-radio :value=\"2\">单选框 2</wd-radio>\n</wd-radio-group>\n```\n\n## RadioGroup Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前选中的值，会自动匹配对应 `wd-radio` 的 `value` | `string \\| number \\| boolean` | - |\n| type | 单选框类型，可选值为 `circle`、`dot`、`square`、`button` | `string` | `circle` |\n| checked-color | 选中状态的图标颜色 | `string` | - |\n| unchecked-color | 未选中状态的图标颜色 | `string` | - |\n| disabled | 是否禁用整组单选框 | `boolean` | `false` |\n| readonly | 是否只读 | `boolean` | `false` |\n| placement | 图标位置，可选值为 `left`、`right` | `string` | `left` |\n| direction | 布局方向，可选值为 `horizontal`、`vertical` | `string` | `vertical` |\n| allow-uncheck | 是否允许取消当前已选中的值 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## RadioGroup Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 绑定值变化时触发 | `{ value }` |\n\n## Radio Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value | 单选项的值，会与 `wd-radio-group` 的 `v-model` 匹配 | `string \\| number \\| boolean` | - |\n| type | 单选框类型，可选值为 `circle`、`dot`、`square`、`button` | `string` | 继承自 `wd-radio-group` |\n| checked-color | 选中状态的图标颜色 | `string` | 继承自 `wd-radio-group` |\n| unchecked-color | 未选中状态的图标颜色 | `string` | 继承自 `wd-radio-group` |\n| disabled | 是否禁用当前单选项 | `boolean` | 继承自 `wd-radio-group` |\n| readonly | 是否只读 | `boolean` | 继承自 `wd-radio-group` |\n| placement | 图标位置，可选值为 `left`、`right` | `string` | 继承自 `wd-radio-group` |\n| direction | 布局方向，可选值为 `horizontal`、`vertical` | `string` | 继承自 `wd-radio-group` |\n| custom-label-class | 自定义文本节点类名 | `string` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Slots\n\n| 组件 | name | 说明 | 参数 |\n| --- | --- | --- | --- |\n| wd-radio | default | 单选项文本内容 | - |\n| wd-radio | icon | 自定义图标内容 | `{ isChecked }` |\n\n",
|
|
11969
11966
|
"props": [
|
|
11970
11967
|
{
|
|
@@ -12084,7 +12081,7 @@
|
|
|
12084
12081
|
},
|
|
12085
12082
|
{
|
|
12086
12083
|
"name": "--wot-radio-label-line-height",
|
|
12087
|
-
"defaultValue": "$typography-body-line
|
|
12084
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
12088
12085
|
"description": "文案行高"
|
|
12089
12086
|
},
|
|
12090
12087
|
{
|
|
@@ -12109,7 +12106,7 @@
|
|
|
12109
12106
|
},
|
|
12110
12107
|
{
|
|
12111
12108
|
"name": "--wot-radio-button-shape-border-radius",
|
|
12112
|
-
"defaultValue": "$radius-
|
|
12109
|
+
"defaultValue": "$radius-full",
|
|
12113
12110
|
"description": "按钮模式标记圆角"
|
|
12114
12111
|
},
|
|
12115
12112
|
{
|
|
@@ -12124,7 +12121,7 @@
|
|
|
12124
12121
|
},
|
|
12125
12122
|
{
|
|
12126
12123
|
"name": "--wot-radio-button-line-height",
|
|
12127
|
-
"defaultValue": "$typography-body-line
|
|
12124
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
12128
12125
|
"description": "按钮模式行高"
|
|
12129
12126
|
},
|
|
12130
12127
|
{
|
|
@@ -12280,7 +12277,7 @@
|
|
|
12280
12277
|
"category": "未分类",
|
|
12281
12278
|
"description": "用于快速评价，或展示评分结果。",
|
|
12282
12279
|
"descriptionZh": "用于快速评价，或展示评分结果。",
|
|
12283
|
-
"since": "2.0.
|
|
12280
|
+
"since": "2.0.4",
|
|
12284
12281
|
"doc": "# Rate 评分\n\n用于快速评价，或展示评分结果。\n\n## 组件类型\n\n### 基本用法\n\n设置 `v-model` 绑定当前分数，`num` 用于设置总分，默认值为 `5`。\n\n```html\n<wd-rate v-model=\"value\" @change=\"handleChange\" />\n```\n\n```ts\nconst value = ref(5)\n\nfunction handleChange({ value }: { value: number }) {\n console.log(value)\n}\n```\n\n## 组件状态\n\n### 只读\n\n设置 `readonly` 属性。\n\n```html\n<wd-rate v-model=\"value\" readonly />\n```\n\n### 禁用\n\n设置 `disabled` 属性。\n\n```html\n<wd-rate v-model=\"value\" disabled />\n```\n\n## 组件样式\n\n### 修改选中颜色\n\n可以通过 `active-color` 修改选中图标颜色，也支持传入双色数组实现分段颜色。\n\n```html\n<wd-rate v-model=\"value\" active-color=\"linear-gradient(180deg, rgba(255, 238, 0, 1) 0%, rgba(250, 176, 21, 1) 100%)\" />\n<wd-rate\n v-model=\"value\"\n :active-color=\"[\n 'linear-gradient(180deg, rgba(255, 238, 0, 1) 0%, rgba(250, 176, 21, 1) 100%)',\n 'linear-gradient(315deg, rgba(245, 34, 34, 1) 0%, rgba(255, 117, 102, 1) 100%)'\n ]\"\n/>\n```\n\n### 修改图标与颜色\n\n可以通过 `icon`、`active-icon` 分别设置未选中和选中图标，结合 `active-color` 自定义视觉风格。\n\n```html\n<wd-rate v-model=\"value\" block icon=\"Fire\" active-icon=\"Fire\" active-color=\"var(--wot-red-6)\" />\n<wd-rate v-model=\"value\" block icon=\"thumb-down-fill\" active-icon=\"thumb-up-fill\" active-color=\"var(--wot-green-6)\" />\n```\n\n### 修改大小与间隔\n\n通过 `size` 修改图标大小，`space` 修改图标间距。\n\n```html\n<wd-rate v-model=\"value\" size=\"36\" space=\"12px\" />\n```\n\n## 特殊样式\n\n### 允许半选\n\n设置 `allow-half` 属性。\n\n```html\n<wd-rate v-model=\"value\" allow-half />\n```\n\n### 允许清空评分\n\n设置 `clearable` 属性后，再次点击当前最小分值时可清空评分。与 `allow-half` 组合时，可清空半星评分。\n\n```html\n<wd-rate v-model=\"value\" clearable />\n<wd-rate v-model=\"value\" clearable allow-half />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前分数 | `number \\| null` | `null` |\n| num | 评分最大值 | `number` | `5` |\n| readonly | 是否只读 | `boolean` | `false` |\n| size | 图标大小 | `string` | - |\n| space | 图标间距 | `string \\| number` | - |\n| color | 未选中图标颜色 | `string` | - |\n| active-color | 选中图标颜色，支持 `string` 或 `string[]` | `string \\| string[]` | - |\n| icon | 未选中图标类名 | `string` | `'star-fill'` |\n| active-icon | 选中图标类名 | `string` | `'star-fill'` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| allow-half | 是否允许半选 | `boolean` | `false` |\n| clearable | 是否允许再次点击后清除 | `boolean` | `false` |\n| block | 是否块级显示 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 点击图标修改分值时触发 | `{ value }` |\n\n",
|
|
12285
12282
|
"props": [
|
|
12286
12283
|
{
|
|
@@ -12467,7 +12464,7 @@
|
|
|
12467
12464
|
"category": "未分类",
|
|
12468
12465
|
"description": "当组件包裹的文档流尺寸发生变化时，触发 `resize` 事件。一般用于监听内容更新引起的尺寸和位置信息变化，再据此重新进行布局计算。",
|
|
12469
12466
|
"descriptionZh": "当组件包裹的文档流尺寸发生变化时，触发 `resize` 事件。一般用于监听内容更新引起的尺寸和位置信息变化，再据此重新进行布局计算。",
|
|
12470
|
-
"since": "2.0.
|
|
12467
|
+
"since": "2.0.4",
|
|
12471
12468
|
"doc": "# Resize 监听元素尺寸变化\n\n当组件包裹的文档流尺寸发生变化时，触发 `resize` 事件。一般用于监听内容更新引起的尺寸和位置信息变化，再据此重新进行布局计算。\n\n## 组件类型\n\n### 基本用法\n\n不要给 `wd-resize` 自身增加额外布局样式，而是把需要被监听的内容放在默认插槽中。\n\n::: code-group\n\n```html [vue]\n<wd-resize @resize=\"handleResize\">\n <view :style=\"{ background: '#4d80f0', width, height }\"></view>\n</wd-resize>\n```\n\n```ts [ts]\nimport { onReady } from '@dcloudio/uni-app'\nimport { ref } from 'vue'\n\nconst width = ref('')\nconst height = ref('')\n\nonReady(() => {\n setTimeout(() => {\n width.value = '100px'\n height.value = '100px'\n }, 1500)\n})\n\nfunction handleResize(detail: Record<string, string | number>) {\n const { height, width, top, right, bottom, left } = detail\n}\n```\n\n:::\n\n## Resize Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| custom-style | 自定义根节点样式 | `string` | `''` |\n| custom-class | 自定义根节点样式类 | `string` | `''` |\n| custom-container-class | 自定义容器样式类 | `string` | `''` |\n\n## Resize Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| resize | 尺寸发生变化时触发 | <code>{ width: number; height: number; top: number; right: number; bottom: number; left: number }</code> |\n\n## Resize Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 需要监听尺寸变化的内容 |\n",
|
|
12472
12469
|
"props": [
|
|
12473
12470
|
{
|
|
@@ -12523,7 +12520,7 @@
|
|
|
12523
12520
|
"category": "未分类",
|
|
12524
12521
|
"description": "是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。",
|
|
12525
12522
|
"descriptionZh": "是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。",
|
|
12526
|
-
"since": "2.0.
|
|
12523
|
+
"since": "2.0.4",
|
|
12527
12524
|
"doc": "# Root Portal 根节点传送\n\n是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。\n\n:::tip 提示\n根节点传送组件仅支持`微信小程序`、`支付宝小程序`、`APP`和`H5`平台，组件会自动根据平台选择合适的实现方式：\n\n- **H5 端**：使用 `teleport` 特性\n- **微信小程序和支付宝小程序**：使用 `root-portal` 组件\n- **App 端**：使用 renderjs 实现\n- **其他平台**：不支持此功能\n\n该功能主要用于解决复杂布局中弹窗的层级和定位问题，在需要时才建议使用。\n:::\n## 组件类型\n\n### 基本用法\n\n使用 `wd-root-portal` 将内容渲染到根节点，避免被父组件样式影响。\n\n```html\n<wd-button type=\"primary\" @click=\"show = true\">显示弹窗</wd-button>\n\n<wd-root-portal v-if=\"show\">\n <view class=\"modal\">\n <view class=\"modal-content\">\n <text>这是一个全局弹窗</text>\n <wd-button @click=\"show = false\">关闭</wd-button>\n </view>\n </view>\n</wd-root-portal>\n```\n\n```scss\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: #fff;\n padding: 24px;\n border-radius: 12px;\n width: 280px;\n text-align: center;\n}\n```\n\n## 特殊样式\n\n### 与弹层组件配合使用\n\n部分弹层组件本身支持 `root-portal` 属性，例如 `wd-select-picker`。这类场景仍然需要由外部触发器控制弹层显隐，再通过组件属性开启根节点传送能力。\n\n```html\n<wd-cell title=\"选择商品分类\" :value=\"selectedLabel\" is-link @click=\"showPicker = true\" />\n<wd-select-picker v-model=\"value\" v-model:visible=\"showPicker\" :columns=\"columns\" root-portal @confirm=\"handleConfirm\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst showPicker = ref(false)\nconst value = ref<string[]>([])\nconst selectedLabel = ref('')\nconst columns = ref([\n { value: '101', label: '男装' },\n { value: '102', label: '奢侈品' },\n { value: '103', label: '女装' }\n])\n\nfunction handleConfirm({ value }: { value: string[] }) {\n selectedLabel.value = columns.value\n .filter((item) => value.includes(item.value))\n .map((item) => item.label)\n .join('、')\n}\n```\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 默认插槽，用于渲染传送内容 |\n",
|
|
12528
12525
|
"props": [],
|
|
12529
12526
|
"events": [],
|
|
@@ -12556,7 +12553,7 @@
|
|
|
12556
12553
|
"category": "未分类",
|
|
12557
12554
|
"description": "搜索框组件，支持输入框聚焦、失焦、输入、搜索、取消、清空事件。",
|
|
12558
12555
|
"descriptionZh": "搜索框组件，支持输入框聚焦、失焦、输入、搜索、取消、清空事件。",
|
|
12559
|
-
"since": "2.0.
|
|
12556
|
+
"since": "2.0.4",
|
|
12560
12557
|
"doc": "# Search 搜索框\n\n搜索框组件，支持输入框聚焦、失焦、输入、搜索、取消、清空事件。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 设置输入框绑定值，`change` 监听输入事件，`search` 监听搜索事件，`cancel` 监听取消事件，`clear` 监听清空事件。\n\n```html\n<wd-search v-model=\"value\" @search=\"search\" @clear=\"clear\" @cancel=\"cancel\" @change=\"change\" />\n```\n\n```ts\nconst value = ref<string>('')\n\nfunction search({ value }: { value: string }) {\n console.log('搜索', value)\n}\nfunction clear() {\n console.log('重置')\n}\nfunction cancel({ value }: { value: string }) {\n console.log('取消', value)\n}\nfunction change({ value }: { value: string }) {\n console.log('输入', value)\n}\n```\n\n## 组件状态\n\n### 自动聚焦\n\n设置 `focus` 属性，组件挂载后自动聚焦。\n\n```html\n<wd-search v-model=\"value\" focus />\n```\n\n### 清空后自动聚焦\n\n设置 `focus-when-clear`，点击清空按钮后重新聚焦输入框。\n\n```html\n<wd-search v-model=\"value\" focus-when-clear />\n```\n\n### 禁用并隐藏取消按钮\n\n设置 `disabled` 和 `hide-cancel`。可用于跳转到独立搜索页的入口场景。\n\n```html\n<wd-search disabled hide-cancel @click=\"handleDisabledClick\" />\n```\n\n## 组件变体\n\n### 样式变体\n\n通过 `variant` 切换不同视觉样式，可选值为 `plain`、`filled`、`light`。\n\n```html\n<wd-search variant=\"plain\" v-model=\"value\" />\n<wd-search variant=\"filled\" v-model=\"value\" />\n<wd-search variant=\"light\" v-model=\"value\" />\n```\n\n## 组件样式\n\n### 输入框提示文案靠左\n\n设置 `placeholder-left` 属性。\n\n```html\n<wd-search placeholder-left />\n```\n\n### 设置最大长度\n\n通过 `maxlength` 限制输入框最大长度，`-1` 表示不限制。\n\n```html\n<wd-search v-model=\"value\" :maxlength=\"4\" />\n```\n\n### 自定义文案\n\n通过 `placeholder` 修改占位文本，`cancel-txt` 修改取消按钮文案。\n\n```html\n<wd-search placeholder=\"请输入订单号/订单名称\" cancel-txt=\"搜索\" />\n```\n\n## 特殊样式\n\n### 自定义左侧插槽\n\n通过 `prefix` 插槽自定义搜索框左侧内容。\n\n```html\n<wd-search v-model=\"value\">\n <template #prefix>\n <wd-popover mode=\"menu\" :content=\"menu\" @menuclick=\"changeSearchType\">\n <view class=\"search-type\">\n <text>{{ searchType }}</text>\n <wd-icon custom-class=\"icon-arrow\" name=\"fill-arrow-down\"></wd-icon>\n </view>\n </wd-popover>\n </template>\n</wd-search>\n```\n\n```typescript\nconst searchType = ref<string>('全部')\nconst value = ref<string>('')\nconst menu = ref([\n {\n content: '全部'\n },\n {\n content: '订单号'\n },\n {\n content: '退款单号'\n }\n])\n\nfunction changeSearchType({ item }) {\n searchType.value = item.content\n}\n```\n\n```scss\n.search-type {\n position: relative;\n height: 30px;\n line-height: 30px;\n padding: 0 8px 0 16px;\n}\n.search-type::after {\n position: absolute;\n content: '';\n width: 1px;\n right: 0;\n top: 5px;\n bottom: 5px;\n background: rgba(0, 0, 0, 0.25);\n}\n.search-type {\n :deep(.icon-arrow) {\n display: inline-block;\n font-size: 20px;\n vertical-align: middle;\n }\n}\n```\n\n### 自定义输入框右侧图标\n\n```html\n<wd-search v-model=\"value\">\n <template #input-suffix>\n <wd-icon name=\"scan\" size=\"20px\"></wd-icon>\n </template>\n</wd-search>\n```\n\n### 自定义右侧插槽\n\n```html\n<wd-search v-model=\"value\">\n <template #suffix>\n <view>筛选条件</view>\n </template>\n</wd-search>\n```\n\n### 多种插槽组合\n\n```html\n<wd-search variant=\"plain\" v-model=\"value\">\n <template #input-suffix>\n <wd-icon name=\"scan\" size=\"20px\"></wd-icon>\n </template>\n <template #suffix>\n <view class=\"action-icons\">\n <wd-icon name=\"filter\" size=\"20px\"></wd-icon>\n <wd-icon name=\"plus-circle-fill\" size=\"20px\"></wd-icon>\n </view>\n </template>\n</wd-search>\n```\n\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 输入框内容，双向绑定 | `string` | `''` |\n| custom-input-class | 自定义输入框类名 | `string` | `''` |\n| placeholder | 搜索框占位文本 | `string` | `'搜索'` |\n| cancel-txt | 搜索框右侧文本 | `string` | `'取消'` |\n| variant | 搜索框变体，可选值为 `plain`、`filled`、`light` | `string` | `'plain'` |\n| hide-cancel | 是否隐藏右侧文本 | `boolean` | `false` |\n| disabled | 是否禁用搜索框 | `boolean` | `false` |\n| maxlength | 原生属性，设置最大长度，`-1` 表示无限制 | `number \\| string` | `-1` |\n| placeholder-left | placeholder 是否左对齐 | `boolean` | `false` |\n| focus | 是否自动聚焦 | `boolean` | `false` |\n| focus-when-clear | 是否在点击清空按钮后聚焦输入框 | `boolean` | `false` |\n| placeholder-style | 原生属性，指定 placeholder 的样式，目前仅支持 `color`、`font-size` 和 `font-weight` | `string` | - |\n| placeholder-class | 原生属性，指定 placeholder 的样式类 | `string` | `''` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| focus | 输入框聚焦事件 | `{ value }` |\n| blur | 输入框失焦事件 | `{ value }` |\n| search | 输入框搜索事件 | `{ value }` |\n| clear | 点击清空按钮时触发 | - |\n| cancel | 点击右侧文本时触发 | `{ value }` |\n| change | 输入框内容变化时触发 | `{ value }` |\n| click | 禁用状态下点击组件时触发 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| prefix | 输入框左侧自定义内容 |\n| input-suffix | 输入框内部右侧自定义内容 |\n| suffix | 输入框右侧自定义内容 |\n",
|
|
12561
12558
|
"props": [
|
|
12562
12559
|
{
|
|
@@ -12709,7 +12706,7 @@
|
|
|
12709
12706
|
},
|
|
12710
12707
|
{
|
|
12711
12708
|
"name": "--wot-search-input-radius",
|
|
12712
|
-
"defaultValue": "$radius-
|
|
12709
|
+
"defaultValue": "$radius-full",
|
|
12713
12710
|
"description": "输入框圆角"
|
|
12714
12711
|
},
|
|
12715
12712
|
{
|
|
@@ -12794,7 +12791,7 @@
|
|
|
12794
12791
|
},
|
|
12795
12792
|
{
|
|
12796
12793
|
"name": "--wot-search-input-line-height",
|
|
12797
|
-
"defaultValue": "$typography-body-line
|
|
12794
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
12798
12795
|
"description": "输入框文字行高"
|
|
12799
12796
|
},
|
|
12800
12797
|
{
|
|
@@ -12834,7 +12831,7 @@
|
|
|
12834
12831
|
},
|
|
12835
12832
|
{
|
|
12836
12833
|
"name": "--wot-search-placeholder-line-height",
|
|
12837
|
-
"defaultValue": "$typography-body-line
|
|
12834
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
12838
12835
|
"description": "占位符行高"
|
|
12839
12836
|
},
|
|
12840
12837
|
{
|
|
@@ -12844,7 +12841,7 @@
|
|
|
12844
12841
|
},
|
|
12845
12842
|
{
|
|
12846
12843
|
"name": "--wot-search-cancel-line-height",
|
|
12847
|
-
"defaultValue": "$typography-body-line
|
|
12844
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
12848
12845
|
"description": "取消按钮行高"
|
|
12849
12846
|
},
|
|
12850
12847
|
{
|
|
@@ -12935,7 +12932,7 @@
|
|
|
12935
12932
|
"category": "未分类",
|
|
12936
12933
|
"description": "分段器用于展示多个选项并允许用户选择其中单个选项。",
|
|
12937
12934
|
"descriptionZh": "分段器用于展示多个选项并允许用户选择其中单个选项。",
|
|
12938
|
-
"since": "2.0.
|
|
12935
|
+
"since": "2.0.4",
|
|
12939
12936
|
"doc": "# Segmented 分段器\n\n分段器用于展示多个选项并允许用户选择其中单个选项。\n\n## 何时使用\n\n- 用于展示多个选项并允许用户选择其中单个选项；\n- 当切换选中选项时，关联区域的内容会发生变化。\n\n## 组件类型\n\n### 基本用法\n\n通过 `options` 设置选项列表，通过 `v-model:value` 绑定当前选中项。\n\n```vue\n<wd-segmented :options=\"list\" v-model:value=\"current\"></wd-segmented>\n```\n\n```ts\nconst list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])\n\nconst current = ref('点赞')\n```\n\n## 组件状态\n\n### 禁用\n\n设置 `disabled` 属性禁用整个分段器。\n\n```html\n<wd-segmented :options=\"list\" v-model:value=\"current\" disabled></wd-segmented>\n```\n\n## 组件变体\n\n### 轮廓主题\n\n通过 `theme=\"outline\"` 切换为轮廓样式。\n\n```html\n<wd-segmented :options=\"list\" v-model:value=\"current\" theme=\"outline\"></wd-segmented>\n```\n\n## 组件样式\n\n### 自定义渲染分段器标签\n\n使用插槽 `label` 可以自定义渲染分段器的标签内容。\n\n```html\n<wd-segmented :options=\"list\" v-model:value=\"current\" :vibrate-short=\"true\">\n <template #label=\"{ option }\">\n <view class=\"section-slot\">\n <image style=\"border-radius: 50%; width: 32px; height: 32px\" :src=\"option.payload.avatar\" />\n <view class=\"name\">{{ option.value }}</view>\n </view>\n </template>\n</wd-segmented>\n```\n\n```ts\nconst list = ref([\n {\n value: '李雷',\n disabled: false,\n payload: {\n avatar: 'https://wot-ui.cn/assets/redpanda.jpg'\n }\n },\n {\n value: '韩梅梅',\n disabled: false,\n payload: {\n avatar: 'https://wot-ui.cn/assets/capybara.jpg'\n }\n }\n])\n```\n\n```scss\n.section {\n width: 100%;\n padding: 0 24rpx;\n box-sizing: border-box;\n &-slot {\n padding: 4px;\n }\n}\n```\n\n## 特殊样式\n\n### 带振动效果的分段器\n\n设置 `vibrate-short` 后，切换选项时会触发短振动反馈。\n\n```html\n<wd-segmented :options=\"list\" v-model:value=\"current\" :vibrate-short=\"true\"></wd-segmented>\n```\n\n### 在弹出框中使用\n微信小程序端，在弹出框中使用本组件时，需要调用 `updateActiveStyle` 方法更新分段器样式，参见[常见问题](/guide/common-problems.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8A%E4%BD%BF%E7%94%A8popup%E3%80%81actionsheet%E3%80%81dropdownitem%E7%AD%89%E5%BC%B9%E5%87%BA%E6%A1%86%E7%BB%84%E4%BB%B6%E5%8C%85%E8%A3%B9slider%E3%80%81tabs%E7%AD%89%E7%BB%84%E4%BB%B6%E6%97%B6-slider%E3%80%81tabs%E8%A1%A8%E7%8E%B0%E5%BC%82%E5%B8%B8)。\n\n\n```html\n<wd-button @click=\"handleClick\">打开弹窗</wd-button>\n<wd-popup v-model=\"showPopup\" position=\"bottom\" @after-enter=\"handlePopupShow\" closable custom-style=\"height: 200px;padding: 0 24rpx;\">\n <view class=\"title\">在弹出框中使用</view>\n <wd-segmented :options=\"list\" v-model:value=\"current\" ref=\"segmentedRef\"></wd-segmented>\n</wd-popup>\n```\n```ts\nconst list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])\nconst current = ref('点赞')\n\nconst segmentedRef = ref<SegmentedInstance>() // 获取分段器实例\nconst showPopup = ref(false) // 控制popup显示\n/**\n * 点击按钮打开popup\n */\nfunction handleClick() {\n showPopup.value = true\n}\n/**\n * popup打开后更新分段器样式\n */\nfunction handlePopupShow() {\n segmentedRef.value?.updateActiveStyle()\n}\n```\n```css\n.title {\n display: flex;\n font-size: 32rpx;\n align-items: center;\n justify-content: center;\n padding: 24rpx 0;\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value / v-model:value | 当前选中的值 | `string \\| number` | - |\n| disabled | 是否禁用分段器 | `boolean` | `false` |\n| options | 数据集合 | `string[] \\| number[] \\| SegmentedOption[]` | `[]` |\n| theme | 分段器主题，可选值为 `card`、`outline` | `string` | `'card'` |\n| vibrate-short | 切换选项时是否触发短振动 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n### SegmentedOption\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value | 选项值 | `string \\| number` | - |\n| disabled | 是否禁用该选项 | `boolean` | `false` |\n| payload | 附加数据，可用于插槽渲染 | `any` | - |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 选项切换时触发 | `SegmentedOption` |\n| click | 选项点击时触发 | `SegmentedOption` |\n\n## Methods\n\n| 方法名 | 说明 | 类型 |\n| --- | --- | --- |\n| updateActiveStyle | 更新滑块偏移量，参数 `animation` 用于控制是否启用动画，默认开启 | `(animation?: boolean) => void` |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| label | 选项标签内容 | `{ option: SegmentedOption }` |\n\n",
|
|
12940
12937
|
"props": [
|
|
12941
12938
|
{
|
|
@@ -13032,7 +13029,7 @@
|
|
|
13032
13029
|
},
|
|
13033
13030
|
{
|
|
13034
13031
|
"name": "--wot-segmented-item-line-height",
|
|
13035
|
-
"defaultValue": "$typography-body-line
|
|
13032
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
13036
13033
|
"description": "选项文字行高"
|
|
13037
13034
|
},
|
|
13038
13035
|
{
|
|
@@ -13162,7 +13159,7 @@
|
|
|
13162
13159
|
"category": "未分类",
|
|
13163
13160
|
"description": "用于从一组选项中进行单选或多选，通常配合外部单元格或按钮控制弹层显示。",
|
|
13164
13161
|
"descriptionZh": "用于从一组选项中进行单选或多选，通常配合外部单元格或按钮控制弹层显示。",
|
|
13165
|
-
"since": "2.0.
|
|
13162
|
+
"since": "2.0.4",
|
|
13166
13163
|
"doc": "# SelectPicker 单复选选择器\n\n用于从一组选项中进行单选或多选，通常配合外部单元格或按钮控制弹层显示。\n\n## 组件类型\n\n### 基本用法\n\n默认 `type` 为 `checkbox`，`v-model` 的值类型为数组。通常配合 `v-model:visible` 控制弹层开关。\n\n```html\n<wd-cell title=\"选择地址\" :value=\"getDisplayValue(value)\" is-link @click=\"show = true\" />\n<wd-select-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" @confirm=\"handleConfirm\" />\n```\n\n```ts\nconst columns = ref([\n { value: '101', label: '男装' },\n { value: '102', label: '奢侈品' },\n { value: '103', label: '女装' }\n])\n\nconst value = ref<string[]>(['101'])\nconst show = ref(false)\n\nfunction handleConfirm({ value }: { value: string[] }) {\n console.log(value)\n}\n```\n\n### 类型切换\n\n设置 `type=\"radio\"` 开启单选模式，此时 `v-model` 的值类型为 `string`、`number` 或 `boolean`。\n\n```html\n<wd-select-picker type=\"radio\" v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" />\n```\n\n## 组件状态\n\n### 禁用选项\n\n选项数据支持 `disabled` 字段，用于禁用某一项。\n\n```html\n<wd-select-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" />\n```\n\n```ts\nconst columns = ref([\n { value: '101', label: '男装', disabled: true },\n { value: '102', label: '奢侈品' },\n { value: '103', label: '女装' }\n])\n```\n\n### 加载中\n\n设置 `loading` 后会在内容区域显示加载状态。\n\n```html\n<wd-select-picker loading v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" />\n```\n\n## 组件样式\n\n### 设置标题\n\n通过 `title` 自定义弹层标题。\n\n```html\n<wd-select-picker v-model=\"value\" v-model:visible=\"show\" title=\"多选\" :columns=\"columns\" />\n```\n\n### 可搜索\n\n设置 `filterable` 开启本地搜索；单选和多选模式都支持。\n\n```html\n<wd-select-picker filterable v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" />\n<wd-select-picker filterable type=\"radio\" v-model=\"singleValue\" v-model:visible=\"show\" :columns=\"columns\" />\n```\n\n## 特殊样式\n\n### 选项变化事件\n\n选择器内部选项发生变化时，会触发 `change` 事件。\n\n```html\n<wd-select-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" @change=\"handleChange\" />\n```\n\n```ts\nfunction handleChange({ value }: { value: string[] }) {\n console.log(value)\n}\n```\n\n### 确定前校验\n\n设置 `before-confirm`，可在点击确认按钮前执行同步或异步校验。返回 `false` 或 `Promise<false>` 时不会关闭弹层。\n\n```html\n<wd-select-picker v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" :before-confirm=\"beforeConfirm\" />\n```\n\n```ts\nconst beforeConfirm = (value: string[]) => {\n return new Promise<boolean>((resolve) => {\n if (value.length > 0) {\n resolve(false)\n } else {\n resolve(true)\n }\n })\n}\n```\n\n### 自动完成\n\n`radio` 模式下可通过 `show-confirm=\"false\"` 隐藏确认按钮，选中后自动完成。\n\n```html\n<wd-select-picker type=\"radio\" :show-confirm=\"false\" v-model=\"value\" v-model:visible=\"show\" :columns=\"columns\" />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 选中项，`checkbox` 时为数组，`radio` 时为 `string`、`number` 或 `boolean` | `string \\| number \\| boolean \\| (string \\| number \\| boolean)[]` | - |\n| visible / v-model:visible | 控制弹层显示状态 | `boolean` | `false` |\n| title | 弹出层标题 | `string` | `'选择器'` |\n| checked-color | 单选框或复选框选中颜色 | `string` | - |\n| min | 最小选中数量，仅 `checkbox` 生效 | `number` | `0` |\n| max | 最大选中数量，`0` 表示不限制，仅 `checkbox` 生效 | `number` | `0` |\n| select-size | 选择器内部选项尺寸 | `string` | - |\n| loading | 是否显示加载状态 | `boolean` | `false` |\n| loading-color | 加载图标颜色 | `string` | `'#4D80F0'` |\n| close-on-click-modal | 点击遮罩是否关闭 | `boolean` | `true` |\n| columns | 选择器数据，一维数组 | `Record<string, any>[]` | `[]` |\n| type | 选择器类型，可选值为 `checkbox`、`radio` | `string` | `'checkbox'` |\n| value-key | 选项对象中值字段的 key | `string` | `'value'` |\n| label-key | 选项对象中展示文本字段的 key | `string` | `'label'` |\n| confirm-button-text | 确认按钮文案 | `string` | `'确认'` |\n| before-confirm | 确认前校验函数，接收当前选中值，返回 `boolean` 或 `Promise<boolean>` | `function` | - |\n| z-index | 弹层层级 | `number` | `15` |\n| safe-area-inset-bottom | 是否适配底部安全区 | `boolean` | `true` |\n| filterable | 是否支持本地搜索 | `boolean` | `false` |\n| filter-placeholder | 搜索框占位符 | `string` | `'搜索'` |\n| scroll-into-view | 重新打开时是否滚动到选中项 | `boolean` | `true` |\n| custom-content-class | 自定义弹层内容区域类名 | `string` | `''` |\n| show-confirm | 是否显示确认按钮，仅 `radio` 模式生效 | `boolean` | `true` |\n| root-portal | 是否从页面结构中脱离出来，用于解决 fixed 失效问题 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## 选项数据结构\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value | 选项值 | `string \\| number \\| boolean` | - |\n| label | 选项文案 | `string` | - |\n| disabled | 是否禁用该选项 | `boolean` | `false` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 选择器内部选项变化时触发 | `{ value }` |\n| cancel | 点击关闭按钮或遮罩关闭时触发 | - |\n| confirm | 点击确认时触发 | `{ value, selectedItems }` |\n| open | 弹层打开时触发 | - |\n| close | 弹层关闭时触发 | - |\n\n## Methods\n\n| 方法名 | 说明 | 类型 |\n| --- | --- | --- |\n| open | 打开弹层 | `() => void` |\n| close | 关闭弹层 | `() => void` |\n\n",
|
|
13167
13164
|
"props": [
|
|
13168
13165
|
{
|
|
@@ -13461,7 +13458,7 @@
|
|
|
13461
13458
|
"category": "未分类",
|
|
13462
13459
|
"description": "垂直展示的导航栏，用于在不同内容区域之间进行切换。",
|
|
13463
13460
|
"descriptionZh": "垂直展示的导航栏，用于在不同内容区域之间进行切换。",
|
|
13464
|
-
"since": "2.0.
|
|
13461
|
+
"since": "2.0.4",
|
|
13465
13462
|
"doc": "# Sidebar 侧边导航\n\n垂直展示的导航栏，用于在不同内容区域之间进行切换。\n\n## 组件类型\n\n### 基础用法\n\n通过 `v-model` 绑定当前选中项的值。\n\n```html\n<wd-sidebar v-model=\"active\">\n <wd-sidebar-item :value=\"0\" label=\"标签名称\" />\n <wd-sidebar-item :value=\"1\" label=\"标签名称\" />\n <wd-sidebar-item :value=\"2\" label=\"标签名称\" />\n</wd-sidebar>\n```\n\n```ts\nconst active = ref(0)\n```\n\n## 组件状态\n\n### 徽标提示\n\n设置 `is-dot` 可展示红点徽标；设置 `badge` 或 `badge-props` 可展示数字徽标。\n\n```html\n<wd-sidebar v-model=\"active\">\n <wd-sidebar-item :value=\"0\" label=\"标签名称\" is-dot />\n <wd-sidebar-item :value=\"1\" label=\"标签名称\" badge=\"5\" />\n <wd-sidebar-item :value=\"2\" label=\"标签名称\" :badge-props=\"{ type: 'warning', value: 55, max: 99 }\" />\n</wd-sidebar>\n```\n\n### 禁用与异步切换\n\n设置 `disabled` 可禁用当前选项；设置 `before-change` 可在切换前执行同步或异步逻辑。\n\n```html\n<wd-sidebar v-model=\"active\" :before-change=\"beforeChange\">\n <wd-sidebar-item :value=\"0\" label=\"标签名称\" />\n <wd-sidebar-item :value=\"1\" label=\"标签名称\" disabled />\n <wd-sidebar-item :value=\"2\" label=\"标签名称\" />\n</wd-sidebar>\n```\n\n```ts\nimport type { SidebarBeforeChange } from '@/uni_modules/wot-ui/components/wd-sidebar/types'\n\nconst beforeChange: SidebarBeforeChange = (value) => {\n return new Promise((resolve) => {\n setTimeout(() => resolve(true), 2000)\n })\n}\n```\n\n## 特殊样式\n\n### 锚点用法示例\n\nsidebar 可以与 `scroll-view` 结合，实现长内容页的锚点切换。仓库中的示例可参考 `src/subPages/sidebar/demo1.vue`。\n\n### 切换页面用法示例\n\nsidebar 也可以作为左侧目录，右侧内容区按当前选中项整屏切换。仓库中的示例可参考 `src/subPages/sidebar/demo2.vue`。\n\n### 自定义图标示例\n\n设置 `wd-sidebar-item` 的 `icon` 属性，可在导航项中显示不同图标。仓库中的示例可参考 `src/subPages/sidebar/demo3.vue`。\n\n## Sidebar Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value / v-model | 当前激活项的值 | `string \\| number` | `0` |\n| before-change | 切换前钩子，接收目标值，返回 `boolean` 或 `Promise<boolean>` | `function` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Sidebar Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 激活项切换时触发 | `{ value, label }` |\n\n## Sidebar Slots\n\n| name | 说明 |\n| --- | --- |\n| default | SidebarItem 列表 |\n\n## Sidebar 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式 |\n\n## SidebarItem Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| label | 当前选项标题 | `string` | - |\n| value | 当前选项值，唯一标识 | `string \\| number` | - |\n| badge | 徽标显示值 | `string \\| number` | - |\n| badge-props | 自定义徽标属性，会透传给 Badge 组件 | `Partial<BadgeProps>` | - |\n| icon | 图标名称 | `string` | - |\n| is-dot | 是否显示点状徽标 | `boolean` | `false` |\n| max | 徽标最大值 | `number` | `99` |\n| disabled | 是否禁用当前选项 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## SidebarItem Slots\n\n| name | 说明 |\n| --- | --- |\n| icon | 自定义图标内容 |\n\n",
|
|
13466
13463
|
"props": [
|
|
13467
13464
|
{
|
|
@@ -13530,7 +13527,7 @@
|
|
|
13530
13527
|
},
|
|
13531
13528
|
{
|
|
13532
13529
|
"name": "--wot-sidebar-item-line-height",
|
|
13533
|
-
"defaultValue": "$typography-body-line
|
|
13530
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
13534
13531
|
"description": "选项行高"
|
|
13535
13532
|
},
|
|
13536
13533
|
{
|
|
@@ -13632,7 +13629,7 @@
|
|
|
13632
13629
|
"category": "未分类",
|
|
13633
13630
|
"description": "用于签名场景，基于 Canvas 实现的签名组件，支持导出图片、历史记录、笔锋效果、自定义底部操作等能力。",
|
|
13634
13631
|
"descriptionZh": "用于签名场景，基于 Canvas 实现的签名组件，支持导出图片、历史记录、笔锋效果、自定义底部操作等能力。",
|
|
13635
|
-
"since": "2.0.
|
|
13632
|
+
"since": "2.0.4",
|
|
13636
13633
|
"doc": "# Signature 签名\n\n用于签名场景，基于 Canvas 实现的签名组件，支持导出图片、历史记录、笔锋效果、自定义底部操作等能力。\n\n:::tip 提醒\n如果遇到导出图片不清晰，可以将 `export-scale` 设置为 `2` 以上。\n:::\n\n## 组件类型\n\n### 基础用法\n\n设置 `@confirm` 监听确认事件，可在确认后获取签名结果。\n\n```html\n<wd-signature :export-scale=\"2\" background-color=\"#ffffff\" @confirm=\"handleConfirm\" />\n```\n\n```ts\nimport type { SignatureResult } from '@/uni_modules/wot-ui/components/wd-signature/types'\n\nfunction handleConfirm(result: SignatureResult) {\n if (result.success) {\n uni.previewImage({\n urls: [result.tempFilePath]\n })\n }\n}\n```\n\n### 历史记录\n\n设置 `enable-history` 后，可使用撤销与恢复能力。\n\n```html\n<wd-signature enable-history background-color=\"#f5f5f5\" />\n```\n\n## 组件变体\n\n### 笔锋模式\n\n设置 `pressure` 开启压感笔锋效果。\n\n```html\n<wd-signature pressure :height=\"300\" />\n```\n\n### 笔锋模式结合历史记录\n\n签名组件支持同时开启 `pressure` 与 `enable-history`，用于更完整的签字场景。\n\n```html\n<wd-signature pressure enable-history :height=\"300\" :min-width=\"1\" :max-width=\"6\" background-color=\"#f5f5f5\" />\n```\n\n## 组件样式\n\n### 自定义底部按钮\n\n设置 `footer` 插槽后，可完全自定义底部操作区。\n\n```html\n<wd-signature :disabled=\"disabled\" enable-history :step=\"3\">\n <template #footer=\"{ clear, confirm, currentStep, restore, revoke, historyList }\">\n <wd-button v-if=\"disabled\" block @click=\"disabled = false\">开始签名</wd-button>\n <block v-else>\n <wd-button size=\"small\" plain @click=\"revoke\" :disabled=\"currentStep <= 0\">撤回</wd-button>\n <wd-button size=\"small\" plain @click=\"restore\" :disabled=\"currentStep >= historyList.length\">恢复</wd-button>\n <wd-button size=\"small\" plain @click=\"clear\">清除</wd-button>\n <wd-button size=\"small\" @click=\"confirm\">确定</wd-button>\n </block>\n </template>\n</wd-signature>\n```\n\n```ts\nconst disabled = ref(true)\n```\n\n### 自定义画笔\n\n通过 `pen-color`、`line-width` 设置画笔颜色与宽度。\n\n```html\n<wd-signature pen-color=\"#0083ff\" :line-width=\"4\" />\n```\n\n## 特殊样式\n\n### 弹窗中使用\n\n签名组件可以与 `wd-popup` 结合使用，建议在弹窗展示完成后调用实例的 `init` 方法完成初始化。\n\n::: code-group\n\n```html [vue]\n<wd-button type=\"primary\" @click=\"showPopup = true\">打开签名板</wd-button>\n\n<wd-popup\n v-model=\"showPopup\"\n closable\n safe-area-inset-bottom\n position=\"bottom\"\n custom-style=\"padding: 48px 20px 20px 20px; border-radius: 16px 16px 0 0;\"\n @after-enter=\"signatureRef?.init()\"\n>\n <wd-signature ref=\"signatureRef\" :height=\"300\" enable-history pressure background-color=\"#f5f5f5\" @confirm=\"handlePopupConfirm\" />\n</wd-popup>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\nimport type { SignatureInstance, SignatureResult } from '@/uni_modules/wot-ui/components/wd-signature/types'\n\nconst showPopup = ref(false)\nconst signatureRef = ref<SignatureInstance>()\n\nfunction handlePopupConfirm(result: SignatureResult) {\n showPopup.value = false\n if (result.success) {\n uni.previewImage({\n urls: [result.tempFilePath]\n })\n }\n}\n```\n\n:::\n\n:::tip 提示\n弹窗中使用签名板时，建议：\n1. 开启 `closable` 显示关闭按钮。\n2. 设置 `safe-area-inset-bottom` 适配底部安全区。\n3. 使用 `custom-style` 调整弹窗内边距，为关闭按钮留出空间。\n4. 在弹窗的 `after-enter` 事件中调用签名板的 `init` 方法，确保正确初始化。\n:::\n\n### 横屏签名 \n\n支持以下两种横屏签名实现方案：\n\n#### 1. 通用横屏方案 (推荐)\n\n通过自定义布局和按钮旋转实现横屏效果，适用于所有平台。\n\n:::tip 实现说明\n通用横屏方案特点：\n1. 使用 fixed 布局配合旋转实现左侧垂直按钮栏\n2. 通过 footer 插槽自定义操作按钮\n3. 使用 transform 实现按钮的旋转效果\n4. 适用于所有平台,实现方式一致\n5. 建议使用 inited 变量配合延迟加载避免画布初始化问题\n:::\n\n::: code-group\n\n```html [vue]\n<template>\n <view class=\"landscape-signature\">\n <wd-signature\n v-if=\"inited\"\n :height=\"height\"\n :width=\"width\"\n enable-history\n pressure\n background-color=\"#f5f5f5\"\n @confirm=\"handleConfirm\"\n >\n <template #footer=\"{ clear, confirm, restore, revoke, canUndo, canRedo }\">\n <view class=\"custom-actions\">\n <view class=\"button-group\">\n <wd-button size=\"small\" plain @click=\"revoke\" :disabled=\"!canUndo\">撤回</wd-button>\n <wd-button size=\"small\" plain @click=\"restore\" :disabled=\"!canRedo\">恢复</wd-button>\n <wd-button size=\"small\" plain @click=\"clear\">清除</wd-button>\n <wd-button size=\"small\" type=\"primary\" @click=\"confirm\">完成</wd-button>\n </view>\n </view>\n </template>\n </wd-signature>\n </view>\n</template>\n```\n\n```ts [ts]\nimport { pause } from '@/uni_modules/wot-ui/common/util'\n\nconst height = ref(0)\nconst width = ref(0)\nconst inited = ref(false)\n\nonMounted(() => {\n const { windowWidth, windowHeight } = uni.getSystemInfoSync()\n width.value = windowWidth - 48\n height.value = windowHeight - 48\n \n pause(100).then(() => {\n inited.value = true\n })\n})\n```\n\n```scss [css]\n.landscape-signature {\n height: 100vh;\n // #ifdef H5\n height: calc(100vh - 44px);\n // #endif\n background: #fff;\n position: relative;\n padding: 24px 0;\n padding-left: 48px;\n box-sizing: border-box;\n\n .custom-actions {\n position: fixed;\n left: 0;\n top: 50%;\n width: 48px;\n transform: translateY(-50%) rotate(90deg);\n transform-origin: center;\n z-index: 10;\n\n .button-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n white-space: nowrap;\n width: max-content;\n transform: translateX(-50%);\n }\n }\n}\n```\n:::\n\n\n#### 2. 原生横屏方案 (仅微信小程序)\n\n微信小程序提供了原生的横屏支持，使用时需要注意区分平台:\n\n:::warning 注意事项\n1. `pageOrientation` 配置仅在微信小程序端生效\n2. 使用条件编译区分不同平台的布局结构\n3. 微信小程序页面会自动旋转，按钮布局不需要特殊处理\n4. 预留底部按钮空间时需要考虑横屏布局\n5. 其他平台请使用通用横屏方案\n:::\n\n::: code-group\n\n```json [json]\n{\n \"path\": \"pages/signature/landscape\",\n \"style\": {\n \"navigationBarTitleText\": \"横屏签名\",\n // #ifdef MP-WEIXIN\n \"pageOrientation\": \"landscape\"\n // #endif\n }\n}\n```\n\n```html [vue]\n<template>\n <view class=\"landscape-signature\">\n <wd-signature\n v-if=\"inited\"\n ref=\"signatureRef\"\n :height=\"height\" \n :width=\"width\"\n enable-history\n pressure\n background-color=\"#f5f5f5\"\n @confirm=\"handleConfirm\"\n >\n </wd-signature>\n </view>\n</template>\n```\n\n```ts [ts]\nimport { pause } from '@/uni_modules/wot-ui/common/util'\n\nconst height = ref(0)\nconst width = ref(0)\nconst inited = ref(false)\n\nonMounted(() => {\n const { windowWidth, windowHeight } = uni.getSystemInfoSync()\n width.value = windowWidth\n height.value = windowHeight - 60 // 预留底部按钮空间\n\n pause(100).then(() => {\n inited.value = true\n })\n})\n```\n\n```scss [css]\n.landscape-signature {\n height: 100vh;\n background: #fff;\n position: relative;\n box-sizing: border-box;\n\n // #ifdef MP-WEIXIN\n padding: 0;\n display: flex;\n flex-direction: column;\n\n .weixin-actions {\n padding: 12px;\n background-color: #f8f8f8;\n \n .button-group {\n display: flex;\n justify-content: center;\n gap: 12px;\n }\n }\n // #endif\n}\n```\n:::\n\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| pen-color | 签名笔颜色 | `string` | `'#000'` |\n| line-width | 签名笔宽度 | `number` | `3` |\n| confirm-text | 确认按钮文本 | `string` | 内置文案 |\n| clear-text | 清空按钮文本 | `string` | 内置文案 |\n| revoke-text | 撤回按钮文本 | `string` | 内置文案 |\n| restore-text | 恢复按钮文本 | `string` | 内置文案 |\n| file-type | 导出图片类型，可选值为 `png`、`jpg` | `'png' \\| 'jpg'` | `'png'` |\n| quality | 导出图片质量，取值范围为 `0` 到 `1` | `number` | `1` |\n| export-scale | 导出图片缩放比例 | `number` | `1` |\n| disabled | 是否禁用签名板 | `boolean` | `false` |\n| height | 画布高度 | `string \\| number` | - |\n| width | 画布宽度 | `string \\| number` | - |\n| background-color | 画板背景色 | `string` | - |\n| disable-scroll | 是否禁用画布滚动 | `boolean` | `true` |\n| enable-history | 是否开启历史记录 | `boolean` | `false` |\n| step | 撤回和恢复的步长 | `number` | `1` |\n| undo-text | 撤销按钮文本 | `string` | 内置文案 |\n| redo-text | 恢复按钮文本 | `string` | 内置文案 |\n| pressure | 是否开启压感模式 | `boolean` | `false` |\n| max-width | 压感模式下的最大笔触宽度 | `number` | `6` |\n| min-width | 压感模式下的最小笔触宽度 | `number` | `2` |\n| min-speed | 压感模式下的最小速度阈值 | `number` | `1.5` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| start | 开始签名时触发 | event |\n| end | 结束签名时触发 | event |\n| signing | 签名过程中持续触发 | event |\n| confirm | 确认签名时触发 | `SignatureResult` |\n| clear | 清空签名时触发 | - |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| init | 初始化签名板 | `forceUpdate?: boolean` |\n| confirm | 确认并导出签名图片 | - |\n| clear | 清空签名 | - |\n| restore | 恢复上一步 | - |\n| revoke | 撤销上一步 | - |\n\n## Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| footer | 自定义底部操作区 | `{ clear, confirm, currentStep, revoke, restore, canUndo, canRedo, historyList }` |\n\n",
|
|
13637
13634
|
"props": [
|
|
13638
13635
|
{
|
|
@@ -13886,7 +13883,7 @@
|
|
|
13886
13883
|
"category": "未分类",
|
|
13887
13884
|
"description": "骨架屏用于内容加载时的占位展示，支持多种主题类型、行列自定义、动画效果和插槽内容。",
|
|
13888
13885
|
"descriptionZh": "骨架屏用于内容加载时的占位展示，支持多种主题类型、行列自定义、动画效果和插槽内容。",
|
|
13889
|
-
"since": "2.0.
|
|
13886
|
+
"since": "2.0.4",
|
|
13890
13887
|
"doc": "\n# Skeleton 骨架屏\n\n骨架屏用于内容加载时的占位展示，支持多种主题类型、行列自定义、动画效果和插槽内容。\n\n## 组件类型\n\n### 基本用法\n\n通过 `theme` 设置不同骨架主题，常用于文本、头像、图片、段落等场景。\n\n::: code-group\n```html\n<wd-skeleton theme=\"avatar\" />\n<wd-skeleton theme=\"image\" />\n<wd-skeleton theme=\"text\" />\n<wd-skeleton theme=\"paragraph\" />\n```\n:::\n\n## 组件样式\n\n### 宫格骨架屏\n\n通过 `row-col` 组合多行多列占位结构，可以构造宫格骨架屏。\n\n\n::: code-group\n```html\n<wd-skeleton :row-col=\"grid\" />\n```\n```ts\nconst grid = [\n [\n { width: '48px', height: '48px' },\n { width: '48px', height: '48px' },\n { width: '48px', height: '48px' },\n { width: '48px', height: '48px' },\n { width: '48px', height: '48px' }\n ],\n [\n { width: '48px', height: '16px' },\n { width: '48px', height: '16px' },\n { width: '48px', height: '16px' },\n { width: '48px', height: '16px' },\n { width: '48px', height: '16px' }\n ]\n] as SkeletonRowCol[]\n```\n:::\n\n### 单元格骨架屏\n\n可以组合头像、矩形块与文本行，模拟常见单元格列表布局。\n\n```html\n<view style=\"display: flex\">\n <wd-skeleton :row-col=\"[{ size: '48px', type: 'circle' }]\" />\n <wd-skeleton :custom-style=\"{ width: '100%', marginLeft: '12px' }\" :row-col=\"[{ width: '50%' }, { width: '100%' }]\" />\n</view>\n<view style=\"display: flex; margin-top: 20px\">\n <wd-skeleton :row-col=\"[{ size: '48px', type: 'rect' }]\" />\n <wd-skeleton :custom-style=\"{ width: '100%', marginLeft: '12px' }\" :row-col=\"[{ width: '50%' }, { width: '100%' }]\" />\n</view>\n```\n\n### 图片组合骨架屏\n\n可以结合 `row-col` 自定义图片卡片与图文混排占位结构。\n\n```html\n<wd-skeleton :row-col=\"[{ height: '171px' }, 1, { width: '107px' }, [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]]\" />\n<wd-skeleton :custom-style=\"{ marginTop: '20px' }\" :row-col=\"[{ height: '171px' }, 1, { width: '107px' }, [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]]\" />\n```\n\n## 特殊样式\n\n### 渐变加载动画\n\n设置 `animation=\"gradient\"` 开启渐变加载动画。\n\n```html\n<wd-skeleton animation=\"gradient\" theme=\"paragraph\" />\n```\n\n### 闪烁加载动画\n\n设置 `animation=\"flashed\"` 开启闪烁加载动画。\n\n```html\n<view style=\"display: flex\">\n <wd-skeleton :row-col=\"[{ size: '48px', type: 'circle' }]\" />\n <wd-skeleton :custom-style=\"{ width: '100%', marginLeft: '12px' }\" animation=\"flashed\" theme=\"paragraph\" />\n</view>\n```\n\n### 插槽内容\n\n通过默认插槽写入实际内容，`loading` 为 `true` 时显示骨架屏，切换为 `false` 后显示插槽内容。\n\n::: code-group\n```html\n<wd-skeleton :row-col=\"grid\" :loading=\"showContent\">\n <wd-grid>\n <wd-grid-item icon-size=\"32px\" icon=\"camera\" text=\"文字\" />\n <wd-grid-item icon-size=\"32px\" icon=\"camera\" text=\"文字\" />\n <wd-grid-item icon-size=\"32px\" icon=\"camera\" text=\"文字\" />\n <wd-grid-item icon-size=\"32px\" icon=\"camera\" text=\"文字\" />\n <wd-grid-item icon-size=\"32px\" icon=\"camera\" text=\"文字\" />\n </wd-grid>\n</wd-skeleton>\n```\n```ts\nconst showContent = ref(true)\n```\n:::\n\n---\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| theme | 骨架屏主题，可选值为 `text`、`avatar`、`paragraph`、`image` | `SkeletonTheme` | `'text'` |\n| row-col | 自定义每行占位配置，用于设置行列数量、宽高、间距、圆角和占位类型等，支持数字、对象、对象数组 | `SkeletonRowCol[]` | `[]` |\n| loading | 是否显示骨架屏 | `boolean` | `true` |\n| animation | 动画类型，可选值为 `gradient`、`flashed` | `SkeletonAnimation` | `''` |\n| customClass | 自定义样式类名 | `string \\| string[] \\| Record<string, boolean>` | `''` |\n| custom-style | 自定义内联样式 | `CSSProperties` | `{}` |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| default | `loading` 结束后展示的实际内容 |\n\n## 类型说明\n\n### SkeletonTheme\n\n可选值：`'text' | 'avatar' | 'paragraph' | 'image'`\n\n### SkeletonAnimation\n\n可选值：`'gradient' | 'flashed'`\n\n### SkeletonRowCol 配置示例\n\n```ts\n// 三行，分别显示为一列、一列、两列的占位符\n[1, 1, 2]\n\n// 三行，第三行自定义宽度\n[1, 1, { width: '100px' }]\n\n// 第三行包含两列，分别设置宽度和右外边距\n[1, 1, [{ width: '50%' }, { width: '50%', marginRight: '10px' }]]\n```\n\n",
|
|
13891
13888
|
"props": [
|
|
13892
13889
|
{
|
|
@@ -13971,7 +13968,7 @@
|
|
|
13971
13968
|
},
|
|
13972
13969
|
{
|
|
13973
13970
|
"name": "--wot-skeleton-circle-border-radius",
|
|
13974
|
-
"defaultValue": "$radius-
|
|
13971
|
+
"defaultValue": "$radius-full",
|
|
13975
13972
|
"description": "圆形占位圆角"
|
|
13976
13973
|
},
|
|
13977
13974
|
{
|
|
@@ -14042,7 +14039,7 @@
|
|
|
14042
14039
|
"category": "未分类",
|
|
14043
14040
|
"description": "支持单向滑块和双向滑块，可用于在范围内选择一个值或一段区间。",
|
|
14044
14041
|
"descriptionZh": "支持单向滑块和双向滑块，可用于在范围内选择一个值或一段区间。",
|
|
14045
|
-
"since": "2.0.
|
|
14042
|
+
"since": "2.0.4",
|
|
14046
14043
|
"doc": "# Slider 滑块\n\n支持单向滑块和双向滑块，可用于在范围内选择一个值或一段区间。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 为绑定值。值为 `number` 时显示一个滑块。\n\n```html\n<wd-slider v-model=\"value\" />\n```\n\n```ts\nconst value = ref<number>(30)\n```\n\n### 双向滑块\n\n设置 `range` 后，绑定值变为数组类型。\n\n```html\n<wd-slider v-model=\"value\" range />\n```\n\n```ts\nconst value = ref<number[]>([20, 60])\n```\n\n## 组件状态\n\n### 禁用状态\n\n设置 `disabled` 禁用滑块。\n\n```html\n<wd-slider v-model=\"value\" disabled />\n```\n\n## 组件样式\n\n### 显示极值\n\n设置 `show-extreme-value` 显示最小值和最大值。\n\n```html\n<wd-slider v-model=\"value\" show-extreme-value />\n```\n\n### 管道样式\n\n设置 `theme=\"capsule\"` 使用管道样式。\n\n```html\n<wd-slider v-model=\"value\" theme=\"capsule\" />\n```\n\n### 指定步长\n\n通过 `step` 设置步长。\n\n```html\n<wd-slider v-model=\"value\" :step=\"10\" />\n```\n\n### 指定选择范围\n\n通过 `min` 和 `max` 设置取值范围。\n\n```html\n<wd-slider v-model=\"value\" :min=\"-10\" :max=\"10\" show-extreme-value />\n```\n\n### 刻度标记\n\n通过 `marks` 配置刻度标记。\n\n```html\n<wd-slider v-model=\"value\" :marks=\"[0, 25, 50, 75, 100]\" :step=\"25\" />\n```\n\n### 刻度标记（管道）\n\n刻度标记也可以与管道样式组合使用。\n\n```html\n<wd-slider v-model=\"value\" :marks=\"[0, 25, 50, 75, 100]\" :step=\"25\" theme=\"capsule\" />\n```\n\n## 布局能力\n\n### 垂直方向\n\n设置 `vertical` 以垂直方向展示。\n\n```html\n<wd-slider v-model=\"value\" vertical />\n<wd-slider v-model=\"rangeValue\" vertical range />\n```\n\n### 垂直 + 管道\n\n垂直方向支持与 `theme=\"capsule\"` 组合使用。\n\n```html\n<wd-slider v-model=\"value\" vertical theme=\"capsule\" />\n<wd-slider v-model=\"rangeValue\" vertical theme=\"capsule\" range show-extreme-value />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value / v-model | 当前滑块值，单滑块为 `number`，双滑块为 `number[]` | `SliderValue` | `0` |\n| min | 最小值 | `number` | `0` |\n| max | 最大值 | `number` | `100` |\n| step | 步长 | `number` | `1` |\n| range | 是否为双向滑块模式 | `boolean` | `false` |\n| vertical | 是否垂直展示 | `boolean` | `false` |\n| theme | 滑块风格，可选值为 `default`、`capsule` | `SliderTheme` | `'default'` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| show-extreme-value | 是否显示最小值和最大值文本 | `boolean` | `false` |\n| popover-visible | 气泡显示模式，可选值为 `always`、`normal`、`never` | `SliderPopoverVisible` | `'normal'` |\n| marks | 刻度标记，支持数组或对象形式 | `SliderMarks` | - |\n| active-color | 进度条激活态颜色 | `string` | `''` |\n| inactive-color | 进度条未激活态颜色 | `string` | `''` |\n| custom-class | 根节点样式类 | `string` | `''` |\n| custom-style | 根节点样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| dragstart | 开始拖动时触发 | `{ value }` |\n| dragmove | 拖动过程中触发 | `{ value }` |\n| dragend | 拖动结束时触发 | `{ value }` |\n| change | 值变化时触发 | `value` |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| initSlider | 初始化 slider 尺寸数据 | - |\n\n",
|
|
14047
14044
|
"props": [
|
|
14048
14045
|
{
|
|
@@ -14177,7 +14174,7 @@
|
|
|
14177
14174
|
},
|
|
14178
14175
|
{
|
|
14179
14176
|
"name": "--wot-slider-bar-radius",
|
|
14180
|
-
"defaultValue": "$radius-
|
|
14177
|
+
"defaultValue": "$radius-full",
|
|
14181
14178
|
"description": "-"
|
|
14182
14179
|
},
|
|
14183
14180
|
{
|
|
@@ -14242,7 +14239,7 @@
|
|
|
14242
14239
|
},
|
|
14243
14240
|
{
|
|
14244
14241
|
"name": "--wot-slider-dot-popover-line-height",
|
|
14245
|
-
"defaultValue": "$typography-body-line
|
|
14242
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
14246
14243
|
"description": "-"
|
|
14247
14244
|
},
|
|
14248
14245
|
{
|
|
@@ -14287,7 +14284,7 @@
|
|
|
14287
14284
|
},
|
|
14288
14285
|
{
|
|
14289
14286
|
"name": "--wot-slider-scale-border-radius",
|
|
14290
|
-
"defaultValue": "$radius-
|
|
14287
|
+
"defaultValue": "$radius-full",
|
|
14291
14288
|
"description": "-"
|
|
14292
14289
|
},
|
|
14293
14290
|
{
|
|
@@ -14322,7 +14319,7 @@
|
|
|
14322
14319
|
},
|
|
14323
14320
|
{
|
|
14324
14321
|
"name": "--wot-slider-scale-desc-line-height",
|
|
14325
|
-
"defaultValue": "$typography-body-line
|
|
14322
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
14326
14323
|
"description": "-"
|
|
14327
14324
|
},
|
|
14328
14325
|
{
|
|
@@ -14457,7 +14454,7 @@
|
|
|
14457
14454
|
"category": "未分类",
|
|
14458
14455
|
"description": "滑动验证组件，用于人机验证场景。",
|
|
14459
14456
|
"descriptionZh": "滑动验证组件，用于人机验证场景。",
|
|
14460
|
-
"since": "2.0.
|
|
14457
|
+
"since": "2.0.4",
|
|
14461
14458
|
"doc": "# SlideVerify 滑动验证\n\n滑动验证组件，用于人机验证场景。\n\n## 组件类型\n\n### 基本用法\n\n```html\n<wd-slide-verify @success=\"handleSuccess\" @fail=\"handleFail\" />\n```\n\n```ts\nconst toast = useToast()\n\nfunction handleSuccess() {\n toast.success('验证成功')\n}\n\nfunction handleFail() {\n toast.error('验证失败，请重试')\n}\n```\n\n## 组件状态\n\n### 禁用状态\n\n设置 `disabled` 后禁用滑动验证。\n\n```html\n<wd-slide-verify disabled />\n```\n\n## 组件样式\n\n### 自定义文案\n\n通过 `text` 和 `success-text` 属性自定义提示文字。\n\n```html\n<wd-slide-verify text=\"请拖动滑块\" success-text=\"验证成功\" />\n```\n\n### 自定义颜色\n\n通过 `background-color` 和 `active-background-color` 属性自定义颜色。\n\n```html\n<wd-slide-verify background-color=\"#E8F4FF\" active-background-color=\"#4D94FF\" />\n```\n\n### 自定义图标\n\n通过 `icon` 和 `success-icon` 属性自定义图标。\n\n```html\n<wd-slide-verify icon=\"arrow-right\" success-icon=\"thumb-up-fill\" />\n```\n\n## 特殊样式\n\n### 自定义容错范围\n\n通过 `tolerance` 属性设置容错范围（单位：px），默认为 10px。\n\n```html\n<wd-slide-verify :tolerance=\"20\" />\n```\n\n### 重置方法\n\n通过 `ref` 获取组件实例，调用 `reset` 方法重置验证状态。\n\n```html\n<wd-slide-verify ref=\"slideVerifyRef\" @success=\"handleSuccess\" @fail=\"handleFail\" />\n<wd-button type=\"primary\" @click=\"handleReset\">重置</wd-button>\n```\n\n```ts\nimport { ref } from 'vue'\nimport type { SlideVerifyInstance } from '@/uni_modules/wot-ui/components/wd-slide-verify/types'\n\nconst slideVerifyRef = ref<SlideVerifyInstance>()\n\nfunction handleReset() {\n slideVerifyRef.value?.reset()\n}\n```\n\n### 插槽用法\n\n支持通过插槽自定义内容。\n\n```html\n<wd-slide-verify>\n <template #text>\n <text>向右滑动完成验证</text>\n </template>\n <template #success-text>\n <text>验证通过</text>\n </template>\n <template #icon>\n <view>ICON</view>\n </template>\n <template #success-icon>\n <view style=\"color: red\">OK</view>\n </template>\n</wd-slide-verify>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| tolerance | 容错范围，单位为 `px` | number | `10` |\n| text | 提示文字，为空时显示内置文案 | string | `''` |\n| success-text | 验证成功提示文字，为空时显示内置文案 | string | `''` |\n| disabled | 是否禁用 | boolean | `false` |\n| background-color | 背景颜色 | string | - |\n| active-background-color | 激活时的背景颜色 | string | - |\n| icon | 滑块图标名称 | string | `double-right` |\n| success-icon | 成功图标名称 | string | `check-circle-fill` |\n| icon-size | 图标大小 | string / number | - |\n| success-icon-size | 成功图标大小 | string / number | - |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| success | 验证成功时触发 | - |\n| fail | 验证失败时触发 | - |\n\n## Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| init | 初始化尺寸信息 | - |\n| reset | 重置验证组件到初始状态 | - |\n\n## Slots\n\n| name | 说明 |\n| --- | --- |\n| text | 自定义提示文字内容 |\n| success-text | 自定义验证成功提示文字内容 |\n| icon | 自定义滑块图标 |\n| success-icon | 自定义成功图标 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点样式 |\n",
|
|
14462
14459
|
"props": [
|
|
14463
14460
|
{
|
|
@@ -14594,7 +14591,7 @@
|
|
|
14594
14591
|
},
|
|
14595
14592
|
{
|
|
14596
14593
|
"name": "--wot-slide-verify-text-line-height",
|
|
14597
|
-
"defaultValue": "$typography-label-line
|
|
14594
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
14598
14595
|
"description": "提示文字行高"
|
|
14599
14596
|
},
|
|
14600
14597
|
{
|
|
@@ -14696,7 +14693,7 @@
|
|
|
14696
14693
|
"category": "未分类",
|
|
14697
14694
|
"description": "用于展示排序按钮，支持升序、降序、重置三种状态。",
|
|
14698
14695
|
"descriptionZh": "用于展示排序按钮，支持升序、降序、重置三种状态。",
|
|
14699
|
-
"since": "2.0.
|
|
14696
|
+
"since": "2.0.4",
|
|
14700
14697
|
"doc": "# SortButton 排序按钮\n\n用于展示排序按钮，支持升序、降序、重置三种状态。\n\n## 组件类型\n\n### 基本用法\n\n使用 `v-model` 绑定当前排序状态，取值为 `-1`、`0`、`1`，分别表示降序、重置状态、升序。\n\n```html\n<wd-sort-button v-model=\"value\" title=\"价格\" @change=\"handleChange\" />\n```\n\n```ts\nconst value = ref(0)\n\nfunction handleChange({ value }) {\n console.log(value)\n}\n```\n\n## 组件变体\n\n### 允许重置\n\n设置 `allow-reset` 后，排序按钮可回到重置状态。\n\n```html\n<wd-sort-button v-model=\"value\" title=\"价格\" allow-reset />\n```\n\n### 优先切换为降序\n\n设置 `desc-first` 后，首次切换优先进入降序。\n\n```html\n<wd-sort-button v-model=\"value\" title=\"价格\" desc-first />\n```\n\n## 组件样式\n\n### 显示下划线\n\n设置 `line` 显示下划线。\n\n```html\n<wd-sort-button v-model=\"value\" title=\"价格\" line />\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value / v-model | 当前排序方向值，`1` 表示升序，`0` 表示重置状态，`-1` 表示降序 | `SortButtonValue` | `0` |\n| title | 排序按钮文案 | `string` | `''` |\n| allow-reset | 是否允许重置为未选中状态 | `boolean` | `false` |\n| desc-first | 是否优先切换为降序 | `boolean` | `false` |\n| line | 是否显示下划线 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 排序方向变化时触发 | `{ value }` |\n\n",
|
|
14701
14698
|
"props": [
|
|
14702
14699
|
{
|
|
@@ -14763,7 +14760,7 @@
|
|
|
14763
14760
|
},
|
|
14764
14761
|
{
|
|
14765
14762
|
"name": "--wot-sort-button-text-line-height",
|
|
14766
|
-
"defaultValue": "$typography-body-line
|
|
14763
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
14767
14764
|
"description": "文字行高"
|
|
14768
14765
|
},
|
|
14769
14766
|
{
|
|
@@ -14866,7 +14863,7 @@
|
|
|
14866
14863
|
"category": "未分类",
|
|
14867
14864
|
"description": "用于引导用户按照流程完成任务，或向用户展示当前所处的步骤状态。",
|
|
14868
14865
|
"descriptionZh": "用于引导用户按照流程完成任务，或向用户展示当前所处的步骤状态。",
|
|
14869
|
-
"since": "2.0.
|
|
14866
|
+
"since": "2.0.4",
|
|
14870
14867
|
"doc": "# Steps 步骤条\n\n用于引导用户按照流程完成任务，或向用户展示当前所处的步骤状态。\n\n:::tip 提示\n`wd-step` 已直接支持 `title`、`icon` 和 `description` 插槽，无需再设置旧版的 `*-slot` 控制字段。\n:::\n\n## 组件类型\n\n### 基本用法\n\n`active` 为当前步骤进度，对应步骤下标。\n\n```html\n<wd-steps :active=\"0\">\n <wd-step />\n <wd-step />\n <wd-step />\n</wd-steps>\n```\n\n### 标题和描述信息\n\n通过 `title` 和 `description` 设置每个步骤的标题和描述。\n\n```html\n<wd-steps :active=\"active\" align-center>\n <wd-step title=\"步骤1\" description=\"注册1个账号\" />\n <wd-step title=\"步骤2\" description=\"登录账号并绑定手机\" />\n <wd-step title=\"步骤3\" description=\"完善个人信息\" />\n</wd-steps>\n<wd-button size=\"small\" @click=\"nextStep\">下一步</wd-button>\n```\n\n```ts\nconst active = ref(0)\n\nfunction nextStep() {\n active.value += 1\n}\n```\n\n### 修改图标\n\n通过 `icon` 设置步骤图标。\n\n```html\n<wd-steps :active=\"1\" align-center>\n <wd-step icon=\"settings\" />\n <wd-step icon=\"list\" />\n <wd-step icon=\"clock-circle\" />\n</wd-steps>\n```\n\n## 组件状态\n\n### 修改状态\n\n通过 `status` 设置指定步骤的状态。\n\n```html\n<wd-steps :active=\"1\" align-center>\n <wd-step title=\"绑定手机\" />\n <wd-step title=\"重新绑定手机\" status=\"error\" />\n <wd-step title=\"步骤3\" />\n</wd-steps>\n```\n\n## 组件样式\n\n### 水平居中\n\n设置 `align-center` 水平居中，只对横向步骤条有效。\n\n```html\n<wd-steps :active=\"0\" align-center>\n <wd-step />\n <wd-step />\n <wd-step />\n</wd-steps>\n```\n\n## 布局能力\n\n### 竖向步骤条\n\n设置 `vertical` 以垂直方向展示。\n\n```html\n<wd-steps :active=\"1\" vertical>\n <wd-step description=\"注册1个账号\" />\n <wd-step description=\"登录账号并绑定手机\" />\n <wd-step description=\"完善个人信息\" />\n</wd-steps>\n```\n\n## 特殊样式\n\n### 点状步骤条\n\n设置 `dot` 使用点状步骤条。\n\n```html\n<wd-steps :active=\"1\" align-center dot>\n <wd-step title=\"步骤1\" description=\"注册1个账号\" />\n <wd-step title=\"步骤2\" description=\"登录账号并绑定手机\" />\n <wd-step title=\"步骤3\" description=\"完善个人信息\" />\n</wd-steps>\n```\n\n### 可控制的点状步骤条\n\n点状步骤条支持通过外部 `active` 控制当前步骤。\n\n```html\n<wd-steps :active=\"dotActive\" align-center dot>\n <wd-step title=\"步骤1\" description=\"注册一个账号\" />\n <wd-step title=\"步骤2\" description=\"登录账号并绑定手机\" />\n <wd-step title=\"步骤3\" description=\"完善个人信息\" />\n</wd-steps>\n```\n\n### 竖向点状步骤条\n\n`vertical` 和 `dot` 可以组合使用。\n\n```html\n<wd-steps :active=\"1\" vertical dot>\n <wd-step description=\"注册1个账号\" />\n <wd-step description=\"登录账号并绑定手机\" />\n <wd-step description=\"完善个人信息\" />\n</wd-steps>\n```\n\n## Steps Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| active | 当前激活步骤下标 | `number` | `0` |\n| vertical | 是否垂直方向展示 | `boolean` | `false` |\n| dot | 是否使用点状步骤条 | `boolean` | `false` |\n| space | 步骤条间距，默认自动计算 | `string` | `''` |\n| align-center | 是否水平居中，只对横向步骤条有效 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Step Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 步骤标题，不传时显示默认文案 | `string` | - |\n| description | 步骤描述 | `string` | - |\n| icon | 步骤图标 | `string` | - |\n| status | 步骤状态，可选值为 `finished`、`process`、`error`、`wait` | `StepStatus` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Steps Slots\n\n| name | 说明 |\n| --- | --- |\n| default | Step 列表 |\n\n## Step Slots\n\n| name | 说明 |\n| --- | --- |\n| icon | 自定义步骤图标 |\n| title | 自定义步骤标题 |\n| description | 自定义步骤描述 |\n\n",
|
|
14871
14868
|
"props": [
|
|
14872
14869
|
{
|
|
@@ -14947,7 +14944,7 @@
|
|
|
14947
14944
|
},
|
|
14948
14945
|
{
|
|
14949
14946
|
"name": "--wot-step-circle-border-radius",
|
|
14950
|
-
"defaultValue": "$radius-
|
|
14947
|
+
"defaultValue": "$radius-full",
|
|
14951
14948
|
"description": "圆形指示器的圆角大小"
|
|
14952
14949
|
},
|
|
14953
14950
|
{
|
|
@@ -14977,7 +14974,7 @@
|
|
|
14977
14974
|
},
|
|
14978
14975
|
{
|
|
14979
14976
|
"name": "--wot-step-circle-text-line-height",
|
|
14980
|
-
"defaultValue": "$typography-label-line
|
|
14977
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
14981
14978
|
"description": "圆形指示器内部文本的行高"
|
|
14982
14979
|
},
|
|
14983
14980
|
{
|
|
@@ -15092,7 +15089,7 @@
|
|
|
15092
15089
|
},
|
|
15093
15090
|
{
|
|
15094
15091
|
"name": "--wot-step-title-line-height",
|
|
15095
|
-
"defaultValue": "$typography-body-line
|
|
15092
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
15096
15093
|
"description": "标题文本行高"
|
|
15097
15094
|
},
|
|
15098
15095
|
{
|
|
@@ -15122,7 +15119,7 @@
|
|
|
15122
15119
|
},
|
|
15123
15120
|
{
|
|
15124
15121
|
"name": "--wot-step-description-line-height",
|
|
15125
|
-
"defaultValue": "$typography-label-line
|
|
15122
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
15126
15123
|
"description": "描述文本行高"
|
|
15127
15124
|
},
|
|
15128
15125
|
{
|
|
@@ -15210,7 +15207,7 @@
|
|
|
15210
15207
|
"category": "未分类",
|
|
15211
15208
|
"description": "粘性布局组件，用于在页面滚动时将元素固定在指定位置。",
|
|
15212
15209
|
"descriptionZh": "粘性布局组件，用于在页面滚动时将元素固定在指定位置。",
|
|
15213
|
-
"since": "2.0.
|
|
15210
|
+
"since": "2.0.4",
|
|
15214
15211
|
"doc": "# Sticky 粘性布局\n\n粘性布局组件，用于在页面滚动时将元素固定在指定位置。\n\n## 组件类型\n\n### 基本用法\n\n将需要吸顶的内容包裹在 `wd-sticky` 组件内即可。\n\n> 注意：被包裹的元素在样式中使用百分比单位 `width:xx%;height:xx%;` 无效，建议使用 `vh`、`vw`。\n\n```html\n<wd-sticky>\n <wd-button type=\"success\">基础用法</wd-button>\n</wd-sticky>\n```\n\n### 指定容器\n\n将 `wd-sticky` 放入相对容器中，再使用 `wd-sticky-box` 包裹该容器，可限制吸顶区域。\n\n```html\n<wd-sticky-box>\n <view class=\"container\">\n <wd-sticky>\n <wd-button type=\"warning\">指定容器</wd-button>\n </wd-sticky>\n </view>\n</wd-sticky-box>\n```\n\n```scss\n.container {\n height: 120px;\n width: 100vw;\n}\n```\n\n## 组件样式\n\n### 吸顶距离\n\n通过 `offset-top` 设置组件吸顶时与顶部的距离。\n\n::: tip 提醒\n在 H5 端默认导航栏为普通元素，所以吸顶距离会自动在 `offset-top` 的基础上增加 `44px`。当 H5 端使用自定义导航栏时，需要自行扣除这部分高度。\n:::\n\n```html\n<wd-sticky :offset-top=\"50\">\n <wd-button>吸顶距离</wd-button>\n</wd-sticky>\n```\n\n### 相对容器吸顶距离\n\n`offset-top` 也可以与 `wd-sticky-box` 组合使用。\n\n```html\n<wd-sticky-box>\n <view class=\"container\">\n <wd-sticky :offset-top=\"150\">\n <wd-button type=\"warning\">相对容器吸顶距离</wd-button>\n </wd-sticky>\n </view>\n</wd-sticky-box>\n```\n\n## 特殊样式\n\n### 动态插入\n\n`wd-sticky` 支持包裹动态生成的内容。\n\n> 注意包裹动态生成的内容时，内容的宽高不小于 `1px`\n\n```html\n<wd-button type=\"info\" plain @click=\"insert\">点击插入</wd-button>\n<wd-sticky>\n <wd-button v-if=\"show\" type=\"danger\">动态生成</wd-button>\n</wd-sticky>\n```\n\n```ts\nconst show = ref(false)\n\nfunction display() {\n show.value = true\n}\n\nfunction insert() {\n display()\n}\n\nonShow(() => {\n setTimeout(display, 5000)\n})\n```\n\n## Sticky Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| z-index | 层级 | `number` | `1` |\n| offset-top | 吸顶距离 | `number` | `0` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Sticky Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 需要吸顶的内容 |\n\n## Sticky 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点样式 |\n\n## Sticky Box Slots\n\n| name | 说明 |\n| --- | --- |\n| default | 相对容器内容 |\n\n## Sticky Box 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点样式 |",
|
|
15215
15212
|
"props": [
|
|
15216
15213
|
{
|
|
@@ -15286,7 +15283,7 @@
|
|
|
15286
15283
|
"category": "未分类",
|
|
15287
15284
|
"description": "常用于单元格左右滑删除等手势操作。",
|
|
15288
15285
|
"descriptionZh": "常用于单元格左右滑删除等手势操作。",
|
|
15289
|
-
"since": "2.0.
|
|
15286
|
+
"since": "2.0.4",
|
|
15290
15287
|
"doc": "# SwipeAction 滑动操作\n\n常用于单元格左右滑删除等手势操作。\n\n:::warning\n滑动操作组件对页面的功能隐藏较深，用户难以发现，建议优先使用更直接的交互方式，例如列表项按钮或 ActionSheet。\n\n如果仍然使用滑动操作，建议在用户进入页面时提供显式提示，告知列表项支持左右滑动。\n:::\n\n## 组件类型\n\n### 基本用法\n\n`wd-swipe-action` 由三部分组成：左侧操作区、内容区、右侧操作区。左右操作区分别通过 `left` 和 `right` 插槽定义，内容区使用默认插槽。\n\n在页面根节点上监听点击事件，并结合 `useQueue` 提供的 `closeOutside`，可以在点击组件外部区域时统一关闭已展开的滑动项。\n\n:::warning\n如果页面上存在“点击按钮后手动展开 `swipe-action`”之类的交互，需要在这些按钮外层使用 `@click.stop` 阻止事件冒泡，避免触发根节点上的 `closeOutside`。\n:::\n\n::: code-group\n\n```html [vue]\n<view @click=\"closeOutside\">\n <wd-swipe-action>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <template #right>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\" @click=\"handleAction('操作1')\">操作1</view>\n <view class=\"button\" style=\"background: #FFB300;\" @click=\"handleAction('操作2')\">操作2</view>\n <view class=\"button\" style=\"background: #4D80F0;\" @click=\"handleAction('操作3')\">操作3</view>\n </view>\n </template>\n </wd-swipe-action>\n</view>\n```\n\n```ts [ts]\nimport { useToast, useQueue } from '@/uni_modules/wot-ui'\n\nconst { closeOutside } = useQueue()\nconst toast = useToast()\n\nfunction handleAction(action: string) {\n toast.show(`点击了${action}`)\n}\n```\n\n```scss [scss]\n.action {\n height: 100%;\n}\n\n.button {\n display: inline-block;\n padding: 0 15px;\n height: 100%;\n color: #fff;\n line-height: 44px;\n}\n```\n\n:::\n\n### 左右滑动\n\n通过 `left` 和 `right` 插槽可以同时配置左右两侧操作区。\n\n```html\n<wd-swipe-action>\n <template #left>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">操作1</view>\n <view class=\"button\" style=\"background: #FFB300;\">操作2</view>\n <view class=\"button\" style=\"background: #4D80F0;\">操作3</view>\n </view>\n </template>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <template #right>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">操作4</view>\n <view class=\"button\" style=\"background: #FFB300;\">操作5</view>\n <view class=\"button\" style=\"background: #4D80F0;\">操作6</view>\n </view>\n </template>\n</wd-swipe-action>\n```\n\n## 组件状态\n\n### 禁用滑动按钮\n\n设置 `disabled` 后，组件不会响应滑动和点击关闭相关交互。\n\n```html\n<wd-swipe-action disabled>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <template #right>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">操作1</view>\n <view class=\"button\" style=\"background: #FFB300;\">操作2</view>\n <view class=\"button\" style=\"background: #4D80F0;\">操作3</view>\n </view>\n </template>\n</wd-swipe-action>\n```\n\n## 特殊样式\n\n### 切换按钮\n\n通过 `v-model` 可以直接控制当前展开状态，可选值为 `left`、`close`、`right`，分别表示展开左侧、收起全部、展开右侧。\n\n::: code-group\n\n```html [vue]\n<wd-swipe-action v-model=\"value\">\n <template #left>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">操作1</view>\n <view class=\"button\" style=\"background: #FFB300;\">操作2</view>\n <view class=\"button\" style=\"background: #4D80F0;\">操作3</view>\n </view>\n </template>\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <template #right>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">操作4</view>\n <view class=\"button\" style=\"background: #FFB300;\">操作5</view>\n <view class=\"button\" style=\"background: #4D80F0;\">操作6</view>\n </view>\n </template>\n</wd-swipe-action>\n\n<view class=\"button-group\">\n <view @click.stop=\"noop\">\n <wd-button size=\"small\" @click=\"changeState('left')\">打开左边</wd-button>\n </view>\n <view @click.stop=\"noop\">\n <wd-button size=\"small\" @click=\"changeState('close')\">关闭所有</wd-button>\n </view>\n <view @click.stop=\"noop\">\n <wd-button size=\"small\" @click=\"changeState('right')\">打开右边</wd-button>\n </view>\n</view>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\nimport type { SwipeActionStatus } from '@/uni_modules/wot-ui/components/wd-swipe-action/types'\n\nconst value = ref<SwipeActionStatus>('close')\n\nfunction changeState(position: SwipeActionStatus) {\n value.value = position\n}\n\nfunction noop() {}\n```\n\n:::\n\n### 按钮关闭前的钩子函数\n\n`before-close` 会在组件执行关闭逻辑前触发，可用于关闭前校验或异步确认。\n\n钩子函数接收两个参数：\n\n- `reason`：关闭原因，可选值为 `click`、`swipe`、`value`\n- `position`：关闭位置，可选值为 `left`、`right`、`inside`\n\n其中 `inside` 表示点击了内容区域内部但不属于左右操作按钮的位置。\n\n需要显式返回 `true` 或 `Promise<true>` 才会继续关闭，返回 `false` 或 `Promise<false>` 会阻止关闭。\n\n::: code-group\n\n```html [vue]\n<wd-swipe-action :before-close=\"beforeClose\">\n <wd-cell title=\"标题文字\" value=\"阻止点击内容区关闭\" />\n <template #right>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">删除</view>\n <view class=\"button\" style=\"background: #FFB300;\">标记</view>\n </view>\n </template>\n</wd-swipe-action>\n```\n\n```ts [ts]\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { SwipeActionBeforeClose } from '@/uni_modules/wot-ui/components/wd-swipe-action/types'\n\nconst toast = useToast()\n\nconst beforeClose: SwipeActionBeforeClose = (reason, position) => {\n return new Promise((resolve) => {\n const shouldClose = !(reason === 'click' && position === 'inside')\n\n if (!shouldClose) {\n toast.show('已拦截点击内容区导致的关闭')\n resolve(false)\n } else {\n toast.loading('处理中...')\n setTimeout(() => {\n toast.close()\n if (reason === 'click') {\n toast.show(`${reason} ${position} 导致滑动按钮关闭`)\n } else {\n toast.show(`${reason} 导致 ${position} 滑动按钮关闭`)\n }\n resolve(true)\n }, 3000)\n }\n })\n}\n```\n\n:::\n\n### 点击事件\n\n`click` 事件会在已展开状态下点击内容区、左侧操作区或右侧操作区，并且关闭成功后发出；若被 `before-close` 拦截则不会触发。\n\n```html\n<wd-swipe-action @click=\"handleClick\">\n <wd-cell title=\"标题文字\" value=\"内容\" />\n <template #right>\n <view class=\"action\">\n <view class=\"button\" style=\"background: #E2231A;\">操作1</view>\n <view class=\"button\" style=\"background: #FFB300;\">操作2</view>\n <view class=\"button\" style=\"background: #4D80F0;\">操作3</view>\n </view>\n </template>\n</wd-swipe-action>\n```\n\n```ts\nimport { useToast } from '@/uni_modules/wot-ui'\nimport type { SwipeActionClickEvent } from '@/uni_modules/wot-ui/components/wd-swipe-action/types'\n\nconst toast = useToast()\n\nfunction handleClick({ value }: SwipeActionClickEvent) {\n toast.show(`点击 ${value} 关闭操作按钮`)\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前滑动状态，可选值为 `left`、`close`、`right` | `SwipeActionStatus` | `close` |\n| disabled | 是否禁用滑动操作 | `boolean` | `false` |\n| before-close | 关闭前拦截函数，接收 `(reason, position)`，返回 `true` 或 `Promise<boolean>` 时继续关闭，返回 `false` 时阻止关闭 | `SwipeActionBeforeClose` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 已展开状态下点击内容区或操作区并关闭时触发 | `SwipeActionClickEvent` |\n| update:modelValue | 滑动状态变化时触发 | `SwipeActionStatus` |\n\n## Methods\n\n通过组件实例可以调用以下方法。\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| close | 关闭已展开的操作按钮 | `reason: SwipeActionReason, position?: SwipeActionPosition` | - |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| left | 自定义左侧操作区 |\n| default | 自定义内容区 |\n| right | 自定义右侧操作区 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点内联样式 |\n",
|
|
15291
15288
|
"props": [
|
|
15292
15289
|
{
|
|
@@ -15375,7 +15372,7 @@
|
|
|
15375
15372
|
"category": "未分类",
|
|
15376
15373
|
"description": "用于创建轮播，支持水平和垂直方向滑动、自定义指示器、图片和视频资源展示，以及基于对象数据渲染标题。",
|
|
15377
15374
|
"descriptionZh": "用于创建轮播，支持水平和垂直方向滑动、自定义指示器、图片和视频资源展示，以及基于对象数据渲染标题。",
|
|
15378
|
-
"since": "2.0.
|
|
15375
|
+
"since": "2.0.4",
|
|
15379
15376
|
"doc": "# Swiper 轮播\n\n用于创建轮播，支持水平和垂直方向滑动、自定义指示器、图片和视频资源展示，以及基于对象数据渲染标题。\n\n::: danger 请注意\n嵌入视频仅在 H5、微信小程序和钉钉小程序支持，其余端不支持，请了解后使用。\n:::\n\n## 组件类型\n\n### 点状指示器\n\n基础轮播可通过 `indicator` 配置展示点状指示器。\n\n::: code-group\n\n```html [vue]\n<wd-swiper :list=\"swiperList\" autoplay v-model:current=\"current\" :indicator=\"{ type: 'dots' }\"></wd-swiper>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\n\nconst current = ref(0)\n\nconst swiperList = ref([\n 'https://wot-ui.cn/assets/redpanda.jpg',\n 'https://wot-ui.cn/assets/capybara.jpg',\n 'https://wot-ui.cn/assets/panda.jpg',\n 'https://wot-ui.cn/assets/moon.jpg',\n 'https://wot-ui.cn/assets/meng.jpg'\n])\n```\n\n:::\n\n### 点条状指示器\n\n```html\n<wd-swiper :list=\"swiperList\" autoplay v-model:current=\"current\" :indicator=\"{ type: 'dots-bar' }\"></wd-swiper>\n```\n\n### 数字指示器\n\n```html\n<wd-swiper\n :list=\"swiperList\"\n autoplay\n v-model:current=\"current\"\n :indicator=\"{ type: 'fraction' }\"\n indicator-position=\"bottom-right\"\n></wd-swiper>\n```\n\n## 组件变体\n\n### 手动切换\n\n关闭 `autoplay` 并开启 `showControls` 后，可通过控制按钮手动切换轮播项。\n\n```html\n<wd-swiper\n :list=\"swiperList\"\n :autoplay=\"false\"\n v-model:current=\"current\"\n :indicator=\"{ showControls: true }\"\n :loop=\"false\"\n></wd-swiper>\n```\n\n### 垂直方向\n\n```html\n<wd-swiper\n :list=\"swiperList\"\n direction=\"vertical\"\n indicator-position=\"right\"\n autoplay\n v-model:current=\"current\"\n :indicator=\"{ type: 'dots-bar' }\"\n></wd-swiper>\n```\n\n### 指定 value-key 和 text-key\n\n当 `list` 为对象数组时，可通过 `value-key` 和 `text-key` 指定图片地址字段与标题字段。\n\n::: code-group\n\n```html [vue]\n<wd-swiper value-key=\"url\" text-key=\"title\" :list=\"customSwiperList\" autoplay v-model:current=\"current\"></wd-swiper>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\n\nconst current = ref(0)\n\nconst customSwiperList = ref([\n { url: 'https://wot-ui.cn/assets/redpanda.jpg', title: '小熊猫' },\n { url: 'https://wot-ui.cn/assets/capybara.jpg', title: '卡皮巴拉' },\n { url: 'https://wot-ui.cn/assets/panda.jpg', title: '大熊猫' },\n { url: 'https://wot-ui.cn/assets/moon.jpg', title: '诗画中国' }\n])\n```\n\n:::\n\n## 组件样式\n\n### 卡片样式\n\n设置 `previous-margin` 和 `next-margin`，并结合自定义类名，可以实现卡片轮播样式。\n\n```html\n<view class=\"card-swiper\">\n <wd-swiper\n autoplay\n v-model:current=\"current\"\n :indicator=\"{ type: 'dots' }\"\n :list=\"swiperList\"\n previous-margin=\"24px\"\n next-margin=\"24px\"\n custom-indicator-class=\"custom-indicator-class\"\n custom-image-class=\"custom-image\"\n custom-next-image-class=\"custom-image-prev\"\n custom-prev-image-class=\"custom-image-prev\"\n ></wd-swiper>\n</view>\n```\n\n```scss\n.card-swiper {\n --wot-swiper-radius: 0;\n --wot-swiper-item-padding: 0 24rpx;\n --wot-swiper-nav-dot-color: #e7e7e7;\n --wot-swiper-nav-dot-active-color: #4d80f0;\n padding-bottom: 24rpx;\n\n :deep(.custom-indicator-class) {\n bottom: -16px;\n }\n\n :deep(.custom-image) {\n border-radius: 12rpx;\n }\n\n :deep(.custom-image-prev) {\n height: 168px !important;\n }\n}\n```\n\n### 同时展示 2 个滑块\n\n通过 `display-multiple-items` 控制同时展示的滑块数量。\n\n```html\n<wd-swiper\n autoplay\n v-model:current=\"current\"\n :display-multiple-items=\"2\"\n :indicator=\"{ type: 'dots' }\"\n :list=\"swiperList\"\n previous-margin=\"24px\"\n next-margin=\"24px\"\n></wd-swiper>\n```\n\n### 自定义指示器\n\n通过 `indicator` 插槽可以完全自定义指示器展示。\n\n```html\n<wd-swiper :list=\"swiperList\" direction=\"vertical\" indicator-position=\"right\" autoplay v-model:current=\"current\">\n <template #indicator=\"{ current, total }\">\n <view class=\"custom-indicator\">{{ current + 1 }}/{{ total }}</view>\n </template>\n</wd-swiper>\n```\n\n```scss\n.custom-indicator {\n position: absolute;\n right: 24rpx;\n bottom: 24rpx;\n padding: 0 12rpx;\n height: 48rpx;\n line-height: 48rpx;\n border-radius: 45%;\n background: rgba(0, 0, 0, 0.6);\n color: #ffffff;\n font-size: 24rpx;\n}\n```\n\n## 特殊样式\n\n### 视频轮播\n\n```html\n<wd-swiper :list=\"videoList\" autoplay :indicator=\"{ type: 'fraction' }\" indicator-position=\"top-right\"></wd-swiper>\n```\n\n```ts\nimport { ref } from 'vue'\n\nconst videoList = ref([\n 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',\n 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',\n 'https://wot-ui.cn/assets/moon.jpg'\n])\n```\n\n### 手动播放视频\n\n```html\n<wd-swiper\n :list=\"videoList\"\n autoplay\n :autoplay-video=\"false\"\n :indicator=\"{ type: 'fraction' }\"\n indicator-position=\"top-right\"\n></wd-swiper>\n```\n\n### 播放视频时停止轮播\n\n```html\n<wd-swiper\n :list=\"videoList\"\n autoplay\n stop-autoplay-when-video-play\n :autoplay-video=\"false\"\n :indicator=\"{ type: 'fraction' }\"\n indicator-position=\"top-right\"\n></wd-swiper>\n```\n\n### 属性控制切换\n\n```html\n<wd-swiper :loop=\"isLoop\" :autoplay=\"false\" :list=\"swiperList\" v-model:current=\"current\" />\n<wd-gap />\n<wd-cell-group>\n <wd-cell title=\"loop\">\n <wd-switch v-model=\"isLoop\" size=\"24px\" />\n </wd-cell>\n <wd-cell title=\"current\" :value=\"current.toString()\" />\n</wd-cell-group>\n<view style=\"display: flex; justify-content: space-between\">\n <wd-button @click=\"current--\">prev</wd-button>\n <wd-button type=\"success\" @click=\"current++\">next</wd-button>\n</view>\n```\n\n### 插槽用法\n\n通过默认插槽可以自定义轮播项内容。\n\n```html\n<wd-swiper :list=\"swiperList\" autoplay v-model:current=\"current\" :indicator=\"{ type: 'dots-bar' }\">\n <template #default=\"{ item }\">\n <image :src=\"item as string\" mode=\"aspectFill\" style=\"width: 100%; height: 100%\" />\n </template>\n</wd-swiper>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| autoplay | 是否自动播放 | `boolean` | `true` |\n| v-model:current | 当前轮播项索引 | `number` | `0` |\n| direction | 轮播方向，可选值为 `horizontal`、`vertical` | `DirectionType` | `horizontal` |\n| display-multiple-items | 同时显示的滑块数量 | `number` | `1` |\n| duration | 滑动动画时长，单位为 `ms` | `number` | `300` |\n| easing-function | 切换缓动动画类型，可选值为 `default`、`linear`、`easeInCubic`、`easeOutCubic`、`easeInOutCubic` | `EasingType` | `default` |\n| height | 轮播高度 | <code>string | number</code> | `192` |\n| interval | 自动轮播间隔时间，单位为 `ms` | `number` | `5000` |\n| list | 轮播数据列表，支持字符串数组或对象数组 | <code>string[] | SwiperItem[]</code> | `[]` |\n| loop | 是否循环播放 | `boolean` | `true` |\n| video-loop | 视频是否循环播放 | `boolean` | `true` |\n| muted | 视频是否静音播放 | `boolean` | `true` |\n| next-margin | 后边距 | <code>string | number</code> | `0` |\n| indicator-position | 指示器位置，可选值为 `left`、`top-left`、`top`、`top-right`、`bottom-left`、`bottom`、`bottom-right`、`right` | `IndicatorPositionType` | `bottom` |\n| previous-margin | 前边距 | <code>string | number</code> | `0` |\n| radius | 轮播圆角 | <code>string | number</code> | - |\n| snap-to-edge | 是否将边距应用到首尾元素 | `boolean` | `false` |\n| indicator | 指示器配置，传入 `false` 时隐藏指示器 | <code>boolean | Partial<SwiperIndicatorProps></code> | `true` |\n| image-mode | 图片裁剪模式，取值参考 uni-app Image 组件 `mode` | `ImageMode` | `aspectFill` |\n| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | `boolean` | `false` |\n| value-key | 选项对象中图片地址字段名 | `string` | `value` |\n| text-key | 选项对象中标题字段名 | `string` | `text` |\n| autoplay-video | 视频是否自动播放 | `boolean` | `true` |\n| stop-previous-video | 切换轮播项时是否停止上一个视频播放 | `boolean` | `true` |\n| stop-autoplay-when-video-play | 视频播放时是否停止自动轮播 | `boolean` | `false` |\n| adjust-height | 自动根据滑块高度调整容器高度，可选值为 `first`、`current`、`highest`、`none`，仅支付宝小程序支持 | `AdjustHeightType` | `highest` |\n| adjust-vertical-height | `vertical` 为 `true` 时强制让 `adjust-height` 生效，仅支付宝小程序支持 | `boolean` | `false` |\n| custom-indicator-class | 自定义指示器类名 | `string` | `''` |\n| custom-image-class | 自定义图片类名 | `string` | `''` |\n| custom-prev-image-class | 自定义前一个图片类名 | `string` | `''` |\n| custom-next-image-class | 自定义后一个图片类名 | `string` | `''` |\n| custom-item-class | 自定义轮播项类名 | `string` | `''` |\n| custom-prev-class | 自定义前一个轮播项类名 | `string` | `''` |\n| custom-next-class | 自定义后一个轮播项类名 | `string` | `''` |\n| custom-text-class | 自定义标题类名 | `string` | `''` |\n| custom-text-style | 自定义标题样式 | `string` | `''` |\n| custom-class | 根节点自定义样式类 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击轮播项时触发 | <code>{ index: number; item: SwiperItem | string }</code> |\n| change | 轮播切换时触发 | <code>{ current: number; source: string }</code> |\n| animationfinish | 轮播动画结束时触发 | <code>{ current: number; source: string }</code> |\n| update:current | 当前轮播项更新时触发 | `number` |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 自定义轮播项内容，参数为 <code>{ item, index }</code> |\n| indicator | 自定义指示器内容，参数为 <code>{ current, total }</code> |\n\n## 类型定义\n\n### DirectionType\n\n轮播方向，可选值为 `horizontal`、`vertical`。\n\n### EasingType\n\n切换缓动动画类型，可选值为 `default`、`linear`、`easeInCubic`、`easeOutCubic`、`easeInOutCubic`。\n\n### IndicatorPositionType\n\n指示器位置，可选值为 `left`、`top-left`、`top`、`top-right`、`bottom-left`、`bottom`、`bottom-right`、`right`。\n\n### AdjustHeightType\n\n自动高度策略，可选值为 `first`、`current`、`highest`、`none`。\n\n### SwiperIndicatorType\n\n指示器类型，可选值为 `dots`、`dots-bar`、`fraction`。\n\n### SwiperItem\n\n轮播项对象配置，支持扩展字段。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| value | 图片或视频地址 | `string` | - |\n| poster | 视频封面地址 | `string` | - |\n| type | 资源类型，可选值为 `image`、`video` | `SwiperItemType` | - |\n\n### SwiperIndicator Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| current | 当前轮播项索引 | `number` | `0` |\n| direction | 轮播方向，可选值为 `horizontal`、`vertical` | `DirectionType` | `horizontal` |\n| min-show-num | 小于该数量时不显示导航器 | `number` | `2` |\n| indicator-position | 指示器位置，可选值为 `left`、`top-left`、`top`、`top-right`、`bottom-left`、`bottom`、`bottom-right`、`right` | `IndicatorPositionType` | `bottom` |\n| show-controls | 是否显示两侧控制按钮 | `boolean` | `false` |\n| total | 轮播项总数 | `number` | `0` |\n| type | 指示器类型，可选值为 `dots`、`dots-bar`、`fraction` | `SwiperIndicatorType` | `dots` |",
|
|
15380
15377
|
"props": [
|
|
15381
15378
|
{
|
|
@@ -15748,8 +15745,8 @@
|
|
|
15748
15745
|
"category": "未分类",
|
|
15749
15746
|
"description": "用来打开或关闭选项。",
|
|
15750
15747
|
"descriptionZh": "用来打开或关闭选项。",
|
|
15751
|
-
"since": "2.0.
|
|
15752
|
-
"doc": "# Switch 开关\n\n用来打开或关闭选项。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 为绑定值，默认为 boolean 类型。\n\n```html\n<wd-switch v-model=\"checked\" />\n```\n\n```ts\nconst checked = ref<boolean>(true)\n```\n\n### 修改值\n\n通过 `active-value` 属性修改开关打开时的值，`inactive-value` 属性修改开关关闭时的值。\n\n```html\n<wd-switch v-model=\"checked\" active-value=\"沃特\" inactive-value=\"商家后台\" />\n```\n\n## 组件状态\n\n### 加载状态\n\n设置 `loading` 显示加载状态。\n\n```html\n<wd-switch v-model=\"checked\" loading active-text=\"上班\" inactive-text=\"下班\" />\n```\n\n### 禁用状态\n\n设置 `disabled` 禁用开关。\n\n```html\n<wd-switch v-model=\"checked\" disabled />\n```\n\n## 组件样式\n\n### 修改颜色\n\n通过 `active-color` 属性修改开关打开时的颜色，`inactive-color` 属性修改开关关闭时的颜色。\n\n```html\n<wd-switch v-model=\"checked\" active-color=\"#13ce66\" inactive-color=\"#f00\" />\n```\n\n### 文字描述\n\n通过 `active-text` 和 `inactive-text` 设置开关内文案。\n\n```html\n<wd-switch v-model=\"checked\" active-text=\"上班\" inactive-text=\"下班\" />\n```\n\n### 自定义显示图标\n\n通过 `active-icon` 和 `inactive-icon` 自定义开关内部图标。\n\n```html\n<wd-switch v-model=\"checked\" active-icon=\"check\" inactive-icon=\"close\" />\n```\n\n### 自定义动作图标\n\n通过 `active-action-icon` 和 `inactive-action-icon` 自定义按钮图标。\n\n```html\n<wd-switch v-model=\"checked\" active-action-icon=\"check\" inactive-action-icon=\"close\" />\n```\n\n### 形状\n\n通过 `shape` 设置形状，可选值为 `round`、`square`。\n\n```html\n<wd-switch v-model=\"checked\" shape=\"round\" />\n<wd-switch v-model=\"checked\" shape=\"square\" />\n```\n\n### 自定义大小\n\n设置 `size` 修改开关大小。\n\n```html\n<wd-switch v-model=\"checked\" size=\"24px\" />\n```\n\n## 特殊样式\n\n### 搭配表单使用\n\n可以放入表单项中作为右侧操作控件。\n\n```html\n<wd-form-item title=\"搭配表单使用\" center>\n <wd-switch v-model=\"checked\" size=\"20\" />\n</wd-form-item>\n```\n\n### 修改前钩子\n\n设置 `before-change` 属性，修改前钩子，接收目标 `value`，返回 `false` 表示不修改，支持返回 `Promise<boolean>`。\n\n```html\n<wd-switch v-model=\"checked\" :before-change=\"beforeChange\" @change=\"handleChange\" />\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst message = useDialog()\n\nconst beforeChange = (value) => {\n return message.confirm('是否切换开关').then(() => true).catch(() => false)\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value / v-model | 绑定值 | `boolean \\| string \\| number` | `false` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| inactive-action-icon | 非激活状态操作按钮图标 | `string` | - |\n| active-action-icon | 激活状态操作按钮图标 | `string` | - |\n| active-icon | 激活状态图标，设置后会忽略 `active-text` | `string` | - |\n| inactive-icon | 非激活状态图标，设置后会忽略 `inactive-text` | `string` | - |\n| active-text | 激活状态文本 | `string` | `''` |\n| inactive-text | 非激活状态文本 | `string` | `''` |\n| active-value | 激活值 | `boolean \\| string \\| number` | `true` |\n| inactive-value | 非激活值 | `boolean \\| string \\| number` | `false` |\n| active-color | 激活颜色 | `string` | - |\n| inactive-color | 非激活颜色 | `string` | - |\n| size | 开关大小 | `string \\| number` | - |\n| shape | 形状，可选值为 `round`、`square` | `SwitchShape` | `'round'` |\n| loading | 是否显示加载中 | `boolean` | `false` |\n| loading-props | 加载配置项 | `Partial<LoadingProps>` | - |\n| before-change | 修改前钩子 | `SwitchBeforeChange` | - |\n|
|
|
15748
|
+
"since": "2.0.4",
|
|
15749
|
+
"doc": "# Switch 开关\n\n用来打开或关闭选项。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 为绑定值，默认为 boolean 类型。\n\n```html\n<wd-switch v-model=\"checked\" />\n```\n\n```ts\nconst checked = ref<boolean>(true)\n```\n\n### 修改值\n\n通过 `active-value` 属性修改开关打开时的值，`inactive-value` 属性修改开关关闭时的值。\n\n```html\n<wd-switch v-model=\"checked\" active-value=\"沃特\" inactive-value=\"商家后台\" />\n```\n\n## 组件状态\n\n### 加载状态\n\n设置 `loading` 显示加载状态。\n\n```html\n<wd-switch v-model=\"checked\" loading active-text=\"上班\" inactive-text=\"下班\" />\n```\n\n### 禁用状态\n\n设置 `disabled` 禁用开关。\n\n```html\n<wd-switch v-model=\"checked\" disabled />\n```\n\n## 组件样式\n\n### 修改颜色\n\n通过 `active-color` 属性修改开关打开时的颜色，`inactive-color` 属性修改开关关闭时的颜色。\n\n```html\n<wd-switch v-model=\"checked\" active-color=\"#13ce66\" inactive-color=\"#f00\" />\n```\n\n### 文字描述\n\n通过 `active-text` 和 `inactive-text` 设置开关内文案。\n\n```html\n<wd-switch v-model=\"checked\" active-text=\"上班\" inactive-text=\"下班\" />\n```\n\n### 自定义显示图标\n\n通过 `active-icon` 和 `inactive-icon` 自定义开关内部图标。\n\n```html\n<wd-switch v-model=\"checked\" active-icon=\"check\" inactive-icon=\"close\" />\n```\n\n### 自定义动作图标\n\n通过 `active-action-icon` 和 `inactive-action-icon` 自定义按钮图标。\n\n```html\n<wd-switch v-model=\"checked\" active-action-icon=\"check\" inactive-action-icon=\"close\" />\n```\n\n### 形状\n\n通过 `shape` 设置形状，可选值为 `round`、`square`。\n\n```html\n<wd-switch v-model=\"checked\" shape=\"round\" />\n<wd-switch v-model=\"checked\" shape=\"square\" />\n```\n\n### 自定义大小\n\n设置 `size` 修改开关大小。\n\n```html\n<wd-switch v-model=\"checked\" size=\"24px\" />\n```\n\n## 特殊样式\n\n### 搭配表单使用\n\n可以放入表单项中作为右侧操作控件。\n\n```html\n<wd-form-item title=\"搭配表单使用\" center>\n <wd-switch v-model=\"checked\" size=\"20\" />\n</wd-form-item>\n```\n\n### 修改前钩子\n\n设置 `before-change` 属性，修改前钩子，接收目标 `value`，返回 `false` 表示不修改，支持返回 `Promise<boolean>`。\n\n```html\n<wd-switch v-model=\"checked\" :before-change=\"beforeChange\" @change=\"handleChange\" />\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst message = useDialog()\n\nconst beforeChange = (value) => {\n return message.confirm('是否切换开关').then(() => true).catch(() => false)\n}\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value / v-model | 绑定值 | `boolean \\| string \\| number` | `false` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| inactive-action-icon | 非激活状态操作按钮图标 | `string` | - |\n| active-action-icon | 激活状态操作按钮图标 | `string` | - |\n| active-icon | 激活状态图标，设置后会忽略 `active-text` | `string` | - |\n| inactive-icon | 非激活状态图标，设置后会忽略 `inactive-text` | `string` | - |\n| class-prefix | 类名前缀，用于使用自定义图标，用法参考 Icon 组件 | `string` | `'wd-icon'` |\n| inactive-action-css-icon | 非激活状态操作按钮 CSS 图标，用法参考 Icon 组件 | `boolean \\| string` | `false` |\n| active-action-css-icon | 激活状态操作按钮 CSS 图标，用法参考 Icon 组件 | `boolean \\| string` | `false` |\n| active-css-icon | 激活状态 CSS 图标，设置后将忽略 `active-text`，用法参考 Icon 组件 | `boolean \\| string` | `false` |\n| inactive-css-icon | 非激活状态 CSS 图标，设置后将忽略 `inactive-text`，用法参考 Icon 组件 | `boolean \\| string` | `false` |\n| active-text | 激活状态文本 | `string` | `''` |\n| inactive-text | 非激活状态文本 | `string` | `''` |\n| active-value | 激活值 | `boolean \\| string \\| number` | `true` |\n| inactive-value | 非激活值 | `boolean \\| string \\| number` | `false` |\n| active-color | 激活颜色 | `string` | - |\n| inactive-color | 非激活颜色 | `string` | - |\n| size | 开关大小 | `string \\| number` | - |\n| shape | 形状，可选值为 `round`、`square` | `SwitchShape` | `'round'` |\n| loading | 是否显示加载中 | `boolean` | `false` |\n| loading-props | 加载配置项 | `Partial<LoadingProps>` | - |\n| before-change | 修改前钩子 | `SwitchBeforeChange` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 值修改事件 | `{ value }` |\n",
|
|
15753
15750
|
"props": [
|
|
15754
15751
|
{
|
|
15755
15752
|
"name": "model-value / v-model",
|
|
@@ -15787,6 +15784,36 @@
|
|
|
15787
15784
|
"type": "`string`",
|
|
15788
15785
|
"default": "-"
|
|
15789
15786
|
},
|
|
15787
|
+
{
|
|
15788
|
+
"name": "class-prefix",
|
|
15789
|
+
"description": "类名前缀，用于使用自定义图标，用法参考 Icon 组件",
|
|
15790
|
+
"type": "`string`",
|
|
15791
|
+
"default": "`'wd-icon'`"
|
|
15792
|
+
},
|
|
15793
|
+
{
|
|
15794
|
+
"name": "inactive-action-css-icon",
|
|
15795
|
+
"description": "非激活状态操作按钮 CSS 图标，用法参考 Icon 组件",
|
|
15796
|
+
"type": "`boolean | string`",
|
|
15797
|
+
"default": "`false`"
|
|
15798
|
+
},
|
|
15799
|
+
{
|
|
15800
|
+
"name": "active-action-css-icon",
|
|
15801
|
+
"description": "激活状态操作按钮 CSS 图标，用法参考 Icon 组件",
|
|
15802
|
+
"type": "`boolean | string`",
|
|
15803
|
+
"default": "`false`"
|
|
15804
|
+
},
|
|
15805
|
+
{
|
|
15806
|
+
"name": "active-css-icon",
|
|
15807
|
+
"description": "激活状态 CSS 图标，设置后将忽略 `active-text`，用法参考 Icon 组件",
|
|
15808
|
+
"type": "`boolean | string`",
|
|
15809
|
+
"default": "`false`"
|
|
15810
|
+
},
|
|
15811
|
+
{
|
|
15812
|
+
"name": "inactive-css-icon",
|
|
15813
|
+
"description": "非激活状态 CSS 图标，设置后将忽略 `inactive-text`，用法参考 Icon 组件",
|
|
15814
|
+
"type": "`boolean | string`",
|
|
15815
|
+
"default": "`false`"
|
|
15816
|
+
},
|
|
15790
15817
|
{
|
|
15791
15818
|
"name": "active-text",
|
|
15792
15819
|
"description": "激活状态文本",
|
|
@@ -15853,12 +15880,6 @@
|
|
|
15853
15880
|
"type": "`SwitchBeforeChange`",
|
|
15854
15881
|
"default": "-"
|
|
15855
15882
|
},
|
|
15856
|
-
{
|
|
15857
|
-
"name": "class-prefix",
|
|
15858
|
-
"description": "图标类名前缀",
|
|
15859
|
-
"type": "`string`",
|
|
15860
|
-
"default": "`'wd-icon'`"
|
|
15861
|
-
},
|
|
15862
15883
|
{
|
|
15863
15884
|
"name": "custom-class",
|
|
15864
15885
|
"description": "根节点自定义类名",
|
|
@@ -15978,7 +15999,7 @@
|
|
|
15978
15999
|
},
|
|
15979
16000
|
{
|
|
15980
16001
|
"name": "--wot-switch-radius-full",
|
|
15981
|
-
"defaultValue": "$radius-
|
|
16002
|
+
"defaultValue": "$radius-full",
|
|
15982
16003
|
"description": "圆角模式圆角"
|
|
15983
16004
|
},
|
|
15984
16005
|
{
|
|
@@ -15988,7 +16009,7 @@
|
|
|
15988
16009
|
},
|
|
15989
16010
|
{
|
|
15990
16011
|
"name": "--wot-switch-radius-action-full",
|
|
15991
|
-
"defaultValue": "$radius-
|
|
16012
|
+
"defaultValue": "$radius-full",
|
|
15992
16013
|
"description": "圆角模式操作块圆角"
|
|
15993
16014
|
},
|
|
15994
16015
|
{
|
|
@@ -16089,7 +16110,7 @@
|
|
|
16089
16110
|
"category": "未分类",
|
|
16090
16111
|
"description": "标签页组件，用于在不同内容区域之间进行切换。",
|
|
16091
16112
|
"descriptionZh": "标签页组件，用于在不同内容区域之间进行切换。",
|
|
16092
|
-
"since": "2.0.
|
|
16113
|
+
"since": "2.0.4",
|
|
16093
16114
|
"doc": "# Tab 标签页\n\n标签页组件，用于在不同内容区域之间进行切换。\n\n## 组件类型\n\n### 基本用法\n\n`v-model` 可以使用数字下标，也可以使用字符串名称。\n\n```html\n<wd-tabs v-model=\"tab1\" @change=\"handleChange\">\n <block v-for=\"item in 4\" :key=\"item\">\n <wd-tab :title=\"`标签${item}`\">\n <view class=\"content\">内容{{ tab1 + 1 }}</view>\n </wd-tab>\n </block>\n</wd-tabs>\n```\n\n```ts\nconst tab1 = ref(0)\n\nfunction handleChange(event) {\n console.log(event)\n}\n```\n\n### name 匹配\n\n为 `wd-tab` 设置 `name` 后，可通过字符串值匹配当前激活项。\n\n```html\n<wd-tabs v-model=\"tab\">\n <wd-tab v-for=\"item in tabs\" :key=\"item\" :title=\"item\" :name=\"item\">\n <view class=\"content\">内容{{ tab }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n```ts\nconst tabs = ref(['this', 'is', 'a', 'individual', 'example'])\nconst tab = ref('a')\n```\n\n### 使用徽标\n\n通过 `badge-props` 为标签添加徽标。\n\n```html\n<wd-tabs v-model=\"tabWithBadge\">\n <wd-tab v-for=\"(item, index) in tabsWithBadge\" :key=\"index\" :title=\"item.title\" :badge-props=\"item.badgeProps\">\n <view class=\"content\">{{ item.title }}徽标</view>\n </wd-tab>\n</wd-tabs>\n```\n\n## 组件状态\n\n### 粘性布局\n\n设置 `sticky` 开启吸顶布局，可配合 `offset-top` 控制吸顶偏移量。\n\n```html\n<wd-tabs v-model=\"tab2\" sticky>\n <wd-tab v-for=\"item in 4\" :key=\"item\" :title=\"`标签${item}`\">\n <view class=\"content\">内容{{ tab2 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n### 禁用 Tab\n\n通过 `wd-tab` 的 `disabled` 属性禁用单个页签。\n\n```html\n<wd-tabs v-model=\"tab3\">\n <wd-tab v-for=\"item in 4\" :key=\"item\" :title=\"`标签${item}`\" :disabled=\"item === 1\">\n <view class=\"content\">内容{{ tab3 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n## 组件样式\n\n### 底部条样式\n\n通过 `line-theme` 调整底部条表现，支持 `normal`、`text`、`underline`、`dot`。\n\n```html\n<wd-tabs v-model=\"tabLineTheme.normal\" line-theme=\"normal\">\n <wd-tab v-for=\"item in 4\" :key=\"item\" :title=\"`normal ${item}`\">\n <view class=\"content\">内容{{ item }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n## 特殊样式\n\n### 点击事件\n\n监听 `click` 获取当前点击的页签信息。\n\n```html\n<wd-tabs v-model=\"tab4\" @click=\"handleClick\" @change=\"handleChange\">\n <wd-tab v-for=\"item in 4\" :key=\"item\" :title=\"`标签${item}`\">\n <view class=\"content\">内容{{ tab4 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n```ts\nfunction handleClick({ index, name }) {\n console.log(index, name)\n}\n```\n\n### 切换动画\n\n设置 `animated` 开启内容切换动画。\n\n```html\n<wd-tabs v-model=\"tab8\" animated>\n <wd-tab v-for=\"item in 4\" :key=\"item\" :title=\"`标签${item}`\">\n <view class=\"content\">内容{{ tab8 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n### 手势滑动\n\n设置 `swipeable` 开启手势滑动，常与 `animated` 组合使用。\n\n```html\n<wd-tabs v-model=\"tab5\" swipeable animated>\n <wd-tab v-for=\"item in 4\" :key=\"item\" :title=\"`标签${item}`\">\n <view class=\"content\">内容{{ tab5 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n### 超出滚动与导航地图\n\n标签数量超过 `slidable-num` 后可滑动，超过 `map-num` 后会显示导航地图；将 `slidable` 设为 `always` 时可始终左对齐滚动。\n\n```html\n<wd-tabs v-model=\"tab6\">\n <wd-tab v-for=\"item in 7\" :key=\"item\" :title=\"`标签${item}`\">\n <view class=\"content\">内容{{ tab6 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n\n<wd-tabs v-model=\"tab9\" slidable=\"always\">\n <wd-tab v-for=\"item in 5\" :key=\"item\" :title=\"`超大标签${item}`\">\n <view class=\"content\">内容{{ tab9 + 1 }}</view>\n </wd-tab>\n</wd-tabs>\n```\n\n### 在弹出框中使用\n\n在微信小程序等场景中，弹出层打开后可调用 `updateLineStyle` 更新激活项样式。\n\n::: code-group\n\n```html [vue]\n<wd-button @click=\"handleOpenClick\">打开弹窗</wd-button>\n<wd-popup v-model=\"showPopup\" position=\"bottom\" @after-enter=\"handlePopupShow\" closable>\n <wd-tabs v-model=\"tab10\" ref=\"tabsRef\">\n <wd-tab v-for=\"item in tabs\" :key=\"item\" :title=\"item\" :name=\"item\">\n <view class=\"content\">内容{{ tab10 }}</view>\n </wd-tab>\n </wd-tabs>\n</wd-popup>\n```\n\n```ts [ts]\nimport type { TabsInstance } from '@/uni_modules/wot-ui/components/wd-tabs/types'\n\nconst showPopup = ref(false)\nconst tabsRef = ref<TabsInstance>()\n\nfunction handleOpenClick() {\n showPopup.value = true\n}\n\nfunction handlePopupShow() {\n tabsRef.value?.updateLineStyle(false)\n}\n```\n\n:::\n\n## Tabs Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 当前激活项，可为索引或名称 | `number | string` | `0` |\n| slidable-num | 自动开启滚动的标签数量阈值 | `number` | `6` |\n| map-num | 显示导航地图的标签数量阈值 | `number` | `10` |\n| map-title | 导航地图标题 | `string` | - |\n| sticky | 是否开启粘性布局 | `boolean` | `false` |\n| offset-top | 吸顶偏移量 | `number` | `0` |\n| swipeable | 是否开启手势滑动 | `boolean` | `false` |\n| line-theme | 底部条样式，可选值为 `normal`、`text`、`underline`、`dot` | `TabsLineTheme` | `normal` |\n| line-width | 底部条宽度 | `number | string` | - |\n| line-height | 底部条高度 | `number | string` | - |\n| color | 激活项文字颜色 | `string` | `''` |\n| inactive-color | 非激活项文字颜色 | `string` | `''` |\n| animated | 是否开启切换动画 | `boolean` | `false` |\n| duration | 动画时长，单位毫秒 | `number` | `300` |\n| slidable | 是否开启滚动导航，可选值为 `auto`、`always` | `TabsSlidable` | `auto` |\n| show-scrollbar | 滚动时是否显示滚动条 | `boolean` | `false` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Tabs Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 激活项变化时触发 | `{ index, name }` |\n| click | 点击页签标题时触发 | `{ index, name }` |\n| disabled | 点击禁用页签时触发 | `{ index, name }` |\n| update:modelValue | 激活项变化时触发 | `number | string` |\n\n## Tabs Methods\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| setActive | 设置激活项 | `(value: number \\| string, init: boolean, setScroll: boolean)` | - |\n| scrollIntoView | 使选中项滚动到可视区域 | - | - |\n| updateLineStyle | 更新激活项底部条样式 | `(animation?: boolean)` | - |\n\n## Tabs Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | Tab 内容 |\n\n## Tab Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| name | 标签唯一标识，默认取索引 | `number | string` | - |\n| title | 标签标题 | `string` | - |\n| disabled | 是否禁用 | `boolean` | `false` |\n| lazy | 是否懒加载内容 | `boolean` | `true` |\n| badge-props | 徽标属性，透传给 Badge 组件 | `Partial<BadgeProps>` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Tab Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 页签内容 |",
|
|
16094
16115
|
"props": [
|
|
16095
16116
|
{
|
|
@@ -16262,7 +16283,7 @@
|
|
|
16262
16283
|
},
|
|
16263
16284
|
{
|
|
16264
16285
|
"name": "--wot-tabs-nav-item-line-height",
|
|
16265
|
-
"defaultValue": "$typography-body-line
|
|
16286
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
16266
16287
|
"description": "导航项行高"
|
|
16267
16288
|
},
|
|
16268
16289
|
{
|
|
@@ -16342,7 +16363,7 @@
|
|
|
16342
16363
|
},
|
|
16343
16364
|
{
|
|
16344
16365
|
"name": "--wot-tabs-map-header-line-height",
|
|
16345
|
-
"defaultValue": "$typography-body-line
|
|
16366
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
16346
16367
|
"description": "地图模式头部行高"
|
|
16347
16368
|
},
|
|
16348
16369
|
{
|
|
@@ -16382,7 +16403,7 @@
|
|
|
16382
16403
|
},
|
|
16383
16404
|
{
|
|
16384
16405
|
"name": "--wot-tabs-map-nav-btn-line-height",
|
|
16385
|
-
"defaultValue": "$typography-body-line
|
|
16406
|
+
"defaultValue": "$typography-body-line-height-size-ultra-large",
|
|
16386
16407
|
"description": "地图模式导航按钮行高"
|
|
16387
16408
|
},
|
|
16388
16409
|
{
|
|
@@ -16471,7 +16492,7 @@
|
|
|
16471
16492
|
"category": "未分类",
|
|
16472
16493
|
"description": "底部导航栏，用于在不同页面之间进行切换。",
|
|
16473
16494
|
"descriptionZh": "底部导航栏，用于在不同页面之间进行切换。",
|
|
16474
|
-
"since": "2.0.
|
|
16495
|
+
"since": "2.0.4",
|
|
16475
16496
|
"doc": "# Tabbar 标签栏\n\n底部导航栏，用于在不同页面之间进行切换。\n\n## 组件类型\n\n### 基础用法\n\n`v-model` 为绑定值，表示选中标签的索引值或者名称。\n\n```html\n<wd-tabbar v-model=\"tabbar\">\n <wd-tabbar-item title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item title=\"分类\" icon=\"cart\"></wd-tabbar-item>\n <wd-tabbar-item title=\"我的\" icon=\"user\"></wd-tabbar-item>\n</wd-tabbar>\n```\n\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n```\n\n### 通过名称匹配\n\n通过设置 `name` 属性，可以通过名称匹配选中标签。\n\n```html\n<wd-tabbar v-model=\"tabbar\">\n <wd-tabbar-item name=\"home\" title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item name=\"cart\" title=\"分类\" icon=\"cart\"></wd-tabbar-item>\n <wd-tabbar-item name=\"setting\" title=\"设置\" icon=\"setting\"></wd-tabbar-item>\n <wd-tabbar-item name=\"user\" title=\"我的\" icon=\"user\"></wd-tabbar-item>\n</wd-tabbar>\n```\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref('home')\n```\n\n\n## 组件状态\n\n### 徽标提示\n\n通过设置 `value` 属性，可以显示徽标提示，而设置 is-dot 属性后，会在图标右上角展示一个小红点。\n\n```html\n<wd-tabbar v-model=\"tabbar\">\n <wd-tabbar-item is-dot :value=\"2\" title=\"点状\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"2\" icon=\"cart\" title=\"分类\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"30\" title=\"我的\" icon=\"user\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"200\" title=\"最大值\" icon=\"user\"></wd-tabbar-item>\n</wd-tabbar>\n```\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n```\n\n## 组件变体\n\n### 悬浮标签栏\n\n通过设置 `shape` 属性为 `round`，可以将标签栏设置为悬浮样式。\n\n```html\n<wd-tabbar shape=\"round\" v-model=\"tabbar\">\n <wd-tabbar-item title=\"首页\" is-dot :value=\"2\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item title=\"分类\" :value=\"2\" icon=\"cart\"></wd-tabbar-item>\n <wd-tabbar-item title=\"相册\" :value=\"30\" icon=\"photo\"></wd-tabbar-item>\n <wd-tabbar-item title=\"我的\" :value=\"200\" icon=\"user\"></wd-tabbar-item>\n</wd-tabbar>\n```\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n```\n\n## 组件样式\n\n### 自定义图标\n\n通过使用 `<template #icon>` 可以自定义标签页的图标。\n\n```html\n<wd-tabbar v-model=\"tabbar\">\n <wd-tabbar-item :value=\"2\" title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"2\" icon=\"cart\" title=\"分类\">\n <template #icon>\n <wd-img round height=\"40rpx\" width=\"40rpx\" src=\"https://wot-ui.cn/assets/panda.jpg\"></wd-img>\n </template>\n </wd-tabbar-item>\n <wd-tabbar-item :value=\"3\" title=\"我的\" icon=\"user\"></wd-tabbar-item>\n</wd-tabbar>\n```\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n```\n\n### 自定义颜色\n\n通过设置 `active-color` 和 `inactive-color` 属性，可以自定义激活和未激活标签的颜色。\n\n```html\n<wd-tabbar v-model=\"tabbar\" active-color=\"#ee0a24\" inactive-color=\"#7d7e80\">\n <wd-tabbar-item is-dot :value=\"2\" title=\"点状\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"2\" icon=\"cart\" title=\"分类\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"30\" title=\"我的\" icon=\"user\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"200\" title=\"最大值\" icon=\"photo\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"10\" title=\"客服\" icon=\"chat\"></wd-tabbar-item>\n</wd-tabbar>\n```\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n```\n\n## 特殊样式\n\n### 监听切换事件\n\n通过监听 `change` 事件，可以获取选中标签的值。\n\n```html\n<wd-tabbar v-model=\"tabbar\" @change=\"handleChange\" active-color=\"#ee0a24\" inactive-color=\"#7d7e80\">\n <wd-tabbar-item title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item title=\"分类\" icon=\"cart\"></wd-tabbar-item>\n <wd-tabbar-item title=\"我的\" icon=\"user\"></wd-tabbar-item>\n <wd-tabbar-item title=\"相册\" icon=\"photo\"></wd-tabbar-item>\n <wd-tabbar-item title=\"客服\" icon=\"chat\"></wd-tabbar-item>\n</wd-tabbar>\n```\n\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n\nfunction handleChange({ value }: { value: string }) {\n show(`选中标签:${value}`)\n}\n```\n\n### 默认插槽\n\n可以通过 `wd-tabbar-item` 的默认插槽自定义中间按钮等特殊内容。\n\n```html\n<wd-tabbar v-model=\"tabbar\" safeAreaInsetBottom placeholder>\n <wd-tabbar-item title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item title=\"分类\" icon=\"store\"></wd-tabbar-item>\n <wd-tabbar-item>\n <view class=\"custom-raised-button\">\n <wd-icon name=\"plus\" size=\"32px\"></wd-icon>\n </view>\n </wd-tabbar-item>\n <wd-tabbar-item title=\"相册\" icon=\"image\"></wd-tabbar-item>\n <wd-tabbar-item title=\"客服\" icon=\"message\"></wd-tabbar-item>\n</wd-tabbar>\n```\n\n### 切换前拦截\n\n通过 `before-change` 可在切换前做同步或异步确认。\n\n```html\n<wd-tabbar v-model=\"tabbar\" :before-change=\"beforeChange\">\n <wd-tabbar-item title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item title=\"分类\" icon=\"store\"></wd-tabbar-item>\n</wd-tabbar>\n```\n\n```ts\nfunction beforeChange(value) {\n return Promise.resolve(true)\n}\n```\n\n### 固定底部\n\n通过设置 `fixed` 属性，可以将标签栏固定在底部；通过设置 `placeholder` 属性，可以在固定在底部时在标签位置生成一个等高的占位元素。\n\n```html\n<wd-tabbar fixed v-model=\"tabbar\" bordered safeAreaInsetBottom placeholder>\n <wd-tabbar-item :value=\"2\" is-dot title=\"首页\" icon=\"home\"></wd-tabbar-item>\n <wd-tabbar-item title=\"分类\" icon=\"cart\"></wd-tabbar-item>\n <wd-tabbar-item title=\"我的\" icon=\"user\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"200\" title=\"相册\" icon=\"photo\"></wd-tabbar-item>\n <wd-tabbar-item :value=\"10\" title=\"客服\" icon=\"chat\"></wd-tabbar-item>\n</wd-tabbar>\n```\n```ts\nimport { ref } from 'vue'\n\nconst tabbar = ref(1)\n```\n\n\n\n## Tabbar Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value / v-model | 选中标签的索引值或者名称 | `number \\| string` | `0` |\n| fixed | 是否固定在底部 | `boolean` | `false` |\n| bordered | 是否显示顶部边框 | `boolean` | `false` |\n| safe-area-inset-bottom | 是否设置底部安全区 | `boolean` | `false` |\n| shape | 标签栏形状，可选值为 `default`、`round` | `TabbarShape` | `'default'` |\n| active-color | 激活标签颜色 | `string` | - |\n| inactive-color | 未激活标签颜色 | `string` | - |\n| placeholder | 固定在底部时，是否生成等高占位元素 | `boolean` | `false` |\n| z-index | 组件层级 | `number` | `10` |\n| before-change | 切换前的回调函数，返回 `false` 可阻止切换，支持返回 `Promise<boolean>` | `TabbarBeforeChange` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 标签切换时触发 | `{ value }` |\n\n## Tabbar Slots\n\n| name | 说明 |\n| --- | --- |\n| default | TabbarItem 列表 |\n\n## Tabbar 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点样式 |\n\n## TabbarItem Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 标签页标题 | `string` | - |\n| name | 唯一标识符，不传时默认使用索引值 | `string \\| number` | - |\n| icon | 图标名称 | `string` | - |\n| value | 徽标显示值 | `number \\| string` | - |\n| is-dot | 是否显示点状徽标 | `boolean` | `false` |\n| max | 徽标最大值 | `number` | `99` |\n| badge-props | 自定义徽标属性，会透传给 Badge 组件 | `BadgeProps` | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## TabbarItem Slots\n\n| name | 说明 | 参数 |\n| --- | --- | --- |\n| default | 自定义整个标签项内容 | - |\n| icon | 自定义图标 | `{ active }` |\n",
|
|
16476
16497
|
"props": [
|
|
16477
16498
|
{
|
|
@@ -16583,7 +16604,7 @@
|
|
|
16583
16604
|
},
|
|
16584
16605
|
{
|
|
16585
16606
|
"name": "--wot-tabbar-round-radius",
|
|
16586
|
-
"defaultValue": "$radius-
|
|
16607
|
+
"defaultValue": "$radius-full",
|
|
16587
16608
|
"description": "round 变体圆角"
|
|
16588
16609
|
}
|
|
16589
16610
|
],
|
|
@@ -16657,7 +16678,7 @@
|
|
|
16657
16678
|
"category": "未分类",
|
|
16658
16679
|
"description": "用于展示多条结构类似的数据，支持固定列、排序、合并单元格与虚拟滚动等能力。",
|
|
16659
16680
|
"descriptionZh": "用于展示多条结构类似的数据，支持固定列、排序、合并单元格与虚拟滚动等能力。",
|
|
16660
|
-
"since": "2.0.
|
|
16681
|
+
"since": "2.0.4",
|
|
16661
16682
|
"doc": "# Table 表格\n\n用于展示多条结构类似的数据，支持固定列、排序、合并单元格与虚拟滚动等能力。\n\n## 组件类型\n\n### 基本用法\n\n通过 `data` 传入表格数据，通过多个 `wd-table-column` 定义列结构。`sort-method` 事件在点击可排序列表头时触发，`row-click` 事件在点击行时触发。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"dataList\" :height=\"400\" @sort-method=\"handleSort\" @row-click=\"handleRowClick\">\n <wd-table-column prop=\"name\" label=\"姓名\" align=\"center\" width=\"50%\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\" width=\"50%\"></wd-table-column>\n</wd-table>\n```\n\n```ts [script]\nimport type { TableColumn } from '@/uni_modules/wot-ui/components/wd-table-column/types'\nimport { ref } from 'vue'\n\ninterface TableData {\n name: string\n school: string\n major: string\n gender: string\n graduation: string\n grade: number\n compare: string\n hobby: string\n}\n\nconst dataList = ref<TableData[]>([\n {\n name: '关羽',\n school: '武汉市阳逻绿豆学院',\n major: '计算机科学与技术专业',\n gender: '男',\n graduation: '2022年1月12日',\n grade: 66,\n compare: '48%',\n hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'\n },\n {\n name: '刘备',\n school: '武汉市阳逻编织学院',\n major: '计算机科学与技术专业',\n gender: '男',\n graduation: '2022年1月12日',\n grade: 68,\n compare: '21%',\n hobby: '我得孔明，如鱼得水也'\n }\n])\n\nfunction handleSort(column: TableColumn) {\n dataList.value = dataList.value.reverse()\n}\n\nfunction handleRowClick({ rowIndex }: { rowIndex: number }) {\n console.log(rowIndex)\n}\n```\n\n:::\n\n### 固定列\n\n通过 `wd-table-column` 的 `fixed` 属性固定列。固定列仅支持固定在左侧，**固定列的书写顺序需要与最终展示顺序一致**。\n\n```html\n<wd-table :data=\"dataList\" :height=\"400\" @sort-method=\"handleSort\" @row-click=\"handleRowClick\">\n <wd-table-column prop=\"name\" label=\"姓名\" fixed sortable align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" fixed sortable align=\"center\"></wd-table-column>\n <wd-table-column prop=\"hobby\" label=\"一言一笔之\" sortable :width=\"160\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\" :width=\"180\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n <wd-table-column prop=\"gender\" label=\"性别\"></wd-table-column>\n</wd-table>\n```\n\n### 显示索引\n\n通过 `index` 开启序号列。传入对象时，可配置索引列的宽度、对齐方式等属性（`prop` 除外的所有 `TableColumn` 属性）。\n\n```html\n<wd-table :data=\"dataList\" :height=\"400\" :index=\"{ align: 'center' }\" @sort-method=\"handleSort\">\n <wd-table-column prop=\"name\" label=\"姓名\" sortable align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" sortable align=\"center\"></wd-table-column>\n <wd-table-column prop=\"hobby\" label=\"一言一笔之\" sortable :width=\"160\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\" :width=\"180\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n <wd-table-column prop=\"gender\" label=\"性别\"></wd-table-column>\n</wd-table>\n```\n\n### 自定义列模板\n\n`wd-table-column` 提供 `value` 作用域插槽，插槽参数为 `{ row, index }`，可拿到当前行数据与行索引，自定义单元格内容。\n\n```html\n<wd-table :data=\"dataList\" :height=\"400\" @sort-method=\"handleSort\" @row-click=\"handleRowClick\">\n <wd-table-column prop=\"name\" label=\"姓名\" fixed sortable align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" fixed sortable align=\"center\">\n <template #value=\"{ row }\">\n <view>\n <text>{{ row.grade }}</text>\n <text>同比{{ row.compare }}</text>\n </view>\n </template>\n </wd-table-column>\n <wd-table-column prop=\"hobby\" label=\"一言一笔之\" sortable :width=\"160\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\" :width=\"180\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n <wd-table-column prop=\"gender\" label=\"性别\"></wd-table-column>\n <wd-table-column prop=\"graduation\" label=\"学成时间\"></wd-table-column>\n</wd-table>\n```\n\n### 合并单元格\n\n通过 `span-method` 控制单元格跨行跨列。回调接收 `{ row, column, rowIndex, columnIndex }` 四个参数，返回 `{ rowspan, colspan }` 或 `void`（等同 `{ rowspan: 1, colspan: 1 }`）。`rowspan`/`colspan` 为 `0` 表示该单元格被合并隐藏。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"spanData\" :span-method=\"handleSpan\" :height=\"400\">\n <wd-table-column prop=\"name\" label=\"姓名\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n</wd-table>\n```\n\n```ts [script]\nimport type { SpanMethodParams } from '@/uni_modules/wot-ui/components/wd-table/types'\nimport { computed } from 'vue'\n\nconst spanData = computed(() => dataList.value.slice(0, 5))\n\nfunction handleSpan({ rowIndex, columnIndex }: SpanMethodParams) {\n if (rowIndex === 0 && columnIndex === 0) {\n return { rowspan: 1, colspan: 2 }\n }\n if (rowIndex === 0 && columnIndex === 1) {\n return { rowspan: 0, colspan: 0 }\n }\n if (rowIndex === 2 && columnIndex === 0) {\n return { rowspan: 2, colspan: 1 }\n }\n if (rowIndex === 3 && columnIndex === 0) {\n return { rowspan: 0, colspan: 0 }\n }\n}\n```\n\n:::\n\n### 合并自定义列\n\n`span-method` 可以与 `value` 插槽组合使用，对自定义渲染的列同样生效。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"spanData\" :span-method=\"handleCustomSpan\" :height=\"400\">\n <wd-table-column prop=\"name\" label=\"姓名\" fixed sortable align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\">\n <template #value=\"{ row }\">\n <view>\n <text>{{ row.grade }}</text>\n <text>同比{{ row.compare }}</text>\n </view>\n </template>\n </wd-table-column>\n <wd-table-column prop=\"hobby\" label=\"一言一笔之\" :width=\"160\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\" :width=\"180\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n</wd-table>\n```\n\n```ts [script]\nfunction handleCustomSpan({ rowIndex, columnIndex }: SpanMethodParams) {\n if (rowIndex === 0 && columnIndex === 0) {\n return { rowspan: 2, colspan: 1 }\n }\n if (rowIndex === 1 && columnIndex === 0) {\n return { rowspan: 0, colspan: 0 }\n }\n if (rowIndex === 3 && columnIndex === 2) {\n return { rowspan: 1, colspan: 2 }\n }\n if (rowIndex === 3 && columnIndex === 3) {\n return { rowspan: 0, colspan: 0 }\n }\n}\n```\n\n:::\n\n### 固定列合并\n\n固定列场景下同样支持单元格合并，`span-method` 与 `fixed` 可同时使用。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"spanData\" :span-method=\"handleFixedSpan\" :height=\"400\">\n <wd-table-column prop=\"name\" label=\"姓名\" fixed align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"hobby\" label=\"一言一笔之\" :width=\"160\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\" :width=\"180\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n <wd-table-column prop=\"gender\" label=\"性别\"></wd-table-column>\n</wd-table>\n```\n\n```ts [script]\nfunction handleFixedSpan({ rowIndex, columnIndex }: SpanMethodParams) {\n if (rowIndex === 1 && columnIndex === 1) {\n return { rowspan: 2, colspan: 1 }\n }\n if (rowIndex === 2 && columnIndex === 1) {\n return { rowspan: 0, colspan: 0 }\n }\n if (rowIndex === 3 && columnIndex === 3) {\n return { rowspan: 1, colspan: 2 }\n }\n if (rowIndex === 3 && columnIndex === 4) {\n return { rowspan: 0, colspan: 0 }\n }\n}\n```\n\n:::\n\n### 固定表头合并\n\n设置 `height` 后表头默认固定（`fixed-header` 默认为 `true`），此时仍可通过 `span-method` 合并表体单元格。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"dataList\" :span-method=\"handleHeaderSpan\" :height=\"300\">\n <wd-table-column prop=\"name\" label=\"姓名\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n</wd-table>\n```\n\n```ts [script]\nfunction handleHeaderSpan({ rowIndex, columnIndex }: SpanMethodParams) {\n if (rowIndex === 0 && columnIndex === 2) {\n return { rowspan: 2, colspan: 1 }\n }\n if (rowIndex === 1 && columnIndex === 2) {\n return { rowspan: 0, colspan: 0 }\n }\n if (rowIndex === 4 && columnIndex === 3) {\n return { rowspan: 2, colspan: 1 }\n }\n if (rowIndex === 5 && columnIndex === 3) {\n return { rowspan: 0, colspan: 0 }\n }\n}\n```\n\n:::\n\n### 虚拟滚动\n\n大数据量场景可开启 `virtual`，通过 `row-height` 指定固定行高（必填），`buffer` 控制可视区域上下额外预渲染行数。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"virtualData\" :height=\"400\" virtual :row-height=\"50\">\n <wd-table-column prop=\"index\" label=\"序号\" width=\"80\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"name\" label=\"姓名\" width=\"120\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"score\" label=\"分数\" width=\"100\" align=\"center\"></wd-table-column>\n <wd-table-column prop=\"remark\" label=\"备注\" width=\"200\"></wd-table-column>\n</wd-table>\n```\n\n```ts [script]\nconst virtualData = Array.from({ length: 10000 }, (_, index) => ({\n index: index + 1,\n name: `蜀兵${index + 1}号`,\n score: Math.floor(Math.random() * 100),\n remark: `这是蜀兵${index + 1}号的备注信息`\n}))\n```\n\n:::\n\n## 组件状态\n\n### 无边框\n\n设置 `border` 为 `false` 可隐藏单元格边框。\n\n```html\n<wd-table :data=\"dataList\" :height=\"400\" :border=\"false\">\n <wd-table-column prop=\"name\" label=\"姓名\" align=\"center\" width=\"50%\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\" width=\"50%\"></wd-table-column>\n</wd-table>\n```\n\n### 无斑马纹\n\n设置 `stripe` 为 `false` 可关闭奇偶行区分背景。\n\n```html\n<wd-table :data=\"dataList\" :height=\"400\" :stripe=\"false\">\n <wd-table-column prop=\"name\" label=\"姓名\" align=\"center\" width=\"50%\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\" width=\"50%\"></wd-table-column>\n</wd-table>\n```\n\n### 不显示表头\n\n设置 `show-header` 为 `false` 可隐藏表头区域。\n\n```html\n<wd-table :data=\"dataList\" :height=\"400\" :show-header=\"false\">\n <wd-table-column prop=\"name\" label=\"姓名\" align=\"center\" width=\"50%\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" align=\"center\" width=\"50%\"></wd-table-column>\n</wd-table>\n```\n\n## 特殊样式\n\n### 不固定表头结合分页器\n\n将 `fixed-header` 设为 `false` 后，表头随表体一起滚动，可将表格与分页器组合展示。\n\n::: code-group\n\n```html [template]\n<wd-table :data=\"paginationData\" :fixed-header=\"false\">\n <wd-table-column prop=\"name\" label=\"姓名\" fixed align=\"center\"></wd-table-column>\n <wd-table-column prop=\"grade\" label=\"分数\" fixed align=\"center\"></wd-table-column>\n <wd-table-column prop=\"hobby\" label=\"一言一笔之\" :width=\"160\"></wd-table-column>\n <wd-table-column prop=\"school\" label=\"求学之所\" :width=\"180\"></wd-table-column>\n <wd-table-column prop=\"major\" label=\"专业\"></wd-table-column>\n <wd-table-column prop=\"gender\" label=\"性别\"></wd-table-column>\n</wd-table>\n<wd-pagination v-model=\"page\" :total=\"total\"></wd-pagination>\n```\n\n```ts [script]\nimport { computed, ref } from 'vue'\n\nconst page = ref(1)\nconst pageSize = ref(10)\nconst total = ref(dataList.value.length)\n\nconst paginationData = computed(() => {\n return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)\n})\n```\n\n:::\n\n## Table Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| data | 表格数据源（必填） | <code>Record<string, any>[]</code> | - |\n| border | 是否显示边框 | `boolean` | `true` |\n| stripe | 是否显示斑马纹 | `boolean` | `true` |\n| height | 表格最大高度，设置后可纵向滚动；开启虚拟滚动时必须传入数值类型 | <code>string | number</code> | - |\n| show-header | 是否显示表头 | `boolean` | `true` |\n| ellipsis | 单元格文本是否超出两行后省略 | `boolean` | `false` |\n| index | 是否显示索引列，传入对象时可自定义索引列配置（`prop` 除外） | <code>boolean | Omit<Partial<TableColumnProps>, 'prop'></code> | `false` |\n| fixed-header | 是否固定表头（使用 CSS sticky 定位） | `boolean` | `true` |\n| span-method | 合并单元格方法，回调参数为 `SpanMethodParams`，返回 `{ rowspan, colspan }` 或 `void`（等同 `{ rowspan: 1, colspan: 1 }`） | `SpanMethod` | - |\n| virtual | 是否开启虚拟滚动，大数据量时只渲染可视区域行 | `boolean` | `false` |\n| row-height | 虚拟滚动固定行高，开启 `virtual` 时必须传入 | `number` | `44` |\n| buffer | 虚拟滚动可视区域上下各额外预渲染行数 | `number` | `5` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Table Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| sort-method | 点击可排序列表头后触发 | `column: TableColumn` |\n| row-click | 点击表格行时触发 | `{ rowIndex: number }` |\n\n## Table Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 表格列内容，通常放置一个或多个 `wd-table-column` |\n\n## TableColumn Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| prop | 列对应的数据字段名（必填） | `string` | - |\n| label | 列标题（必填） | `string` | - |\n| width | 列宽度 | <code>string | number</code> | `100` |\n| sortable | 是否开启排序 | `boolean` | `false` |\n| fixed | 是否固定当前列，仅支持固定在左侧 | `boolean` | `false` |\n| align | 内容对齐方式，可选值为 `left`、`center`、`right` | `AlignType` | `left` |\n\n## TableColumn Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| value | 自定义单元格内容，插槽参数为 `{ row: Record<string, any>, index: number }` |\n\n## 类型定义\n\n```ts\nimport type { SpanMethodParams, SpanMethodResult, SpanMethod } from '@/uni_modules/wot-ui/components/wd-table/types'\nimport type { TableColumn, AlignType } from '@/uni_modules/wot-ui/components/wd-table-column/types'\n\n/** span-method 回调参数 */\ninterface SpanMethodParams {\n /** 当前行的数据对象 */\n row: Record<string, any>\n /** 当前列的配置 */\n column: { prop: string; label: string }\n /** 当前行索引，从 0 开始 */\n rowIndex: number\n /** 当前列索引，从 0 开始 */\n columnIndex: number\n}\n\n/** span-method 返回值 */\ninterface SpanMethodResult {\n /** 合并行数，0 表示该单元格被隐藏，大于 1 表示向下合并 N 行 */\n rowspan: number\n /** 合并列数，0 表示该单元格被隐藏，大于 1 表示向右合并 N 列 */\n colspan: number\n}\n\ntype SpanMethod = (params: SpanMethodParams) => SpanMethodResult | void\n```\n",
|
|
16662
16683
|
"props": [
|
|
16663
16684
|
{
|
|
@@ -16796,7 +16817,7 @@
|
|
|
16796
16817
|
},
|
|
16797
16818
|
{
|
|
16798
16819
|
"name": "--wot-table-cell-line-height",
|
|
16799
|
-
"defaultValue": "$typography-body-line
|
|
16820
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
16800
16821
|
"description": "单元格行高"
|
|
16801
16822
|
},
|
|
16802
16823
|
{
|
|
@@ -16861,7 +16882,7 @@
|
|
|
16861
16882
|
"category": "未分类",
|
|
16862
16883
|
"description": "用于标记状态或者概括主要内容。",
|
|
16863
16884
|
"descriptionZh": "用于标记状态或者概括主要内容。",
|
|
16864
|
-
"since": "2.0.
|
|
16885
|
+
"since": "2.0.4",
|
|
16865
16886
|
"doc": "# Tag 标签\n\n用于标记状态或者概括主要内容。\n\n## 组件类型\n\n### 基本用法\n\n通过 `type` 设置不同标签类型。\n\n```html\n<wd-tag>标签</wd-tag>\n<wd-tag type=\"primary\">常用标签</wd-tag>\n<wd-tag type=\"danger\">危险标签</wd-tag>\n<wd-tag type=\"warning\">警告标签</wd-tag>\n<wd-tag type=\"success\">成功标签</wd-tag>\n```\n\n## 组件变体\n\n### 标签尺寸\n\n通过 `size` 设置标签尺寸，支持 `small`、`medium`、`default`、`large`、`extra-large`。\n\n```html\n<wd-tag type=\"primary\" size=\"small\">小标签</wd-tag>\n<wd-tag type=\"primary\" size=\"medium\">中标签</wd-tag>\n<wd-tag type=\"primary\">默认标签</wd-tag>\n<wd-tag type=\"primary\" size=\"large\">较大标签</wd-tag>\n<wd-tag type=\"primary\" size=\"extra-large\">特大标签</wd-tag>\n```\n\n### 浅色标签\n\n设置 `variant=\"light\"` 展示浅色标签。\n\n```html\n<wd-tag variant=\"light\">标签</wd-tag>\n<wd-tag type=\"primary\" variant=\"light\">常用标签</wd-tag>\n<wd-tag type=\"danger\" variant=\"light\">危险标签</wd-tag>\n```\n\n### 镂空标签\n\n设置 `variant=\"plain\"` 展示镂空样式。\n\n```html\n<wd-tag variant=\"plain\">标签</wd-tag>\n<wd-tag type=\"primary\" variant=\"plain\">常用标签</wd-tag>\n```\n\n### 虚线标签\n\n设置 `variant=\"dashed\"` 展示虚线边框。\n\n```html\n<wd-tag variant=\"dashed\">标签</wd-tag>\n<wd-tag type=\"warning\" variant=\"dashed\">警告标签</wd-tag>\n```\n\n### 纯文本标签\n\n设置 `variant=\"text\"` 展示纯文本样式。\n\n```html\n<wd-tag variant=\"text\">标签</wd-tag>\n<wd-tag type=\"success\" variant=\"text\">成功标签</wd-tag>\n```\n\n## 组件样式\n\n### 标记标签\n\n设置 `mark` 生成标记样式。\n\n```html\n<wd-tag mark>标签</wd-tag>\n<wd-tag type=\"primary\" mark>常用标签</wd-tag>\n```\n\n### 幽灵标记标签\n\n组合 `mark` 和 `variant=\"plain\"` 展示幽灵标记样式。\n\n```html\n<wd-tag mark variant=\"plain\">标签</wd-tag>\n<wd-tag type=\"success\" mark variant=\"plain\">成功标签</wd-tag>\n```\n\n### 圆角标签\n\n设置 `round` 生成圆角样式。\n\n```html\n<wd-tag round>标签</wd-tag>\n<wd-tag type=\"primary\" round>常用标签</wd-tag>\n```\n\n### 设置图标\n\n可通过 `icon` 属性或 `icon` 插槽自定义左侧图标。\n\n```html\n<wd-tag icon=\"clock-circle\" type=\"primary\" mark>标签</wd-tag>\n\n<wd-tag type=\"primary\" mark>\n <text>插槽</text>\n <template #icon>\n <wd-icon name=\"thunderbolt\" />\n </template>\n</wd-tag>\n```\n\n### 自定义颜色\n\n通过 `color` 设置文字颜色，通过 `bg-color` 设置背景色和边框色。\n\n```html\n<wd-tag color=\"#0083ff\" bg-color=\"#d0e8ff\">标签</wd-tag>\n<wd-tag color=\"#FAA21E\" bg-color=\"#FAA21E\" variant=\"plain\">标签</wd-tag>\n```\n\n## 特殊样式\n\n### 可关闭\n\n设置 `closable` 后，点击关闭按钮会触发 `close` 事件。\n\n```html\n<wd-tag v-for=\"(tag, index) in closableStrongTags\" :key=\"index\" :type=\"tag.type\" closable @close=\"handleCloseStrongTag(index)\">\n {{ tag.value }}\n</wd-tag>\n```\n\n```ts\nconst closableStrongTags = ref([\n { type: 'default', value: '标签' },\n { type: 'primary', value: '常用' }\n])\n\nfunction handleCloseStrongTag(order: number) {\n closableStrongTags.value = closableStrongTags.value.filter((_, index) => index !== order)\n}\n```\n\n### 新增标签\n\n设置 `dynamic` 生成新增标签样式，输入确认后触发 `confirm` 事件；可通过 `add` 插槽自定义新增按钮内容。\n\n::: code-group\n\n```html [vue]\n<wd-tag v-for=\"(tag, index) in dynamicTags\" :key=\"index\" type=\"primary\" closable @close=\"handleClose1(index)\">\n {{ tag }}\n</wd-tag>\n<wd-tag type=\"primary\" dynamic @confirm=\"handleConfirm\"></wd-tag>\n<wd-tag type=\"primary\" dynamic @confirm=\"handleConfirm\">\n <template #add>\n <wd-icon name=\"pushpin\" size=\"12px\"></wd-icon>\n <text style=\"margin-left: 4px\">自定义</text>\n </template>\n</wd-tag>\n```\n\n```ts [ts]\nconst dynamicTags = ref(['标签一', '标签二'])\n\nfunction handleClose1(order: number) {\n dynamicTags.value = dynamicTags.value.filter((item, index) => index !== order)\n}\n\nfunction handleConfirm({ value }: { value: string }) {\n if (!value) return\n dynamicTags.value = [...dynamicTags.value, value]\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| size | 标签尺寸，可选值为 `small`、`medium`、`large`、`extra-large`、`default` | `TagSize` | `default` |\n| type | 标签类型，可选值为 `default`、`primary`、`success`、`warning`、`danger`、`volcano`、`lightblue`、`cyan`、`pink`、`purple` | `TagType` | `default` |\n| icon | 左侧图标 | `string` | `''` |\n| closable | 是否可关闭 | `boolean` | `false` |\n| dynamic | 是否为新增标签 | `boolean` | `false` |\n| color | 文字颜色 | `string` | `''` |\n| bg-color | 背景色和边框色 | `string` | `''` |\n| round | 是否圆角 | `boolean` | `false` |\n| mark | 是否标记样式 | `boolean` | `false` |\n| variant | 标签变体，可选值为 `light`、`dark`、`plain`、`dashed`、`text` | `TagVariant` | `dark` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击标签时触发 | `MouseEvent` |\n| close | 点击关闭按钮时触发 | `MouseEvent` |\n| confirm | 新增标签输入确认后触发 | `{ value: string }` |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 标签内容 |\n| icon | 自定义图标 |\n| add | 自定义新增标签内容，`dynamic` 为 `true` 时生效 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点内联样式 |",
|
|
16866
16887
|
"props": [
|
|
16867
16888
|
{
|
|
@@ -16986,7 +17007,7 @@
|
|
|
16986
17007
|
},
|
|
16987
17008
|
{
|
|
16988
17009
|
"name": "--wot-tag-round-radius",
|
|
16989
|
-
"defaultValue": "$radius-
|
|
17010
|
+
"defaultValue": "$radius-full",
|
|
16990
17011
|
"description": "圆角标签圆角"
|
|
16991
17012
|
},
|
|
16992
17013
|
{
|
|
@@ -17161,7 +17182,7 @@
|
|
|
17161
17182
|
},
|
|
17162
17183
|
{
|
|
17163
17184
|
"name": "--wot-tag-small-line-height",
|
|
17164
|
-
"defaultValue": "$typography-label-line
|
|
17185
|
+
"defaultValue": "$typography-label-line-height-size-small",
|
|
17165
17186
|
"description": "小尺寸行高"
|
|
17166
17187
|
},
|
|
17167
17188
|
{
|
|
@@ -17186,7 +17207,7 @@
|
|
|
17186
17207
|
},
|
|
17187
17208
|
{
|
|
17188
17209
|
"name": "--wot-tag-medium-line-height",
|
|
17189
|
-
"defaultValue": "$typography-label-line
|
|
17210
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
17190
17211
|
"description": "中尺寸行高"
|
|
17191
17212
|
},
|
|
17192
17213
|
{
|
|
@@ -17211,7 +17232,7 @@
|
|
|
17211
17232
|
},
|
|
17212
17233
|
{
|
|
17213
17234
|
"name": "--wot-tag-default-line-height",
|
|
17214
|
-
"defaultValue": "$typography-label-line
|
|
17235
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
17215
17236
|
"description": "默认尺寸行高"
|
|
17216
17237
|
},
|
|
17217
17238
|
{
|
|
@@ -17236,7 +17257,7 @@
|
|
|
17236
17257
|
},
|
|
17237
17258
|
{
|
|
17238
17259
|
"name": "--wot-tag-large-line-height",
|
|
17239
|
-
"defaultValue": "$typography-label-line
|
|
17260
|
+
"defaultValue": "$typography-label-line-height-size-large",
|
|
17240
17261
|
"description": "大尺寸行高"
|
|
17241
17262
|
},
|
|
17242
17263
|
{
|
|
@@ -17261,7 +17282,7 @@
|
|
|
17261
17282
|
},
|
|
17262
17283
|
{
|
|
17263
17284
|
"name": "--wot-tag-extra-large-line-height",
|
|
17264
|
-
"defaultValue": "$typography-body-line
|
|
17285
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
17265
17286
|
"description": "超大尺寸行高"
|
|
17266
17287
|
},
|
|
17267
17288
|
{
|
|
@@ -17362,7 +17383,7 @@
|
|
|
17362
17383
|
"category": "未分类",
|
|
17363
17384
|
"description": "文本组件，用于展示文本信息。",
|
|
17364
17385
|
"descriptionZh": "文本组件，用于展示文本信息。",
|
|
17365
|
-
"since": "2.0.
|
|
17386
|
+
"since": "2.0.4",
|
|
17366
17387
|
"doc": "# Text 文本\n\n文本组件，用于展示文本信息。\n\n## 组件类型\n\n### 基本用法\n\n通过 `text` 传入文本内容。\n\n```html\n<wd-text :text=\"text\"></wd-text>\n```\n\n```ts\nconst text = ref('芦叶满汀洲，寒沙带浅流。二十年重过南楼。')\n```\n\n### 设置主题\n\n通过 `type` 设置主题色，支持 `primary`、`error`、`success`、`warning`、`default`。\n\n```html\n<wd-text type=\"primary\" text=\"主色\"></wd-text>\n<wd-text type=\"error\" text=\"错误\"></wd-text>\n<wd-text type=\"success\" text=\"成功\"></wd-text>\n<wd-text type=\"warning\" text=\"警告\"></wd-text>\n<wd-text text=\"默认\"></wd-text>\n```\n\n### 模式\n\n通过 `mode` 对文本做格式化处理，支持 `text`、`date`、`phone`、`name`、`price`。\n\n```html\n<wd-text text=\"18888888888\" mode=\"phone\"></wd-text>\n<wd-text text=\"王三\" mode=\"name\"></wd-text>\n<wd-text text=\"1719976636911\" mode=\"date\"></wd-text>\n```\n\n### 金额\n\n设置 `mode=\"price\"` 可以展示金额格式化文本。\n\n```html\n<wd-text text=\"16354.156\" mode=\"price\" type=\"success\" decoration=\"line-through\" prefix=\"￥\" />\n```\n\n## 组件样式\n\n### 自定义字体颜色\n\n通过 `color` 设置文字颜色。\n\n```html\n<wd-text :text=\"text\" color=\"#36B8C2\"></wd-text>\n```\n\n### 是否粗体\n\n设置 `bold` 开启粗体。\n\n```html\n<wd-text :text=\"text\" bold></wd-text>\n```\n\n### 字体大小\n\n通过 `size` 设置字体大小。\n\n```html\n<wd-text :text=\"text\" size=\"16px\"></wd-text>\n```\n\n### lines\n\n设置 `lines` 限制显示行数，超出后显示省略号。\n\n```html\n<wd-text :text=\"text\" :lines=\"2\" size=\"16px\"></wd-text>\n```\n\n### lineHeight\n\n通过 `lineHeight` 设置行高。\n\n```html\n<wd-text :text=\"text\" :lines=\"2\" lineHeight=\"20px\"></wd-text>\n```\n\n### 文字装饰\n\n通过 `decoration` 设置文字装饰线。\n\n```html\n<wd-text :text=\"text\" type=\"warning\" decoration=\"underline\" />\n```\n\n## 特殊样式\n\n### 脱敏\n\n设置 `format` 后，在 `mode` 为 `phone` 或 `name` 时会进行脱敏展示。\n\n```html\n<wd-text text=\"张长三\" mode=\"name\" :format=\"true\"></wd-text>\n<wd-text text=\"18888888888\" mode=\"phone\" :format=\"true\"></wd-text>\n```\n\n### 前后插槽\n\n通过 `prefix`、`suffix` 属性或同名插槽扩展前后内容。\n\n```html\n<wd-text text=\"12345678901\" mode=\"phone\" format type=\"primary\" prefix=\"Prefix\" suffix=\"Suffix\" />\n\n<wd-text text=\"12345678901\" mode=\"phone\" format type=\"primary\">\n <template #prefix>\n <text>Prefix</text>\n </template>\n <template #suffix>Suffix</template>\n</wd-text>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 主题类型，可选值为 `default`、`primary`、`success`、`warning`、`error` | `TextType` | `default` |\n| text | 文本内容 | `string | number` | `''` |\n| size | 字体大小 | `string` | `''` |\n| mode | 文本处理模式，可选值为 `text`、`date`、`phone`、`name`、`price` | `TextMode` | `text` |\n| decoration | 文本装饰，可选值为 `none`、`underline`、`line-through`、`overline` | `TextDecoration` | `none` |\n| call | `mode=\"phone\"` 时点击文本是否拨号 | `boolean` | `false` |\n| bold | 是否粗体 | `boolean` | `false` |\n| format | 是否脱敏，仅在 `mode` 为 `phone` 和 `name` 时生效 | `boolean` | `false` |\n| color | 文本颜色 | `string` | `''` |\n| prefix | 前缀内容 | `string` | - |\n| suffix | 后缀内容 | `string` | - |\n| lines | 展示行数，超出后显示省略号 | `number` | - |\n| line-height | 文本行高 | `string` | `''` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| click | 点击文本时触发 | `Event` |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| prefix | 前缀内容 |\n| suffix | 后缀内容 |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-style | 根节点内联样式 |",
|
|
17367
17388
|
"props": [
|
|
17368
17389
|
{
|
|
@@ -17481,7 +17502,7 @@
|
|
|
17481
17502
|
},
|
|
17482
17503
|
{
|
|
17483
17504
|
"name": "--wot-text-line-height",
|
|
17484
|
-
"defaultValue": "$typography-body-line
|
|
17505
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
17485
17506
|
"description": "默认文字行高"
|
|
17486
17507
|
},
|
|
17487
17508
|
{
|
|
@@ -17592,7 +17613,7 @@
|
|
|
17592
17613
|
"category": "未分类",
|
|
17593
17614
|
"description": "用于输入多行文本信息，支持清空、字数统计、高度自适应与紧凑布局。",
|
|
17594
17615
|
"descriptionZh": "用于输入多行文本信息，支持清空、字数统计、高度自适应与紧凑布局。",
|
|
17595
|
-
"since": "2.0.
|
|
17616
|
+
"since": "2.0.4",
|
|
17596
17617
|
"doc": "# Textarea 文本域\n\n用于输入多行文本信息，支持清空、字数统计、高度自适应与紧凑布局。\n\n## 组件类型\n\n### 基本用法\n\n通过 `v-model` 绑定文本域内容，通过 `placeholder` 设置占位提示。\n\n```html\n<wd-textarea v-model=\"value\" placeholder=\"请填写评价\" />\n```\n\n```typescript\nimport { ref } from 'vue'\n\nconst value = ref('')\n```\n\n## 组件状态\n\n### 只读\n\n通过 `readonly` 设置文本域为只读状态。\n\n```html\n<wd-textarea v-model=\"value\" readonly clearable />\n```\n\n### 禁用\n\n通过 `disabled` 禁用文本域。\n\n```html\n<wd-textarea v-model=\"value\" disabled clearable />\n```\n\n## 组件变体\n\n### 清空按钮与字数限制\n\n通过 `clearable` 开启清空按钮，通过 `maxlength` 与 `show-word-limit` 展示字数统计。\n\n```html\n<wd-textarea v-model=\"value\" :maxlength=\"120\" clearable show-word-limit />\n```\n\n### 聚焦时显示清空按钮\n\n通过 `clear-trigger=\"focus\"` 控制仅在聚焦且有值时显示清空按钮。\n\n:::warning 注意\n支付宝小程序暂不支持 `clear-trigger`，且某些场景下清空按钮无法点击，可参考 [issue](https://github.com/ant-design/ant-design-mini/issues/1255)。\n:::\n\n```html\n<wd-textarea v-model=\"value\" clear-trigger=\"focus\" :maxlength=\"120\" clearable show-word-limit />\n```\n\n### 清空后不自动聚焦\n\n通过 `focus-when-clear` 控制点击清空按钮后是否自动聚焦。\n\n```html\n<wd-textarea v-model=\"value\" :focus-when-clear=\"false\" :maxlength=\"120\" clearable show-word-limit />\n```\n\n### 高度自适应\n\n通过 `auto-height` 让文本域高度随内容变化。\n\n```html\n<wd-textarea v-model=\"value\" auto-height clearable />\n```\n\n## 组件样式\n\n### 紧凑布局\n\n设置 `compact` 后会移除默认内边距和背景，适合与 `wd-form-item` 等容器配合使用。\n\n```html\n<wd-textarea v-model=\"value\" compact placeholder=\"请填写评价\" />\n```\n\n## 特殊样式\n\n### 结合表单使用\n\n当前表单场景推荐由 `wd-form` 与 `wd-form-item` 承载标题、必填态与校验提示，`wd-textarea` 仅负责多行输入能力。\n\n```html\n<wd-form :model=\"formData\" border title-width=\"98px\">\n <wd-form-item title=\"基本用法\" prop=\"basic\">\n <wd-textarea v-model=\"formData.basic\" placeholder=\"请输入\" compact />\n </wd-form-item>\n\n <wd-form-item title=\"字数限制\" prop=\"limit\">\n <wd-textarea v-model=\"formData.limit\" :maxlength=\"240\" show-word-limit clearable compact placeholder=\"请输入\" />\n </wd-form-item>\n\n <wd-form-item title=\"只读\" prop=\"readonly\">\n <wd-textarea v-model=\"formData.readonly\" readonly :maxlength=\"240\" show-word-limit placeholder=\"请输入\" compact />\n </wd-form-item>\n</wd-form>\n```\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | 文本域绑定值 | `string \\| number` | `''` |\n| placeholder | 占位文本 | `string` | `请输入...` |\n| placeholder-style | placeholder 样式 | `string` | - |\n| placeholder-class | placeholder 样式类 | `string` | `''` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| readonly | 是否只读 | `boolean` | `false` |\n| maxlength | 最大输入长度，设置为 `-1` 时不限制长度 | `number` | `-1` |\n| clearable | 是否显示清空按钮 | `boolean` | `false` |\n| show-word-limit | 是否显示字数统计，需要同时设置 `maxlength` | `boolean` | `false` |\n| clear-trigger | 清空按钮显示时机，可选值为 `focus`、`always` | `InputClearTrigger` | `always` |\n| focus-when-clear | 点击清空按钮后是否自动聚焦 | `boolean` | `true` |\n| error | 是否展示错误状态 | `boolean` | `false` |\n| focus | 是否获取焦点 | `boolean` | `false` |\n| auto-focus | 是否自动聚焦并拉起键盘 | `boolean` | `false` |\n| auto-height | 是否自动增高输入框高度 | `boolean` | `false` |\n| fixed | 在 `position: fixed` 区域时是否启用固定模式 | `boolean` | `false` |\n| cursor-spacing | 光标与键盘的距离 | `number` | `0` |\n| cursor | 获取焦点时的光标位置 | `number` | `-1` |\n| confirm-type | 键盘右下角按钮文字，可选值为 `done`、`go`、`next`、`search`、`send` | `ConfirmType` | - |\n| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起 | `boolean` | `false` |\n| show-confirm-bar | 是否显示键盘上方带有“完成”按钮的工具栏 | `boolean` | `true` |\n| selection-start | 光标起始位置，需与 `selection-end` 搭配使用 | `number` | `-1` |\n| selection-end | 光标结束位置，需与 `selection-start` 搭配使用 | `number` | `-1` |\n| adjust-position | 键盘弹起时是否自动上推页面 | `boolean` | `true` |\n| disable-default-padding | 是否去掉 iOS 下默认内边距 | `boolean` | `false` |\n| hold-keyboard | 聚焦时点击页面是否保持键盘不收起 | `boolean` | `false` |\n| ignore-composition-event | 是否忽略文本合成系统事件处理；为 `false` 时会触发 composition 相关事件，且在合成期间会触发 `input` | `boolean` | `true` |\n| inputmode | 输入模式提示，可选值为 `none`、`text`、`decimal`、`numeric`、`tel`、`search`、`email`、`url` | `InputMode` | `text` |\n| enable-native | 支付宝小程序下是否启用原生输入框，设为 `false` 可避免弹起键盘后内容上移 | `boolean` | `true` |\n| compact | 是否开启紧凑模式；未显式设置时，在 `wd-form-item` 中会自动启用 | `boolean` | - |\n| custom-textarea-class | textarea 自定义类名 | `string` | `''` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n### InputMode 可选值\n\n`inputmode` 为 HTML 规范后期扩展能力，在符合条件的高版本 WebView 中可用于 uni-app 的 Web 与 App-Vue 平台，详见 [inputmode](https://uniapp.dcloud.net.cn/component/input.html#inputmode)。\n\n| 值 | 说明 |\n| --- | --- |\n| none | 不弹出虚拟键盘 |\n| text | 标准文本输入键盘 |\n| decimal | 小数输入键盘 |\n| numeric | 纯数字输入键盘 |\n| tel | 电话输入键盘 |\n| search | 搜索输入优化键盘 |\n| email | 邮箱输入优化键盘 |\n| url | URL 输入优化键盘 |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| input | 输入时触发 | `{ value, cursor, keyCode }` |\n| focus | 聚焦时触发 | `{ value, height }` |\n| blur | 失焦时触发 | `{ value, cursor }` |\n| clear | 点击清空按钮时触发 | - |\n| linechange | 行数变化时触发 | `{ height, heightRpx, lineCount }` |\n| confirm | 点击键盘完成按钮时触发 | `{ value }` |\n| keyboardheightchange | 键盘高度变化时触发 | `{ height, duration }` |\n\n## 外部样式类\n\n| 类名 | 说明 |\n| --- | --- |\n| custom-class | 根节点样式类 |\n| custom-textarea-class | textarea 样式类 |\n",
|
|
17597
17618
|
"props": [
|
|
17598
17619
|
{
|
|
@@ -17855,7 +17876,7 @@
|
|
|
17855
17876
|
},
|
|
17856
17877
|
{
|
|
17857
17878
|
"name": "--wot-textarea-inner-line-height",
|
|
17858
|
-
"defaultValue": "$typography-body-line
|
|
17879
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
17859
17880
|
"description": "文本域行高"
|
|
17860
17881
|
},
|
|
17861
17882
|
{
|
|
@@ -17900,7 +17921,7 @@
|
|
|
17900
17921
|
},
|
|
17901
17922
|
{
|
|
17902
17923
|
"name": "--wot-textarea-count-line-height",
|
|
17903
|
-
"defaultValue": "$typography-body-line
|
|
17924
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
17904
17925
|
"description": "字数统计行高"
|
|
17905
17926
|
},
|
|
17906
17927
|
{
|
|
@@ -17973,8 +17994,8 @@
|
|
|
17973
17994
|
"category": "未分类",
|
|
17974
17995
|
"description": "轻提示组件，用于消息通知、加载提示和操作结果反馈，支持组件挂载点配合 `useToast()` 进行函数式调用。",
|
|
17975
17996
|
"descriptionZh": "轻提示组件，用于消息通知、加载提示和操作结果反馈，支持组件挂载点配合 `useToast()` 进行函数式调用。",
|
|
17976
|
-
"since": "2.0.
|
|
17977
|
-
"doc": "# Toast 轻提示\n\n轻提示组件，用于消息通知、加载提示和操作结果反馈，支持组件挂载点配合 `useToast()` 进行函数式调用。\n\n::: tip 提示\n`Toast` 自 `1.7.0` 起支持通过组件 `props` 控制默认样式。函数式调用时，传入的 `options` 优先级高于组件 `props`。\n\n全局调用方案可参考 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html)，适合在路由守卫或请求拦截器中使用。\n:::\n\n## 组件类型\n\n### 基本用法\n\n需要先在页面中放置一个 `wd-toast` 作为挂载点，再通过 `useToast()` 调用提示。\n\n::: code-group\n\n```html [vue]\n<wd-toast />\n<wd-button @click=\"showToast\">toast</wd-button>\n```\n\n```ts [ts]\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst toast = useToast()\n\nfunction showToast() {\n toast.show('提示信息')\n}\n```\n\n:::\n\n### 类型提示\n\n支持成功、错误、警告和常规四种快捷提示。\n\n```ts\ntoast.success('操作成功')\ntoast.error('手机验证码输入错误，请重新输入')\ntoast.warning('提示信息')\ntoast.info('常规提示信息')\n```\n\n## 组件状态\n\n### 加载提示\n\n`loading()` 默认不会自动关闭，适合等待异步请求完成后手动调用 `close()`。\n\n```ts\ntoast.loading('3s后自动关闭')\n\nsetTimeout(() => {\n toast.close()\n}, 3000)\n```\n\n### 加载类型\n\n通过 `loadingType` 可切换不同加载样式，支持 `circular`、`spinner`、`dots`。\n\n```ts\ntoast.loading({\n msg: '3s后自动关闭',\n loadingType: 'spinner',\n loadingColor: '#fff'\n})\n```\n\n## 组件样式\n\n### 使用图标\n\n可以通过 `iconClass` 使用组件库内置图标，也可以配合 `classPrefix` 使用自定义图标。\n\n::: code-group\n\n```ts [内置图标]\ntoast.show({\n iconClass: 'star',\n msg: '使用组件库内部图标'\n})\n```\n\n```ts [自定义图标]\ntoast.show({\n iconClass: 'kehuishouwu',\n classPrefix: 'fish',\n msg: '使用自定义图标'\n})\n```\n\n:::\n\n### 提示位置\n\n通过 `position` 调整提示出现位置，支持 `top`、`middle-top`、`middle`、`bottom`。\n\n```ts\ntoast.show({\n position: 'top',\n msg: '提示信息'\n})\n\ntoast.show({\n position: 'middle',\n msg: '提示信息'\n})\n\ntoast.show({\n position: 'bottom',\n msg: '提示信息'\n})\n```\n\n### 排版方向\n\n通过 `direction` 控制横向或纵向排版，常用于长文案或加载提示。\n\n```ts\ntoast.success({\n msg: '纵向排版',\n direction: 'vertical'\n})\n```\n\n## Toast Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 唯一挂载标识，多实例场景下用于区分不同 toast | `string` | `''` |\n| msg | 默认提示文案 | `string` | `''` |\n| direction | 默认排版方向，可选值为 `horizontal`、`vertical` | `ToastDirection` | `horizontal` |\n| icon-name | 默认图标类型，可选值为 `success`、`error`、`warning`、`loading`、`info` | `ToastIconType` | `''` |\n| icon-size | 默认图标大小 | `number` | - |\n| loading-type | 默认加载图标类型，可选值为 `circular`、`spinner`、`dots` | `ToastLoadingType` | `circular` |\n| loading-color | 默认加载图标颜色 | `string` | `#ffffff` |\n| loading-size | 默认加载图标大小 | `number` | - |\n| icon-color | 默认图标颜色 | `string` | - |\n| position | 默认提示位置，可选值为 `top`、`middle-top`、`middle`、`bottom` | `ToastPositionType` | `middle` |\n| z-index | 默认层级 | `number` | `100` |\n| cover | 是否显示透明遮罩层 | `boolean` | `false` |\n| icon-class | 默认图标类名 | `string` | `''` |\n| class-prefix |
|
|
17997
|
+
"since": "2.0.4",
|
|
17998
|
+
"doc": "# Toast 轻提示\n\n轻提示组件，用于消息通知、加载提示和操作结果反馈，支持组件挂载点配合 `useToast()` 进行函数式调用。\n\n::: tip 提示\n`Toast` 自 `1.7.0` 起支持通过组件 `props` 控制默认样式。函数式调用时，传入的 `options` 优先级高于组件 `props`。\n\n全局调用方案可参考 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html)，适合在路由守卫或请求拦截器中使用。\n:::\n\n## 组件类型\n\n### 基本用法\n\n需要先在页面中放置一个 `wd-toast` 作为挂载点，再通过 `useToast()` 调用提示。\n\n::: code-group\n\n```html [vue]\n<wd-toast />\n<wd-button @click=\"showToast\">toast</wd-button>\n```\n\n```ts [ts]\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst toast = useToast()\n\nfunction showToast() {\n toast.show('提示信息')\n}\n```\n\n:::\n\n### 类型提示\n\n支持成功、错误、警告和常规四种快捷提示。\n\n```ts\ntoast.success('操作成功')\ntoast.error('手机验证码输入错误，请重新输入')\ntoast.warning('提示信息')\ntoast.info('常规提示信息')\n```\n\n## 组件状态\n\n### 加载提示\n\n`loading()` 默认不会自动关闭，适合等待异步请求完成后手动调用 `close()`。\n\n```ts\ntoast.loading('3s后自动关闭')\n\nsetTimeout(() => {\n toast.close()\n}, 3000)\n```\n\n### 加载类型\n\n通过 `loadingType` 可切换不同加载样式，支持 `circular`、`spinner`、`dots`。\n\n```ts\ntoast.loading({\n msg: '3s后自动关闭',\n loadingType: 'spinner',\n loadingColor: '#fff'\n})\n```\n\n## 组件样式\n\n### 使用图标\n\n可以通过 `iconClass` 使用组件库内置图标，也可以配合 `classPrefix` 使用自定义图标。\n\n::: code-group\n\n```ts [内置图标]\ntoast.show({\n iconClass: 'star',\n msg: '使用组件库内部图标'\n})\n```\n\n```ts [自定义图标]\ntoast.show({\n iconClass: 'kehuishouwu',\n classPrefix: 'fish',\n msg: '使用自定义图标'\n})\n```\n\n:::\n\n### 提示位置\n\n通过 `position` 调整提示出现位置，支持 `top`、`middle-top`、`middle`、`bottom`。\n\n```ts\ntoast.show({\n position: 'top',\n msg: '提示信息'\n})\n\ntoast.show({\n position: 'middle',\n msg: '提示信息'\n})\n\ntoast.show({\n position: 'bottom',\n msg: '提示信息'\n})\n```\n\n### 排版方向\n\n通过 `direction` 控制横向或纵向排版，常用于长文案或加载提示。\n\n```ts\ntoast.success({\n msg: '纵向排版',\n direction: 'vertical'\n})\n```\n\n## Toast Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 唯一挂载标识，多实例场景下用于区分不同 toast | `string` | `''` |\n| msg | 默认提示文案 | `string` | `''` |\n| direction | 默认排版方向，可选值为 `horizontal`、`vertical` | `ToastDirection` | `horizontal` |\n| icon-name | 默认图标类型，可选值为 `success`、`error`、`warning`、`loading`、`info` | `ToastIconType` | `''` |\n| icon-size | 默认图标大小 | `number` | - |\n| loading-type | 默认加载图标类型，可选值为 `circular`、`spinner`、`dots` | `ToastLoadingType` | `circular` |\n| loading-color | 默认加载图标颜色 | `string` | `#ffffff` |\n| loading-size | 默认加载图标大小 | `number` | - |\n| icon-color | 默认图标颜色 | `string` | - |\n| position | 默认提示位置，可选值为 `top`、`middle-top`、`middle`、`bottom` | `ToastPositionType` | `middle` |\n| z-index | 默认层级 | `number` | `100` |\n| cover | 是否显示透明遮罩层 | `boolean` | `false` |\n| icon-class | 默认图标类名 | `string` | `''` |\n| class-prefix | 类名前缀，用于使用自定义图标，用法参考 Icon 组件 | `string` | `wd-icon` |\n| css-icon | CSS 图标，用法参考 Icon 组件 | `boolean \\| string` | `false` |\n| opened | 完全展示后的回调 | <code>() => void</code> | - |\n| closed | 完全关闭后的回调 | <code>() => void</code> | - |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Toast Options\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| msg | 提示文案 | `string` | `''` |\n| duration | 持续时间，单位毫秒，`0` 表示不自动关闭 | `number` | `2000` |\n| direction | 排版方向，可选值为 `horizontal`、`vertical` | `ToastDirection` | `horizontal` |\n| iconName | 图标类型，可选值为 `success`、`error`、`warning`、`loading`、`info` | `ToastIconType` | - |\n| iconSize | 图标大小 | `number` | - |\n| loadingType | 加载图标类型，可选值为 `circular`、`spinner`、`dots` | `ToastLoadingType` | - |\n| loadingColor | 加载图标颜色 | `string` | - |\n| loadingSize | 加载图标大小 | `number` | - |\n| iconColor | 图标颜色 | `string` | - |\n| position | 提示位置，可选值为 `top`、`middle-top`、`middle`、`bottom` | `ToastPositionType` | `middle` |\n| show | 是否显示，仅内部状态使用 | `boolean` | - |\n| zIndex | 层级 | `number` | `100` |\n| cover | 是否显示透明遮罩层 | `boolean` | `false` |\n| iconClass | 自定义图标类名 | `string` | `''` |\n| classPrefix | 自定义图标类名前缀 | `string` | `wd-icon` |\n| cssIcon | CSS 图标 | `boolean \\| string` | `false` |\n| opened | 完全展示后的回调 | <code>() => void</code> | - |\n| closed | 完全关闭后的回调 | <code>() => void</code> | - |\n\n## Toast Methods\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| show | 展示普通提示 | <code>(options: ToastOptions | string)</code> | - |\n| success | 展示成功提示 | <code>(options: ToastOptions | string)</code> | - |\n| error | 展示错误提示 | <code>(options: ToastOptions | string)</code> | - |\n| warning | 展示警告提示 | <code>(options: ToastOptions | string)</code> | - |\n| info | 展示常规提示 | <code>(options: ToastOptions | string)</code> | - |\n| loading | 展示加载提示 | <code>(options: ToastOptions | string)</code> | - |\n| close | 手动关闭当前提示 | - | - |\n",
|
|
17978
17999
|
"props": [
|
|
17979
18000
|
{
|
|
17980
18001
|
"name": "selector",
|
|
@@ -18056,10 +18077,16 @@
|
|
|
18056
18077
|
},
|
|
18057
18078
|
{
|
|
18058
18079
|
"name": "class-prefix",
|
|
18059
|
-
"description": "
|
|
18080
|
+
"description": "类名前缀，用于使用自定义图标，用法参考 Icon 组件",
|
|
18060
18081
|
"type": "`string`",
|
|
18061
18082
|
"default": "`wd-icon`"
|
|
18062
18083
|
},
|
|
18084
|
+
{
|
|
18085
|
+
"name": "css-icon",
|
|
18086
|
+
"description": "CSS 图标，用法参考 Icon 组件",
|
|
18087
|
+
"type": "`boolean | string`",
|
|
18088
|
+
"default": "`false`"
|
|
18089
|
+
},
|
|
18063
18090
|
{
|
|
18064
18091
|
"name": "opened",
|
|
18065
18092
|
"description": "完全展示后的回调",
|
|
@@ -18120,7 +18147,7 @@
|
|
|
18120
18147
|
},
|
|
18121
18148
|
{
|
|
18122
18149
|
"name": "--wot-toast-line-height",
|
|
18123
|
-
"defaultValue": "$typography-body-line
|
|
18150
|
+
"defaultValue": "$typography-body-line-height-size-extra-large",
|
|
18124
18151
|
"description": "行高"
|
|
18125
18152
|
},
|
|
18126
18153
|
{
|
|
@@ -18177,7 +18204,7 @@
|
|
|
18177
18204
|
"category": "未分类",
|
|
18178
18205
|
"description": "用于展示简短提示信息，支持多方向定位、受控显隐、自定义内容和动态更新位置。",
|
|
18179
18206
|
"descriptionZh": "用于展示简短提示信息，支持多方向定位、受控显隐、自定义内容和动态更新位置。",
|
|
18180
|
-
"since": "2.0.
|
|
18207
|
+
"since": "2.0.4",
|
|
18181
18208
|
"doc": "# Tooltip 文字提示\n\n用于展示简短提示信息，支持多方向定位、受控显隐、自定义内容和动态更新位置。\n\n## 组件类型\n\n### 基本用法\n\n`placement` 用于控制提示出现位置，支持 12 种方向组合。\n\n::: warning 注意\n由于 `uni-app` 组件无法天然监听点击自身以外的区域，页面中如果需要点击空白处自动关闭 `tooltip`，建议配合 `useQueue()` 在根节点上统一处理 `closeOutside()`。\n:::\n\n::: code-group\n\n```html [vue]\n<view @click=\"closeOutside\">\n <wd-tooltip placement=\"top\" content=\"top 提示文字\">\n <wd-button>top</wd-button>\n </wd-tooltip>\n</view>\n```\n\n```ts [ts]\nimport { useQueue } from '@/uni_modules/wot-ui'\n\nconst { closeOutside } = useQueue()\n```\n\n:::\n\n### 显示关闭按钮\n\n通过 `show-close` 在提示层内部显示关闭按钮。\n\n```html\n<wd-tooltip content=\"显示关闭按钮\" placement=\"right\" show-close>\n <wd-button>显示关闭按钮</wd-button>\n</wd-tooltip>\n```\n\n## 组件状态\n\n### 控制显隐\n\n通过 `v-model` 手动控制 `tooltip` 打开和关闭。\n\n::: code-group\n\n```html [vue]\n<wd-button plain size=\"small\" @click.stop=\"control\">\n {{ show ? '关闭' : '打开' }}\n</wd-button>\n\n<wd-tooltip placement=\"top\" content=\"控制显隐\" v-model=\"show\">\n <wd-button>top</wd-button>\n</wd-tooltip>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\n\nconst show = ref(false)\n\nfunction control() {\n show.value = !show.value\n}\n```\n\n:::\n\n### 禁用\n\n设置 `disabled` 后，点击目标元素不会再显示提示层。\n\n```html\n<wd-tooltip placement=\"right-end\" content=\"禁用\" disabled>\n <wd-button>禁用</wd-button>\n</wd-tooltip>\n```\n\n## 内容形态\n\n### 多行内容\n\n使用 `content` 插槽时，需要同时开启 `use-content-slot`，适合展示多行文本或自定义布局。\n\n::: warning 注意\n使用 `content` 插槽时，组件内部无法自动推断复杂内容的最终尺寸。若内容大小发生变化，建议通过实例方法 `updatePosition()` 重新计算定位。\n:::\n\n```html\n<wd-tooltip placement=\"right\" use-content-slot>\n <wd-button>多行文本</wd-button>\n <template #content>\n <view class=\"lines-content\">\n <view>多行文本1</view>\n <view>多行文本2</view>\n <view>多行文本3</view>\n </view>\n </template>\n</wd-tooltip>\n```\n\n## 特殊样式\n\n### 动态内容与位置更新\n\n当提示内容尺寸会动态变化时，可通过组件实例的 `updatePosition()` 手动刷新定位。\n\n::: code-group\n\n```html [vue]\n<wd-tooltip placement=\"right\" use-content-slot ref=\"tooltipRef\">\n <template #content>\n <view class=\"lines-content\" :style=\"{ width: dynamicTooltipWidth + 'px' }\">\n <view style=\"margin-bottom: 10px\">当前宽度: {{ dynamicTooltipWidth }}px</view>\n <wd-button size=\"small\" @click=\"changeTooltipSize\">改变大小</wd-button>\n </view>\n </template>\n <wd-button>动态内容</wd-button>\n</wd-tooltip>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\nimport type { TooltipInstance } from '@/uni_modules/wot-ui/components/wd-tooltip/types'\n\nconst tooltipRef = ref<TooltipInstance>()\nconst dynamicTooltipWidth = ref(90)\n\nfunction changeTooltipSize() {\n dynamicTooltipWidth.value = dynamicTooltipWidth.value === 90 ? 150 : 90\n setTimeout(() => {\n tooltipRef.value?.updatePosition()\n }, 50)\n}\n```\n\n:::\n\n### 绑定事件\n\n可通过 `open`、`close`、`change` 监听提示状态变化。\n\n```html\n<wd-tooltip placement=\"right-end\" :content=\"content\" @open=\"onShow\" @close=\"onHide\" @change=\"handleChange\">\n <wd-button>事件</wd-button>\n</wd-tooltip>\n```\n\n## Tooltip Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value | 是否显示提示层，支持 `v-model` | `boolean` | `false` |\n| content | 提示内容，也可以通过 `content` 插槽传入 | <code>string | Array<Record<string, any>></code> | - |\n| placement | 提示位置，可选值为 `top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end`、`left`、`left-start`、`left-end`、`right`、`right-start`、`right-end` | `PlacementType` | `bottom` |\n| offset | 位置偏移量，支持数字、数组或对象配置 | `PopoverOffset` | `0` |\n| visible-arrow | 是否显示箭头 | `boolean` | `true` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| show-close | 是否显示关闭按钮 | `boolean` | `false` |\n| custom-arrow | 箭头自定义类名 | `string` | `''` |\n| custom-pop | 提示层自定义类名 | `string` | `''` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## Tooltip Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 提示层显示时触发 | - |\n| close | 提示层关闭时触发 | - |\n| change | 显隐状态变化时触发 | `{ show: boolean }` |\n| update:modelValue | 显隐状态变化时触发 | `boolean` |\n\n## Tooltip Methods\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| open | 打开提示层 | - | - |\n| close | 关闭提示层 | - | - |\n| updatePosition | 重新测量弹层尺寸并更新定位 | - | - |\n\n## Tooltip Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 触发提示层的目标内容 |\n| content | 自定义提示层内容 |\n",
|
|
18182
18209
|
"props": [
|
|
18183
18210
|
{
|
|
@@ -18342,7 +18369,7 @@
|
|
|
18342
18369
|
},
|
|
18343
18370
|
{
|
|
18344
18371
|
"name": "--wot-tooltip-line-height",
|
|
18345
|
-
"defaultValue": "$typography-body-line
|
|
18372
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
18346
18373
|
"description": "行高"
|
|
18347
18374
|
}
|
|
18348
18375
|
],
|
|
@@ -18380,7 +18407,7 @@
|
|
|
18380
18407
|
"category": "未分类",
|
|
18381
18408
|
"description": "用于分步骤引导用户了解页面功能，可高亮目标元素并在其附近展示说明面板。",
|
|
18382
18409
|
"descriptionZh": "用于分步骤引导用户了解页面功能，可高亮目标元素并在其附近展示说明面板。",
|
|
18383
|
-
"since": "2.0.
|
|
18410
|
+
"since": "2.0.4",
|
|
18384
18411
|
"doc": "# Tour 漫游组件\n\n用于分步骤引导用户了解页面功能，可高亮目标元素并在其附近展示说明面板。\n\n::: tip 提示\nTour 组件演示 demo 在 iframe 中表现异常，可以点击 demo 左上角箭头单独查看。 \n:::\n\n## 组件类型\n\n### 基本用法\n\n通过 `steps` 定义引导步骤，通过 `v-model` 控制显隐，通过 `v-model:current` 同步当前步骤索引。\n\n::: code-group\n\n```html [vue]\n<wd-tour v-model=\"showBasicTour\" :steps=\"basicSteps\" v-model:current=\"current\" :padding=\"10\" @finish=\"handleFinish\" @change=\"handleChange\" />\n```\n\n```ts [ts]\nimport type { TourChangeDetail, TourStep } from '@/uni_modules/wot-ui/components/wd-tour/types'\nimport { ref } from 'vue'\n\nconst showBasicTour = ref(false)\nconst current = ref(0)\n\nconst basicSteps: TourStep[] = [\n {\n element: '#step1',\n content: '欢迎使用引导组件，这是第一步的说明'\n },\n {\n element: '#step2',\n content: '这是第二步，展示了另一个功能点'\n }\n]\n\nfunction handleChange({ current }: TourChangeDetail) {\n console.log('当前步骤:', current)\n}\n\nfunction handleFinish() {\n showBasicTour.value = false\n}\n```\n\n:::\n\n## 组件状态\n\n### 点击蒙版继续\n\n设置 `click-mask-next` 后，点击遮罩层会自动进入下一步。\n\n```html\n<wd-tour v-model=\"showClickMaskTour\" :steps=\"basicSteps\" :click-mask-next=\"true\" />\n```\n\n### 关闭蒙版\n\n设置 `mask` 为 `false` 后，仅保留高亮区域与说明面板，不再显示整页遮罩。\n\n```html\n<wd-tour v-model=\"showNoMaskTour\" :steps=\"noMaskSteps\" :mask=\"false\" />\n```\n\n## 组件样式\n\n### 自定义蒙版\n\n可以通过 `mask-color`、`offset`、`border-radius`、`padding` 等属性调整高亮区域和遮罩表现。\n\n```html\n<wd-tour\n v-model=\"showCustomMaskTour\"\n :steps=\"customMaskSteps\"\n mask-color=\"red\"\n :offset=\"40\"\n :border-radius=\"15\"\n :padding=\"10\"\n next-text=\"下一步\"\n prev-text=\"上一步\"\n skip-text=\"跳过\"\n finish-text=\"完成\"\n/>\n```\n\n### 自定义高亮区域\n\n通过 `highlight` 插槽可以完全接管高亮区域渲染。\n\n::: code-group\n\n```html [vue]\n<wd-tour v-model=\"showCustomHighlightTour\" :steps=\"customHighlightSteps\" :padding=\"10\">\n <template #highlight=\"{ elementInfo }\">\n <view class=\"custom-highlight\" :style=\"`${objToStyle(elementInfo)};${objToStyle(customHighlightStyle)}`\"></view>\n </template>\n</wd-tour>\n```\n\n```ts [ts]\nimport { objToStyle } from '@/uni_modules/wot-ui/common/util'\n\nconst customHighlightStyle = {\n border: '2px dashed #ff0000',\n borderRadius: '8px',\n background: 'rgba(255, 0, 0, 0.1)',\n boxSizing: 'border-box'\n}\n```\n\n:::\n\n### 自定义内容和按钮\n\n支持通过 `content`、`prev`、`next`、`skip`、`finish` 插槽自定义引导内容和操作按钮。\n\n```html\n<wd-tour v-model=\"showCustomContentTour\" :steps=\"customContentSteps\" next-text=\"继续\" prev-text=\"返回\" skip-text=\"跳过\" finish-text=\"知道了\">\n <template #content>\n <view class=\"custom-content\">\n <wd-icon name=\"help-circle-filled\" size=\"22px\"></wd-icon>\n <text class=\"custom-text\">自定义引导内容区域</text>\n </view>\n </template>\n\n <template #next>\n <view class=\"custom-button custom-next\">下一步</view>\n </template>\n\n <template #finish>\n <view class=\"custom-button custom-finish\">完成</view>\n </template>\n</wd-tour>\n```\n\n## 特殊样式\n\n### 控制当前步骤\n\n通过 `v-model:current` 可在外部直接跳转到指定步骤。\n\n```ts\nconst controlCurrent = ref(0)\n\nfunction startControlTour() {\n controlCurrent.value = 2\n showControlTour.value = true\n}\n```\n\n## Tour Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| model-value | 是否显示引导组件，支持 `v-model` | `boolean` | `false` |\n| steps | 引导步骤列表 | <code>TourStep[]</code> | `[]` |\n| current | 当前步骤索引，支持 `v-model:current` | `number` | `0` |\n| mask | 是否显示蒙版 | `boolean` | `true` |\n| mask-color | 蒙版颜色 | `string` | - |\n| offset | 引导面板与高亮区域的间距 | `number` | `20` |\n| duration | 动画时长，单位毫秒 | `number` | `300` |\n| border-radius | 高亮区域圆角 | `number` | `4` |\n| padding | 高亮区域内边距 | `number` | `8` |\n| prev-text | 上一步按钮文案 | `string` | `上一步` |\n| next-text | 下一步按钮文案 | `string` | `下一步` |\n| skip-text | 跳过按钮文案 | `string` | `跳过` |\n| finish-text | 完成按钮文案 | `string` | `完成` |\n| bottom-safety-offset | 底部安全偏移量，用于滚动计算 | `number` | `100` |\n| top-safety-offset | 顶部安全偏移量，用于滚动计算 | `number` | `0` |\n| custom-nav | 是否启用自定义导航栏模式 | `boolean` | `false` |\n| click-mask-next | 点击遮罩层是否进入下一步 | `boolean` | `false` |\n| highlight-style | 默认高亮区域样式 | <code>CSSProperties</code> | `{}` |\n| z-index | 层级 | `number` | - |\n| show-tour-buttons | 是否显示引导按钮 | `boolean` | `true` |\n| scope | 查询作用域，限定选择器查找范围 | `unknown` | - |\n| missing-strategy | 目标元素缺失时的处理策略，可选值为 `skip`、`stop`、`hide` | `MissingStrategy` | `stop` |\n| custom-class | 根节点自定义类名 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## TourStep Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| element | 需要高亮的元素选择器 | `string` | - |\n| content | 步骤说明，支持 `rich-text` 渲染 | `string` | - |\n| padding | 覆盖当前步骤的高亮内边距 | `number` | - |\n| offset | 覆盖当前步骤的面板间距 | `number` | - |\n| placement | 强制指定提示位置，可选值为 `auto`、`top`、`bottom`、`left`、`right` | `TourPlacement` | `auto` |\n\n## Tour Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| change | 当前步骤变化时触发 | `{ current: number }` |\n| prev | 点击上一步时触发 | `{ prevCurrent, current, total, isElementInTop }` |\n| next | 点击下一步时触发 | `{ prevCurrent, current, total, isElementInTop }` |\n| finish | 点击完成时触发 | `{ current, total }` |\n| skip | 点击跳过时触发 | `{ current, total }` |\n| error | 目标元素查询失败时触发 | `{ message, element }` |\n| update:modelValue | 显隐状态变化时触发 | `boolean` |\n| update:current | 当前步骤变化时触发 | `number` |\n\n## Tour Methods\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| handlePrev | 切换到上一步 | - | - |\n| handleNext | 切换到下一步 | - | - |\n| handleFinish | 完成引导并关闭组件 | - | - |\n| handleSkip | 跳过引导并关闭组件 | - | - |\n\n## Tour Slots\n\n| 名称 | 说明 | 参数 |\n| --- | --- | --- |\n| highlight | 自定义高亮区域 | `{ elementInfo }` |\n| content | 自定义引导内容 | - |\n| prev | 自定义上一步按钮 | - |\n| next | 自定义下一步按钮 | - |\n| skip | 自定义跳过按钮 | - |\n| finish | 自定义完成按钮 | - |\n",
|
|
18385
18412
|
"props": [
|
|
18386
18413
|
{
|
|
@@ -18654,7 +18681,7 @@
|
|
|
18654
18681
|
},
|
|
18655
18682
|
{
|
|
18656
18683
|
"name": "--wot-tour-info-line-height",
|
|
18657
|
-
"defaultValue": "$typography-body-line
|
|
18684
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
18658
18685
|
"description": "信息框行高"
|
|
18659
18686
|
},
|
|
18660
18687
|
{
|
|
@@ -18702,7 +18729,7 @@
|
|
|
18702
18729
|
"category": "未分类",
|
|
18703
18730
|
"description": "用于在元素进入或离开时应用过渡效果。",
|
|
18704
18731
|
"descriptionZh": "用于在元素进入或离开时应用过渡效果。",
|
|
18705
|
-
"since": "2.0.
|
|
18732
|
+
"since": "2.0.4",
|
|
18706
18733
|
"doc": "# Transition 动画\n\n用于在元素进入或离开时应用过渡效果。\n\n## 组件类型\n\n### 淡入淡出\n\n通过 `name` 指定淡入淡出相关动画，适合提示层、浮层、局部内容切换等场景。\n\n```html\n<wd-transition :show=\"show\" name=\"fade\">\n <view>内容</view>\n</wd-transition>\n```\n\n### 滑动动画\n\n内置 `slide-up`、`slide-down`、`slide-left`、`slide-right` 四种滑动方向。\n\n```html\n<wd-transition :show=\"show\" name=\"slide-up\">\n <view>内容</view>\n</wd-transition>\n```\n\n### 缩放动画\n\n内置 `zoom-in` 与 `zoom-out` 两种缩放动画。\n\n```html\n<wd-transition :show=\"show\" name=\"zoom-in\">\n <view>内容</view>\n</wd-transition>\n```\n## 特殊样式\n\n### 自定义动画\n\n通过 `enter-class`、`enter-active-class`、`enter-to-class`、`leave-class`、`leave-active-class`、`leave-to-class` 自定义进入和离开动画类名。\n\n`duration` 支持数字，也支持分别配置进入和离开时长，例如 `{ enter: 700, leave: 1000 }`。\n\n::: code-group\n\n```html [vue]\n<wd-transition\n :show=\"customShow\"\n :duration=\"{ enter: 700, leave: 1000 }\"\n enter-class=\"custom-enter\"\n enter-active-class=\"custom-enter-active\"\n enter-to-class=\"custom-enter-to\"\n leave-class=\"custom-leave\"\n leave-active-class=\"custom-leave-active\"\n leave-to-class=\"custom-leave-to\"\n custom-class=\"block\"\n/>\n```\n\n```scss [scss]\n:deep(.block) {\n position: fixed;\n left: 50%;\n top: 50%;\n margin: -50px 0 0 -50px;\n width: 100px;\n height: 100px;\n background: #0083ff;\n}\n\n:deep(.custom-enter-active),\n:deep(.custom-leave-active) {\n transition-property: background, transform;\n}\n\n:deep(.custom-enter) {\n transform: translate3d(-100px, -100px, 0) rotate(-180deg);\n background: #ff0000;\n}\n\n:deep(.custom-leave-to) {\n transform: translate3d(100px, 100px, 0) rotate(180deg);\n background: #ff0000;\n}\n```\n\n:::\n\n## Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| show | 是否展示组件 | `boolean` | `false` |\n| duration | 动画执行时间，支持统一时长或分别设置进入、离开时长 | <code>number | boolean | Record<string, number></code> | `300` |\n| lazy-render | 是否在首次展示时再渲染内容 | `boolean` | `false` |\n| name | 动画类型，可选值为 `fade`、`fade-up`、`fade-down`、`fade-left`、`fade-right`、`slide-up`、`slide-down`、`slide-left`、`slide-right`、`zoom-in`、`zoom-out`，也支持数组组合多个动画 | <code>TransitionName | TransitionName[]</code> | - |\n| destroy | 是否在动画结束后通过 `display: none` 隐藏内容 | `boolean` | `true` |\n| enter-class | 进入过渡的开始状态类名 | `string` | `''` |\n| enter-active-class | 进入过渡的激活状态类名 | `string` | `''` |\n| enter-to-class | 进入过渡的结束状态类名 | `string` | `''` |\n| leave-class | 离开过渡的开始状态类名 | `string` | `''` |\n| leave-active-class | 离开过渡的激活状态类名 | `string` | `''` |\n| leave-to-class | 离开过渡的结束状态类名 | `string` | `''` |\n| disable-touch-move | 是否阻止触摸滚动 | `boolean` | `false` |\n| custom-style | 自定义根节点样式 | `string` | `''` |\n| custom-class | 自定义根节点样式类 | `string` | `''` |\n\n### TransitionName 动画类型\n\n| 名称 | 说明 |\n| --- | --- |\n| fade | 淡入淡出 |\n| fade-down | 向下淡入淡出 |\n| fade-left | 向左淡入淡出 |\n| fade-right | 向右淡入淡出 |\n| fade-up | 向上淡入淡出 |\n| slide-down | 向下滑动 |\n| slide-left | 向左滑动 |\n| slide-right | 向右滑动 |\n| slide-up | 向上滑动 |\n| zoom-in | 缩放进入 |\n| zoom-out | 缩放离开 |\n\n## Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| before-enter | 进入前触发 | - |\n| enter | 进入时触发 | - |\n| after-enter | 进入后触发 | - |\n| before-leave | 离开前触发 | - |\n| leave | 离开时触发 | - |\n| after-leave | 离开后触发 | - |\n| click | 点击组件时触发 | - |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 需要应用动画效果的内容 |\n",
|
|
18707
18734
|
"props": [
|
|
18708
18735
|
{
|
|
@@ -18862,7 +18889,7 @@
|
|
|
18862
18889
|
"category": "未分类",
|
|
18863
18890
|
"description": "图片、视频和文件上传组件。",
|
|
18864
18891
|
"descriptionZh": "图片、视频和文件上传组件。",
|
|
18865
|
-
"since": "2.0.
|
|
18892
|
+
"since": "2.0.4",
|
|
18866
18893
|
"doc": "# Upload 上传\n\n图片、视频和文件上传组件。\n\n::: tip 提示\n目前组件库已兼容的平台都支持上传视频。使用 `video` 组件实现的视频封面在 H5、微信小程序和支付宝小程序平台得到支持，而在钉钉小程序和 App 平台受限于 `video` 标签能力无法直接作为视频封面。推荐在 `change` 事件中获取视频封面并给 `fileList` 对应视频补充 `thumb` 字段。\n:::\n\n::: warning 关于微信小程序隐私协议\n`upload` 在微信小程序平台使用了 `wx.chooseImage`、`wx.chooseMedia`、`wx.chooseVideo` 三个隐私接口，需要按微信隐私协议进行配置，否则会导致上传能力不可用。可参考[小程序隐私协议开发指南](https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html)。\n:::\n\n## 组件类型\n\n### 基本用法\n\n通过 `file-list` 或 `v-model:file-list` 设置上传列表，`action` 指定上传地址。\n\n::: code-group\n\n```html [vue]\n<wd-upload v-model:file-list=\"fileList\" accept=\"image\" image-mode=\"aspectFill\" :action=\"action\" :success-status=\"[200, 201]\"></wd-upload>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\nimport type { UploadFile } from '@/uni_modules/wot-ui/components/wd-upload/types'\n\nconst action = 'https://69bd04402bc2a25b22ad0a49.mockapi.io/upload'\n\nconst fileList = ref<UploadFile[]>([\n {\n url: 'https://wot-ui.cn/assets/panda.jpg'\n }\n])\n```\n\n:::\n\n### 上传视频\n\n将 `accept` 设置为 `video` 后，可以上传视频文件。\n\n```html\n<wd-upload accept=\"video\" multiple :file-list=\"fileList\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\"></wd-upload>\n```\n\n### 上传媒体与文件\n\n`accept=\"media\"` 支持图片和视频，`accept=\"file\"` 支持普通文件，`accept=\"all\"` 支持全部类型文件。不同平台支持范围不同，详见下方 `accept` 合法值说明。\n\n```html\n<wd-upload accept=\"all\" multiple :file-list=\"fileList\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\"></wd-upload>\n```\n\n## 组件状态\n\n### 上传状态钩子\n\n通过 `success`、`fail` 和 `progress` 事件可以展示上传状态反馈。\n\n```html\n<wd-upload\n :file-list=\"fileList\"\n :action=\"action\"\n :success-status=\"[200, 201]\"\n @change=\"handleChange\"\n @success=\"handleSuccess\"\n @fail=\"handleFail\"\n @progress=\"handleProgress\"\n></wd-upload>\n```\n\n### 禁用\n\n```html\n<wd-upload :file-list=\"fileList\" disabled :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\"></wd-upload>\n```\n\n### 手动触发上传\n\n设置 `auto-upload=\"false\"` 后，可通过组件实例的 `submit` 方法手动开始上传。\n\n::: code-group\n\n```html [vue]\n<wd-upload\n ref=\"uploadRef\"\n :auto-upload=\"false\"\n :file-list=\"fileList\"\n :action=\"action\"\n :success-status=\"[200, 201]\"\n @change=\"handleChange\"\n></wd-upload>\n\n<wd-button @click=\"uploadRef?.submit()\">开始上传</wd-button>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\nimport type { UploadFile, UploadInstance } from '@/uni_modules/wot-ui/components/wd-upload/types'\n\nconst uploadRef = ref<UploadInstance>()\nconst fileList = ref<UploadFile[]>([])\n```\n\n:::\n\n## 组件变体\n\n### 最大上传数限制\n\n通过 `limit` 限制最多上传的文件数量。\n\n```html\n<wd-upload :file-list=\"fileList\" :limit=\"3\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\"></wd-upload>\n```\n\n### 覆盖上传\n\n设置 `reupload` 后，重新选择文件会替换上一项，适合头像等单文件覆盖场景。\n\n```html\n<wd-upload reupload v-model:file-list=\"fileList\" accept=\"image\" image-mode=\"aspectFill\" :action=\"action\" :success-status=\"[200, 201]\"></wd-upload>\n```\n\n### 多选\n\n```html\n<wd-upload :file-list=\"fileList\" multiple :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\"></wd-upload>\n```\n\n## 组件样式\n\n### 自定义唤起样式\n\n通过默认插槽可以替换默认的上传唤起区域。\n\n```html\n<wd-upload :file-list=\"fileList\" :limit=\"5\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\">\n <wd-button>自定义唤起样式</wd-button>\n</wd-upload>\n```\n\n### 自定义预览样式\n\n通过 `preview-cover` 插槽可以自定义覆盖在预览区域上的内容。\n\n::: code-group\n\n```html [vue]\n<wd-upload v-model:file-list=\"fileList\" accept=\"image\" image-mode=\"aspectFill\" :action=\"action\" :success-status=\"[200, 201]\">\n <template #preview-cover=\"{ file, index }\">\n <view class=\"preview-cover\">{{ file.name || `文件${index}` }}</view>\n </template>\n</wd-upload>\n```\n\n```scss [scss]\n.preview-cover {\n margin-top: 10rpx;\n text-align: center;\n}\n```\n\n:::\n\n## 特殊样式\n\n### 拦截预览图片操作\n\n`before-preview` 会在预览前触发，返回 `false` 或返回值为 `false` 的 Promise 时可阻止预览。\n\n```html\n<wd-upload :file-list=\"fileList\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\" :before-preview=\"beforePreview\"></wd-upload>\n```\n\n### 上传前置处理\n\n`before-upload` 会在确认选择文件后、发起上传前触发。\n\n```html\n<wd-upload :file-list=\"fileList\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\" :before-upload=\"beforeUpload\"></wd-upload>\n```\n\n### 移除图片前置处理\n\n```html\n<wd-upload :file-list=\"fileList\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\" :before-remove=\"beforeRemove\"></wd-upload>\n```\n\n### 选择文件前置处理\n\n```html\n<wd-upload :file-list=\"fileList\" :action=\"action\" :success-status=\"[200, 201]\" @change=\"handleChange\" :before-choose=\"beforeChoose\"></wd-upload>\n```\n\n### 自定义上传方法\n\n通过 `upload-method` 可以完全接管上传行为。\n\n::: code-group\n\n```html [vue]\n<wd-upload v-model:file-list=\"fileList\" :upload-method=\"customUpload\" :success-status=\"[200, 201]\"></wd-upload>\n```\n\n```ts [ts]\nimport type { UploadMethod } from '@/uni_modules/wot-ui/components/wd-upload/types'\n\nconst customUpload: UploadMethod = (file, formData, options) => {\n const task = uni.uploadFile({\n url: options.action,\n name: options.name,\n filePath: file.url,\n formData,\n header: options.header,\n success: (response) => options.onSuccess(response, file, formData),\n fail: (error) => options.onError(error, file, formData)\n })\n\n task.onProgressUpdate((response) => {\n options.onProgress(response, file)\n })\n\n return task\n}\n```\n\n:::\n\n### 根据文件拓展名过滤\n\n设置 `extension` 后，可以限制选择文件的后缀。H5 支持全部类型过滤，微信小程序支持 `all` 和 `file` 场景过滤。\n\n```html\n<wd-upload v-model:file-list=\"fileList\" :extension=\"['.jpg', '.png']\" :action=\"action\" :success-status=\"[200, 201]\"></wd-upload>\n```\n\n## 业务能力\n\n### 上传至云存储\n\n`build-form-data` 用于在真正上传前动态构建签名字段，适合对接 OSS、COS、OBS 等云存储服务。\n\n::: code-group\n\n```html [vue]\n<wd-upload :file-list=\"files\" :action=\"host\" :build-form-data=\"buildFormData\" @change=\"handleChange\"></wd-upload>\n```\n\n```ts [ts]\nconst host = 'https://examplebucket.oss-cn-zhangjiakou.aliyuncs.com'\n\nfunction buildFormData({ file, formData }) {\n const imageName = file.url.substring(file.url.lastIndexOf('/') + 1)\n\n return {\n ...formData,\n key: `20231120/${imageName}`,\n OSSAccessKeyId: 'your-access-key',\n policy: 'your-policy',\n signature: 'your-signature',\n success_action_status: '200'\n }\n}\n```\n\n:::\n\n## Upload Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| file-list / v-model:file-list | 上传文件列表，例如 <code>[{ url: 'https://xxx.cdn.com/xxx.jpg' }]</code> | `UploadFile[]` | `[]` |\n| action | 上传地址 | `string` | `''` |\n| header | 上传请求头 | `Record<string, any>` | `{}` |\n| multiple | 是否支持多选文件 | `boolean` | `false` |\n| disabled | 是否禁用 | `boolean` | `false` |\n| limit | 最大允许上传个数 | `number` | - |\n| show-limit-num | 限制上传数量时，是否显示当前数量 | `boolean` | `true` |\n| max-size | 文件大小限制，单位为 byte | `number` | `Number.MAX_VALUE` |\n| source-type | 选择图片来源 | `UploadSourceType[]` | <code>['album', 'camera']</code> |\n| size-type | 所选图片尺寸 | `UploadSizeType[]` | <code>['original', 'compressed']</code> |\n| name | 上传文件字段名 | `string` | `file` |\n| form-data | HTTP 请求附带的额外表单数据 | `Record<string, any>` | `{}` |\n| on-preview-fail | 预览失败回调 | `UploadOnPreviewFail` | - |\n| before-upload | 上传前置钩子 | `UploadBeforeUpload` | - |\n| before-choose | 选择文件前置钩子 | `UploadBeforeChoose` | - |\n| before-remove | 删除文件前置钩子 | `UploadBeforeRemove` | - |\n| before-preview | 图片预览前置钩子 | `UploadBeforePreview` | - |\n| build-form-data | 动态构建上传 `formData` 的钩子 | `UploadBuildFormData` | - |\n| loading-type | 加载中图标类型 | `LoadingType` | `circular` |\n| loading-color | 加载中图标颜色 | `string` | `#ffffff` |\n| loading-size | 加载中图标尺寸 | `string` | `24px` |\n| accept | 接受的文件类型，可选值为 `image`、`video`、`media`、`all`、`file` | `UploadFileType` | `image` |\n| status-key | `file` 数据结构中状态字段对应的 key | `string` | `status` |\n| compressed | 是否压缩视频，当 `accept` 为 `video` 或 `media` 时生效 | `boolean` | `true` |\n| max-duration | 拍摄视频最大时长，单位为秒 | `number` | `60` |\n| camera | 使用前置或后置相机，可选值为 `front`、`back` | `UploadCameraType` | `back` |\n| image-mode | 预览图片的 `mode` 属性 | `ImageMode` | `aspectFit` |\n| success-status | 接口响应成功状态码 | <code>number | number[]</code> | `200` |\n| custom-evoke-class | 自定义上传按钮样式类 | `string` | `''` |\n| custom-preview-class | 自定义预览列表样式类 | `string` | `''` |\n| auto-upload | 是否选择文件后自动上传，关闭后需手动调用 `submit` | `boolean` | `true` |\n| reupload | 是否开启覆盖上传，开启后会关闭图片预览 | `boolean` | `false` |\n| upload-method | 自定义上传方法 | `UploadMethod` | - |\n| extension | 根据文件拓展名过滤，H5 支持全部类型过滤，微信小程序支持 `all` 和 `file` 场景过滤 | `string[]` | - |\n| custom-class | 根节点自定义样式类 | `string` | `''` |\n| custom-style | 根节点自定义样式 | `string` | `''` |\n\n## accept 的合法值\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| image | 图片，全平台支持，微信小程序使用 `chooseMedia` 实现 | `UploadFileType` | - |\n| video | 视频，全平台支持，微信小程序使用 `chooseMedia` 实现 | `UploadFileType` | - |\n| media | 图片和视频，仅微信小程序支持，使用 `chooseMedia` 实现 | `UploadFileType` | - |\n| file | 普通文件，仅微信小程序支持，使用 `chooseMessageFile` 实现 | `UploadFileType` | - |\n| all | 全部类型文件，仅微信小程序和 H5 支持 | `UploadFileType` | - |\n\n## file 数据结构\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| uid | 当前上传文件在列表中的唯一标识 | `number` | - |\n| thumb | 缩略图地址 | `string` | - |\n| name | 当前文件名称 | `string` | - |\n| status | 当前文件上传状态，可选值为 `pending`、`loading`、`success`、`fail` | `UploadStatusType` | - |\n| size | 文件大小 | `number` | - |\n| url | 文件地址 | `string` | - |\n| percent | 上传进度 | `number` | - |\n| response | 后端返回内容，可能是字符串或对象 | <code>string | Record<string, any></code> | - |\n\n## Upload Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| default | 自定义上传唤起区域 |\n| preview-cover | 自定义覆盖在预览区域上方的内容，参数为 <code>{ file, index }</code> |\n\n## Upload Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| success | 上传成功时触发 | `UploadSuccessEvent` |\n| fail | 上传失败时触发 | `UploadErrorEvent` |\n| progress | 上传中时触发 | `UploadProgressEvent` |\n| oversize | 文件大小超过限制时触发 | `UploadOversizeEvent` |\n| chooseerror | 选择文件失败时触发 | `any` |\n| change | 上传列表修改时触发 | `UploadChangeEvent` |\n| remove | 移除文件时触发 | `UploadRemoveEvent` |\n| update:fileList | `v-model:file-list` 对应的更新事件 | `UploadFileItem[]` |\n\n## Upload Methods\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| submit | 手动开始上传 | - |\n| abort | 取消上传 | <code>(task?: UniApp.UploadTask) => void</code> |",
|
|
18867
18894
|
"props": [
|
|
18868
18895
|
{
|
|
@@ -19172,7 +19199,7 @@
|
|
|
19172
19199
|
},
|
|
19173
19200
|
{
|
|
19174
19201
|
"name": "--wot-upload-evoke-line-height",
|
|
19175
|
-
"defaultValue": "$typography-body-line
|
|
19202
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
19176
19203
|
"description": "唤起项文字行高"
|
|
19177
19204
|
},
|
|
19178
19205
|
{
|
|
@@ -19222,7 +19249,7 @@
|
|
|
19222
19249
|
},
|
|
19223
19250
|
{
|
|
19224
19251
|
"name": "--wot-upload-progress-line-height",
|
|
19225
|
-
"defaultValue": "$typography-body-line
|
|
19252
|
+
"defaultValue": "$typography-body-line-height-size-main",
|
|
19226
19253
|
"description": "进度文字行高"
|
|
19227
19254
|
},
|
|
19228
19255
|
{
|
|
@@ -19237,7 +19264,7 @@
|
|
|
19237
19264
|
},
|
|
19238
19265
|
{
|
|
19239
19266
|
"name": "--wot-upload-file-line-height",
|
|
19240
|
-
"defaultValue": "$typography-label-line
|
|
19267
|
+
"defaultValue": "$typography-label-line-height-size-main",
|
|
19241
19268
|
"description": "文件名文字行高"
|
|
19242
19269
|
},
|
|
19243
19270
|
{
|
|
@@ -19379,7 +19406,7 @@
|
|
|
19379
19406
|
"category": "未分类",
|
|
19380
19407
|
"description": "用于在 JS 逻辑中注入全局配置（如主题变量），解决在微信小程序等环境中，由于组件渲染机制限制（如原生插槽作用域隔离）或使用 `root-portal` 导致无法获取父级 `ConfigProvider` 配置的问题。",
|
|
19381
19408
|
"descriptionZh": "用于在 JS 逻辑中注入全局配置（如主题变量），解决在微信小程序等环境中，由于组件渲染机制限制（如原生插槽作用域隔离）或使用 `root-portal` 导致无法获取父级 `ConfigProvider` 配置的问题。",
|
|
19382
|
-
"since": "2.0.
|
|
19409
|
+
"since": "2.0.4",
|
|
19383
19410
|
"doc": "# useConfigProvider\n\n用于在 JS 逻辑中注入全局配置（如主题变量），解决在微信小程序等环境中，由于组件渲染机制限制（如原生插槽作用域隔离）或使用 `root-portal` 导致无法获取父级 `ConfigProvider` 配置的问题。\n\n::: tip 提示\n需要和 `ConfigProvider` 组件配合使用，使用 `ConfigProvider` 组件包裹你的组件。用于解决小程序端依赖注入的限制，导致部分场景下无法获取父级 `ConfigProvider` 配置的问题。\n:::\n\n## 基础用法\n\n```ts\nimport { useConfigProvider } from '@/uni_modules/wot-ui'\nimport { reactive, ref } from 'vue'\n\n// 使用 reactive\nconst themeVars = reactive({\n primary6: '#ff4d4f',\n buttonPrimaryBg: '#07c160'\n})\n\nuseConfigProvider({ themeVars })\n\n// 或者使用 ref\nconst themeVarsRef = ref({\n primary6: '#2c68ff'\n})\n\nuseConfigProvider({ themeVars: themeVarsRef })\n```\n\n## API\n\n### 参数\n\n| 参数 | 说明 | 类型 | 默认值 | 最低版本 |\n|-----|------|------|--------|---------|\n| themeVars | 主题变量对象，支持响应式更新 | `ConfigProviderThemeVars` \\| `Ref<ConfigProviderThemeVars>` | - | 1.14.0 |\n",
|
|
19384
19411
|
"props": [],
|
|
19385
19412
|
"events": [],
|
|
@@ -19394,7 +19421,7 @@
|
|
|
19394
19421
|
"category": "未分类",
|
|
19395
19422
|
"description": "用于处理倒计时相关的逻辑。",
|
|
19396
19423
|
"descriptionZh": "用于处理倒计时相关的逻辑。",
|
|
19397
|
-
"since": "2.0.
|
|
19424
|
+
"since": "2.0.4",
|
|
19398
19425
|
"doc": "# useCountDown\n\n用于处理倒计时相关的逻辑。\n\n## 基础用法\n\n```ts\nimport { useCountDown } from '@/uni_modules/wot-ui'\n\nconst { start, pause, reset, current } = useCountDown({\n time: 60 * 1000,\n onChange(current) {\n console.log('剩余时间', current)\n },\n onFinish() {\n console.log('倒计时结束')\n }\n})\n\n// 开始倒计时\nstart()\n\n// 暂停倒计时\npause()\n\n// 重置倒计时\nreset()\n\n// 获取当前时间\nconsole.log(current.value)\n```\n\n## API\n\n### 参数\n\n| 参数 | 说明 | 类型 | 默认值 |\n|-----|------|------|--------|\n| time | 倒计时总时间(ms) | number | - |\n| millisecond | 是否开启毫秒级渲染 | boolean | false |\n| onChange | 倒计时变化回调 | (current: CurrentTime) => void | - |\n| onFinish | 倒计时结束回调 | () => void | - |\n\n### 方法\n\n| 方法名 | 说明 | 参数 | 返回值 |\n|-------|------|------|--------|\n| start | 开始倒计时 | - | - |\n| pause | 暂停倒计时 | - | - |\n| reset | 重置倒计时 | time?: number | - |\n\n### CurrentTime 结构\n\n```ts\ntype CurrentTime = {\n days: number\n hours: number\n total: number\n minutes: number\n seconds: number\n milliseconds: number\n}\n```\n",
|
|
19399
19426
|
"props": [],
|
|
19400
19427
|
"events": [],
|
|
@@ -19409,7 +19436,7 @@
|
|
|
19409
19436
|
"category": "未分类",
|
|
19410
19437
|
"description": "`useDialog` 用于函数式调用 `wd-dialog`，支持 `alert`、`confirm`、`prompt`、`show` 和 `close`。",
|
|
19411
19438
|
"descriptionZh": "`useDialog` 用于函数式调用 `wd-dialog`，支持 `alert`、`confirm`、`prompt`、`show` 和 `close`。",
|
|
19412
|
-
"since": "2.0.
|
|
19439
|
+
"since": "2.0.4",
|
|
19413
19440
|
"doc": "# useDialog\n\n`useDialog` 用于函数式调用 `wd-dialog`，支持 `alert`、`confirm`、`prompt`、`show` 和 `close`。\n\n## 基础用法\n\n页面中先声明 `wd-dialog`，再通过 `useDialog()` 打开弹框。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openAlert\">打开 Alert</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openAlert = () => {\n dialog.alert({\n title: '提示',\n msg: '操作成功'\n })\n}\n```\n\n## Confirm 与 Prompt\n\n`confirm` 和 `prompt` 返回 `Promise`，`then` 对应确认，`catch` 对应取消或关闭。\n\n::: code-group\n```html [模板]\n<wd-dialog />\n<wd-button @click=\"openConfirm\">打开 Confirm</wd-button>\n<wd-button @click=\"openPrompt\">打开 Prompt</wd-button>\n```\n\n```ts [脚本]\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\n\nconst openConfirm = () => {\n dialog\n .confirm({\n title: '删除确认',\n msg: '确定删除该记录吗？'\n })\n .then(() => {\n console.log('点击了确认')\n })\n .catch(() => {\n console.log('点击了取消')\n })\n}\n\nconst openPrompt = () => {\n dialog\n .prompt({\n title: '请输入邮箱',\n inputPattern: /.+@.+\\..+/i,\n inputError: '邮箱格式不正确'\n })\n .then((res) => {\n console.log(res.value)\n })\n}\n```\n:::\n\n## 多实例调用\n\n通过 `selector` 区分页面内多个实例，`useDialog(selector)` 会绑定到指定实例。\n\n```html\n<wd-dialog selector=\"dialog-a\" />\n<wd-dialog selector=\"dialog-b\" />\n<wd-button @click=\"openA\">打开 A</wd-button>\n<wd-button @click=\"openB\">打开 B</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\n\nconst dialogA = useDialog('dialog-a')\nconst dialogB = useDialog('dialog-b')\n\nconst openA = () => {\n dialogA.alert({ title: 'A 实例', msg: '这是 A 弹框' })\n}\n\nconst openB = () => {\n dialogB.alert({ title: 'B 实例', msg: '这是 B 弹框' })\n}\n```\n\n## 确认前拦截\n\n`beforeConfirm` 接收当前输入值，支持返回 `boolean` 或 `Promise<boolean>`。\n\n```html\n<wd-dialog />\n<wd-button @click=\"openBeforeConfirm\">确认前拦截</wd-button>\n```\n\n```ts\nimport { useDialog, useToast } from '@/uni_modules/wot-ui'\n\nconst dialog = useDialog()\nconst toast = useToast()\n\nconst openBeforeConfirm = () => {\n dialog.confirm({\n title: '确认提交',\n msg: '将进行校验后提交',\n beforeConfirm: () => {\n toast.loading('校验中...')\n return new Promise((resolve) => {\n setTimeout(() => {\n toast.close()\n resolve(true)\n }, 1200)\n })\n }\n })\n}\n```\n\n## API\n\n### Methods\n\n| 方法名称 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| show | 打开弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| alert | 打开 Alert 弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| confirm | 打开 Confirm 弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| prompt | 打开 Prompt 弹框 | `string \\| DialogOptions` | `Promise<DialogResult>` |\n| close | 关闭当前弹框 | - | `void` |\n\n### DialogResult\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| action | 操作类型，可选值为 `confirm`、`cancel`、`modal`、`close` | ActionType | - |\n| value | Prompt 模式下的输入值 | `string \\| number` | - |\n\n### useDialog\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 指定弹框实例标识，传空字符串时使用默认实例 | string | `''` |\n\n### DialogOptions\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | 标题 | string | `''` |\n| msg | 消息内容 | string | `''` |\n| type | 弹框类型，可选值为 `alert`、`confirm`、`prompt` | DialogType | alert |\n| theme | 操作区风格，可选值为 `button`、`text` | DialogTheme | button |\n| zIndex | 弹窗层级 | number | 99 |\n| lazyRender | 弹层内容懒渲染 | boolean | true |\n| headerImage | 顶部通栏图片地址 | string | - |\n| icon | 图标名称。可选值为 `success`、`info`、`warning`、`danger`，也支持自定义图标名 | string | - |\n| iconColor | 图标颜色 | string | - |\n| iconProps | 图标组件透传属性 | `Partial<IconProps>` | - |\n| inputValue | Prompt 初始值 | `string \\| number` | - |\n| inputProps | Prompt 模式下 input 组件属性 | `Partial<InputProps>` | `{ type: 'text', modelValue: '' }` |\n| textareaProps | Prompt 模式下 textarea 组件属性 | `Partial<TextareaProps>` | - |\n| inputPattern | Prompt 输入正则校验规则 | RegExp | - |\n| inputValidate | Prompt 输入函数校验规则，返回 `boolean` 或错误文本 | `(inputValue: string \\| number) => boolean \\| string` | - |\n| inputError | Prompt 校验失败提示文案 | string | `''` |\n| actionLayout | 操作按钮排列方式，可选值为 `horizontal`、`vertical` | DialogActionLayout | horizontal |\n| showCancelButton | 是否显示取消按钮 | boolean | `alert` 为 false，`confirm/prompt` 为 true |\n| confirmButtonText | 确认按钮文案 | string | - |\n| cancelButtonText | 取消按钮文案 | string | - |\n| confirmButtonProps | 确认按钮配置，支持字符串、对象或 `null` | DialogBoxButtonOption | `{}` |\n| cancelButtonProps | 取消按钮配置，支持字符串、对象或 `null` | DialogBoxButtonOption | 由 `showCancelButton` 推导 |\n| actions | 自定义操作按钮数组；配置后优先级高于确认/取消按钮 | DialogAction[] | - |\n| closeOnClickModal | 是否支持点击遮罩关闭 | boolean | false |\n| showClose | 是否显示右上角关闭按钮 | boolean | false |\n| beforeConfirm | 确认前拦截函数，返回 `boolean` 或 `Promise<boolean>` | DialogBeforeConfirm | - |\n",
|
|
19414
19441
|
"props": [],
|
|
19415
19442
|
"events": [],
|
|
@@ -19424,7 +19451,7 @@
|
|
|
19424
19451
|
"category": "未分类",
|
|
19425
19452
|
"description": "用于便捷地调用 MessageBox 弹框组件。",
|
|
19426
19453
|
"descriptionZh": "用于便捷地调用 MessageBox 弹框组件。",
|
|
19427
|
-
"since": "2.0.
|
|
19454
|
+
"since": "2.0.4",
|
|
19428
19455
|
"doc": "# useDialog\n\n用于便捷地调用 MessageBox 弹框组件。\n\n## Alert 弹框\n\nalert 弹框只有确定按钮，用于强提醒。\n\n```html\n<wd-dialog></wd-dialog>\n<wd-button @click=\"alert\">alert</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\nconst message = useDialog()\n\nfunction alert() {\n message.alert('操作成功')\n}\n```\n\n## Confirm 弹框\n\n用于提示用户操作。\n\n```html\n<wd-dialog />\n<wd-button @click=\"confirm\">confirm</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\nconst message = useDialog()\n\nfunction confirm() {\n message\n .confirm({\n msg: '提示文案',\n title: '标题'\n })\n .then(() => {\n console.log('点击了确定按钮')\n })\n .catch(() => {\n console.log('点击了取消按钮')\n })\n}\n```\n\n## Prompt 弹框\n\nprompt 会展示一个输入框，并可以进行输入校验。\n\n```html\n<wd-dialog />\n<wd-button @click=\"prompt\">prompt</wd-button>\n```\n\n```ts\nimport { useDialog } from '@/uni_modules/wot-ui'\nconst message = useDialog()\n\nfunction prompt() {\n message\n .prompt({\n title: '请输入邮箱',\n inputPattern: /.+@.+\\..+/i,\n inputError: '邮箱格式不正确'\n })\n .then((resp) => {\n console.log(resp)\n })\n .catch((error) => {\n console.log(error)\n })\n}\n```\n\n## API\n\n### Methods\n\n| 方法名称 | 说明 | 参数 |\n|--------|----------------|---------|\n| show | 展示弹框 | options |\n| alert | 展示 Alert 弹框 | options |\n| confirm| 展示 Confirm 弹框| options |\n| prompt | 展示 Prompt 弹框| options |\n| close | 关闭弹框 | - |\n\n### Options\n\n| 参数 | 说明 | 类型 | 可选值 | 默认值 |\n|-----|------|------|--------|--------|\n| title | 标题 | string | - | - |\n| msg | 消息文案 | string | - | - |\n| type | 弹框类型 | string | alert / confirm / prompt | alert |\n| closeOnClickModal | 是否支持点击蒙层进行关闭 | boolean | - | true |\n| inputType | 当type为prompt时，输入框类型 | string | - | text |\n| inputValue | 当type为prompt时，输入框初始值 | string / number | - | - |\n| inputPlaceholder | 当type为prompt时，输入框placeholder | string | - | 请输入内容 |\n| inputPattern | 当type为prompt时，输入框正则校验 | RegExp | - | - |\n| inputValidate | 当type为prompt时，输入框校验函数 | function | - | - |\n| inputError | 当type为prompt时，输入框检验不通过时的错误提示文案 | string | - | 输入的数据不合法 |\n| confirmButtonText | 确定按钮文案 | string | - | 确定 |\n| cancelButtonText | 取消按钮文案 | string | - | 取消 |\n| zIndex | 弹窗层级 | number | - | 99 |\n| selector | 指定唯一标识 | string | - | '' |\n",
|
|
19429
19456
|
"props": [],
|
|
19430
19457
|
"events": [],
|
|
@@ -19439,7 +19466,7 @@
|
|
|
19439
19466
|
"category": "未分类",
|
|
19440
19467
|
"description": "`useImagePreview` 用于函数式调用 `wd-image-preview`。",
|
|
19441
19468
|
"descriptionZh": "`useImagePreview` 用于函数式调用 `wd-image-preview`。",
|
|
19442
|
-
"since": "2.0.
|
|
19469
|
+
"since": "2.0.4",
|
|
19443
19470
|
"doc": "# useImagePreview\n\n`useImagePreview` 用于函数式调用 `wd-image-preview`。\n\n## 基础用法\n\n页面中先声明 `wd-image-preview`，再通过 `useImagePreview()` 打开图片预览。\n\n```html\n<wd-image-preview />\n<wd-button @click=\"openPreview\">预览图片</wd-button>\n```\n\n```ts\nimport { useImagePreview } from '@/uni_modules/wot-ui'\n\nconst { previewImage } = useImagePreview()\n\nconst openPreview = () => {\n previewImage({\n images: [\n 'https://example.com/image1.jpg',\n 'https://example.com/image2.jpg',\n 'https://example.com/image3.jpg'\n ],\n startPosition: 0\n })\n}\n```\n\n## 传入图片数组\n\n可以直接传入图片 URL 数组，简化调用方式。\n\n```typescript\npreviewImage([\n 'https://example.com/image1.jpg',\n 'https://example.com/image2.jpg'\n])\n```\n\n## 多实例调用\n\n通过 `selector` 区分页面内多个实例，`useImagePreview(selector)` 会绑定到指定实例。`selector` 的值需要与 `wd-image-preview` 组件上的 `selector` 属性保持一致。\n\n```html\n<wd-button @click=\"handleSlotPreview\">自定义插槽</wd-button>\n\n<wd-image-preview selector=\"slot-preview\">\n <!-- 自定义指示器 -->\n <template #indicator=\"{ current, total }\">\n <wd-swiper-nav :current=\"current\" :total=\"total\" type=\"dots-bar\" custom-style=\"bottom: 64px;\" />\n </template>\n <!-- 底部自定义内容 -->\n <template #default=\"{ current }\">\n <view class=\"custom-bottom\">\n <text class=\"custom-bottom__text\">{{ imageDescriptions[current] }}</text>\n </view>\n </template>\n</wd-image-preview>\n```\n\n```typescript\nimport { useImagePreview } from '@/uni_modules/wot-ui'\n\nconst { previewImage } = useImagePreview('slot-preview')\n\nconst images = [\n 'https://wot-ui.cn/assets/redpanda.jpg',\n 'https://wot-ui.cn/assets/capybara.jpg'\n]\n\nconst imageDescriptions = ['小熊猫', '水豚']\n\nfunction handleSlotPreview() {\n previewImage({\n images,\n showIndex: false // 隐藏默认指示器\n })\n}\n```\n\n## API\n\n### useImagePreview\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 指定图片预览实例标识，传空字符串时使用默认实例 | string | `''` |\n\n### Methods\n\n函数式调用返回的对象包含以下方法：\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| previewImage | 打开图片预览 | `options: ImagePreviewOptions` \\| `string[]` |\n| closeImagePreview | 关闭图片预览 | - |\n\n### ImagePreviewOptions\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| images | 图片 URL 数组 | `string[]` | `[]` |\n| startPosition | 起始位置索引 | `number` | `0` |\n| showIndex | 是否显示页码 | `boolean` | `true` |\n| loop | 是否循环播放 | `boolean` | `true` |\n| closeable | 是否显示关闭按钮 | `boolean` | `true` |\n| closeIcon | 关闭图标名称 | `string` | `close` |\n| closeIconPosition | 关闭图标位置，可选值为 `top-left`、`top-right` | `string` | `top-right` |\n| closeOnClick | 是否点击图片或遮罩时关闭 | `boolean` | `true` |\n| showMenuByLongpress | 开启长按图片显示识别小程序码菜单 | `boolean` | `true` |\n| zIndex | zIndex 层级 | `number` | `1000` |\n| onOpen | 打开时的回调 | `() => void` | - |\n| onClose | 关闭时的回调 | `() => void` | - |\n| onChange | 切换图片时的回调 | `(index: number) => void` | - |\n| onLongPress | 长按图片时的回调 | `(image: string) => void` | - |\n",
|
|
19444
19471
|
"props": [],
|
|
19445
19472
|
"events": [],
|
|
@@ -19454,7 +19481,7 @@
|
|
|
19454
19481
|
"category": "未分类",
|
|
19455
19482
|
"description": "用于便捷地调用 Notify 消息通知组件。",
|
|
19456
19483
|
"descriptionZh": "用于便捷地调用 Notify 消息通知组件。",
|
|
19457
|
-
"since": "2.0.
|
|
19484
|
+
"since": "2.0.4",
|
|
19458
19485
|
"doc": "# useNotify\n\n用于便捷地调用 Notify 消息通知组件。\n\n## 基本用法\n\n需要在页面中引入 wd-notify 组件作为挂载点。\n\n```html\n<wd-notify />\n<wd-button @click=\"showNotify\">notify</wd-button>\n```\n\n```ts\nimport { useNotify } from '@/uni_modules/wot-ui'\n\nconst { showNotify } = useNotify()\n\nfunction showNotify() {\n showNotify('通知内容')\n}\n```\n\n## 通知类型\n\n支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。\n\n```ts\n// 主要通知\nshowNotify({ type: 'primary', message: '通知内容' })\n\n// 成功通知\nshowNotify({ type: 'success', message: '通知内容' })\n\n// 危险通知\nshowNotify({ type: 'danger', message: '通知内容' })\n\n// 警告通知\nshowNotify({ type: 'warning', message: '通知内容' })\n```\n\n## 自定义样式\n\n```ts\nshowNotify({\n message: '自定义颜色',\n color: '#ad0000',\n background: '#ffe1e1'\n})\n\nshowNotify({\n message: '自定义位置',\n position: 'bottom'\n})\n\nshowNotify({\n message: '自定义时长',\n duration: 1000\n})\n```\n\n## API\n\n### Methods\n\n| 方法名称 | 说明 | 参数 | \n|---------|------|------|\n| showNotify | 展示提示 | `NotifyOptions` / `string` |\n| closeNotify | 关闭提示 | - |\n| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `NotifyOptions` |\n| resetNotifyDefaultOptions | 重置默认配置，影响所有的 `showNotify` 调用 | - |\n\n### Options\n\n| 参数 | 说明 | 类型 | 可选值 | 默认值 |\n|-----|------|------|--------|--------|\n| type | 类型 | NotifyType | `primary` `success` `warning` `danger` | `danger` |\n| message | 展示文案，支持通过\\n换行 | string | - | - |\n| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | number | - | 3000 |\n| zIndex | 层级 | number | - | 99 |\n| position | 弹出位置 | NotifyPosition | `top` `bottom` | `top` |\n| color | 字体颜色 | string | - | - |\n| background | 背景颜色 | string | - | - |\n| safeHeight | 顶部安全高度 | number / string | - | - |\n| onClick | 点击时的回调函数 | (event: MouseEvent) => void | - | - |\n| onClosed | 关闭时的回调函数 | () => void | - | - |\n| onOpened | 展示后的回调函数 | () => void | - | - |\n",
|
|
19459
19486
|
"props": [],
|
|
19460
19487
|
"events": [],
|
|
@@ -19469,8 +19496,8 @@
|
|
|
19469
19496
|
"category": "未分类",
|
|
19470
19497
|
"description": "用于便捷地调用 Toast 轻提示组件。",
|
|
19471
19498
|
"descriptionZh": "用于便捷地调用 Toast 轻提示组件。",
|
|
19472
|
-
"since": "2.0.
|
|
19473
|
-
"doc": "# useToast\n\n用于便捷地调用 Toast 轻提示组件。\n\n## 基本用法\n\n需要在页面中引入 wd-toast 组件作为挂载点。\n\n```html\n<wd-toast />\n<wd-button @click=\"showToast\">toast</wd-button>\n```\n\n```ts\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst toast = useToast()\n\nfunction showToast() {\n toast.show('提示信息')\n}\n```\n\n## 成功、异常、警告、常规\n\n```ts\ntoast.show('提示信息')\ntoast.success('操作成功')\ntoast.error('手机验证码输入错误，请重新输入')\ntoast.warning('提示信息')\ntoast.info('常规提示信息')\n```\n\n## 使用图标\n可以使用`iconClass`指定图标，结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。\n```ts\n// 使用组件库内部图标\ntoast.show({\n iconClass: 'star',\n msg: '使用组件库内部图标'\n})\n```\n\n```ts\n// 使用自定义图标\ntoast.show({\n iconClass: 'kehuishouwu',\n classPrefix: 'fish',\n msg: '使用自定义图标'\n})\n```\n\n## loading 提示\n\n`loading` 开启后需要用户手动关闭，关闭可以调用 `close`，或者再调用一次 toast 提示，因为 toast 只会存在一个，新的 toast 会自动顶掉旧的 toast。\n\n```ts\ntoast.loading('加载中...')\n```\n\n修改 loading 指示器类型：\n\n```ts\ntoast.loading({\n loadingType: 'ring',\n msg: '加载中...'\n})\n```\n\n手动关闭 loading:\n```ts\ntoast.close()\n```\n\n## API\n\n### Methods\n\n| 方法名称 | 说明 | 参数 | \n| -------- | --------------------- | ------- | \n| show | 展示提示 | options | \n| success | 成功提示 | options | \n| error | 错误提示 | options | \n| info | 常规提示 | options | \n| warning | 警告提示 | options | \n| loading | 加载提示 | options | \n| close | 手动关闭消息提示框 | - | \n\n### Options\n\n| 参数 | 说明 | 类型 | 可选值 | 默认值 |\n|--------------|----------------------------------------|----------|---------------------------|------------|\n| msg | 消息内容 | string | - | '' |\n| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 |\n| direction | 排版方向 | string | vertical / horizontal | horizontal |\n| iconName | 图标类型 | string | success / error / warning | '' |\n| iconSize | 左侧图标尺寸 | number | - | - |\n| iconClass | 自定义图标类名 | string | - | '' |\n| classPrefix | 类名前缀 | string | - | 'wd-icon' |\n| position | 提示信息框的位置 | string | top / middle / bottom | middle-top |\n| zIndex | toast 层级 | number | - | 100 |\n| loadingType | 加载中图标类型 | string | ring | outline |\n| loadingColor | 加载中图标颜色 | string | - | #4D80F0 |\n| selector | 指定唯一标识 | string | - | '' |\n| cover | 是否存在一个透明遮罩 | boolean | - | false |\n| opened | 完全展示后的回调函数 | Function | - | - |\n| closed | 完全关闭后的回调函数 | Function | - | - |\n",
|
|
19499
|
+
"since": "2.0.4",
|
|
19500
|
+
"doc": "# useToast\n\n用于便捷地调用 Toast 轻提示组件。\n\n## 基本用法\n\n需要在页面中引入 wd-toast 组件作为挂载点。\n\n```html\n<wd-toast />\n<wd-button @click=\"showToast\">toast</wd-button>\n```\n\n```ts\nimport { useToast } from '@/uni_modules/wot-ui'\n\nconst toast = useToast()\n\nfunction showToast() {\n toast.show('提示信息')\n}\n```\n\n## 成功、异常、警告、常规\n\n```ts\ntoast.show('提示信息')\ntoast.success('操作成功')\ntoast.error('手机验证码输入错误，请重新输入')\ntoast.warning('提示信息')\ntoast.info('常规提示信息')\n```\n\n## 使用图标\n可以使用`iconClass`指定图标，结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。\n```ts\n// 使用组件库内部图标\ntoast.show({\n iconClass: 'star',\n msg: '使用组件库内部图标'\n})\n```\n\n```ts\n// 使用自定义图标\ntoast.show({\n iconClass: 'kehuishouwu',\n classPrefix: 'fish',\n msg: '使用自定义图标'\n})\n```\n\n## loading 提示\n\n`loading` 开启后需要用户手动关闭，关闭可以调用 `close`，或者再调用一次 toast 提示，因为 toast 只会存在一个，新的 toast 会自动顶掉旧的 toast。\n\n```ts\ntoast.loading('加载中...')\n```\n\n修改 loading 指示器类型：\n\n```ts\ntoast.loading({\n loadingType: 'ring',\n msg: '加载中...'\n})\n```\n\n手动关闭 loading:\n```ts\ntoast.close()\n```\n\n## API\n\n### Methods\n\n| 方法名称 | 说明 | 参数 | \n| -------- | --------------------- | ------- | \n| show | 展示提示 | options | \n| success | 成功提示 | options | \n| error | 错误提示 | options | \n| info | 常规提示 | options | \n| warning | 警告提示 | options | \n| loading | 加载提示 | options | \n| close | 手动关闭消息提示框 | - | \n\n### Options\n\n| 参数 | 说明 | 类型 | 可选值 | 默认值 |\n|--------------|----------------------------------------|----------|---------------------------|------------|\n| msg | 消息内容 | string | - | '' |\n| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 |\n| direction | 排版方向 | string | vertical / horizontal | horizontal |\n| iconName | 图标类型 | string | success / error / warning | '' |\n| iconSize | 左侧图标尺寸 | number | - | - |\n| iconClass | 自定义图标类名 | string | - | '' |\n| classPrefix | 类名前缀 | string | - | 'wd-icon' |\n| cssIcon | CSS 图标 | boolean \\| string | - | false |\n| position | 提示信息框的位置 | string | top / middle / bottom | middle-top |\n| zIndex | toast 层级 | number | - | 100 |\n| loadingType | 加载中图标类型 | string | ring | outline |\n| loadingColor | 加载中图标颜色 | string | - | #4D80F0 |\n| selector | 指定唯一标识 | string | - | '' |\n| cover | 是否存在一个透明遮罩 | boolean | - | false |\n| opened | 完全展示后的回调函数 | Function | - | - |\n| closed | 完全关闭后的回调函数 | Function | - | - |\n",
|
|
19474
19501
|
"props": [],
|
|
19475
19502
|
"events": [],
|
|
19476
19503
|
"slots": [],
|
|
@@ -19484,7 +19511,7 @@
|
|
|
19484
19511
|
"category": "未分类",
|
|
19485
19512
|
"description": "用于处理文件上传和选择相关的逻辑。",
|
|
19486
19513
|
"descriptionZh": "用于处理文件上传和选择相关的逻辑。",
|
|
19487
|
-
"since": "2.0.
|
|
19514
|
+
"since": "2.0.4",
|
|
19488
19515
|
"doc": "# useUpload\n\n用于处理文件上传和选择相关的逻辑。\n\n## 基础用法\n\n```ts\nimport { useUpload } from '@/uni_modules/wot-ui'\n\nconst { startUpload, abort, chooseFile, UPLOAD_STATUS } = useUpload()\n\n// 选择文件\nconst files = await chooseFile({\n accept: 'image',\n multiple: true,\n maxCount: 9\n})\n\n// 开始上传\nconst file = {\n url: 'file://temp/image.png',\n status: UPLOAD_STATUS.PENDING,\n percent: 0\n}\n\nstartUpload(file, {\n action: 'https://upload-url',\n onSuccess(res) {\n console.log('上传成功', res)\n },\n onError(err) {\n console.log('上传失败', err) \n },\n onProgress(progress) {\n console.log('上传进度', progress)\n }\n})\n\n// 中断上传\nabort()\n```\n\n## API\n\n### 方法\n\n| 方法名 | 说明 | 参数 | 返回值 | 最低版本 |\n|-------|------|------|--------|---------|\n| startUpload | 开始上传文件 | file: UploadFileItem, options: UseUploadOptions | UniApp.UploadTask \\| void | - |\n| abort | 中断上传 | task?: UniApp.UploadTask | void | - |\n| chooseFile | 选择文件 | options: ChooseFileOption | Promise<ChooseFile[]> | - |\n\n### UseUploadOptions\n\n| 参数 | 说明 | 类型 | 默认值 | 最低版本 |\n|-----|------|------|--------|---------|\n| action | 上传地址 | string | - | - |\n| header | 请求头 | Record<string, any> | {} | - |\n| name | 文件对应的 key | string | 'file' | - |\n| formData | 其它表单数据 | Record<string, any> | {} | - |\n| fileType | 文件类型 | 'image' \\| 'video' \\| 'audio' | 'image' | - |\n| statusCode | 成功状态码 | number \\| number[] | 200 | - |\n| uploadMethod | 自定义上传方法 | UploadMethod | - | - |\n| onSuccess | 上传成功回调 | Function | - | - |\n| onError | 上传失败回调 | Function | - | - |\n| onProgress | 上传进度回调 | Function | - | - |\n\n### ChooseFileOption\n\n| 参数 | 说明 | 类型 | 默认值 | 最低版本 |\n|-----|------|------|--------|---------|\n| multiple | 是否支持多选文件 | boolean | false | - |\n| sizeType | 所选的图片的尺寸 | Array | ['original', 'compressed'] | - |\n| sourceType | 选择文件的来源 | Array | ['album', 'camera'] | - |\n| maxCount | 最大可选数量 | number | 9 | - |\n| accept | 接受的文件类型 | 'image' \\| 'video' \\| 'media' \\| 'file' \\| 'all' | 'image' | - |\n| compressed | 是否压缩视频 | boolean | true | - |\n| maxDuration | 视频最大时长(秒) | number | 60 | - |\n| camera | 摄像头朝向 | 'back' \\| 'front' | 'back' | - |\n| extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - |\n\n## 文件选择数量限制\n\n不同平台对文件选择数量有不同的限制，这些限制由 uni-app 平台 API 本身决定：\n\n### 微信平台\n\n| 选择方法 | 最大数量 | 说明 | 适用场景 |\n|---------|---------|------|----------|\n| `chooseMedia` | 20 | 选择图片和视频时的最大数量限制 | accept 为 `image`、`video`、`media` 时使用 |\n| `chooseMessageFile` | 100 | 选择文件时的最大数量限制 | accept 为 `file`、`all` 时使用 |\n\n### H5平台\n\n| 选择方法 | 最大数量 | 说明 | 适用场景 |\n|---------|---------|------|----------|\n| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |\n| `chooseVideo` | 1 | 不支持多选，只能选择单个视频文件 | accept 为 `video` 时使用 |\n| `chooseFile` | 100 | 选择文件时的最大数量限制 | accept 为 `all` 时使用 |\n\n::: warning H5平台特别说明\ncount 值在 H5 平台的表现基于浏览器本身的规范。目前测试结果来看，只能限制单选/多选，并不能限制具体数量。并且，在实际的手机浏览器中很少有能够支持多选的。\n:::\n\n### 其他平台\n\n| 选择方法 | 最大数量 | 说明 | 适用场景 |\n|---------|---------|------|----------|\n| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |\n| `chooseVideo` | 1 | 不支持多选，只能选择单个视频文件 | accept 为 `video` 时使用 |\n\n::: tip 提示\n- 微信平台优先使用 `chooseMedia` 和 `chooseMessageFile`，具有更高的选择数量限制\n- 视频选择在大多数平台都不支持多选\n- 实际可选择的数量还会受到 `maxCount` 参数的进一步限制\n:::\n",
|
|
19489
19516
|
"props": [],
|
|
19490
19517
|
"events": [],
|
|
@@ -19499,7 +19526,7 @@
|
|
|
19499
19526
|
"category": "未分类",
|
|
19500
19527
|
"description": "`useVideoPreview` 用于函数式调用 `wd-video-preview`。",
|
|
19501
19528
|
"descriptionZh": "`useVideoPreview` 用于函数式调用 `wd-video-preview`。",
|
|
19502
|
-
"since": "2.0.
|
|
19529
|
+
"since": "2.0.4",
|
|
19503
19530
|
"doc": "# useVideoPreview\n\n`useVideoPreview` 用于函数式调用 `wd-video-preview`。\n\n## 基础用法\n\n页面中先声明 `wd-video-preview`，再通过 `useVideoPreview()` 打开视频预览。\n\n```html\n<wd-video-preview />\n<wd-button @click=\"openPreview\">预览视频</wd-button>\n```\n\n```ts\nimport { useVideoPreview } from '@/uni_modules/wot-ui'\n\nconst { previewVideo } = useVideoPreview()\n\nconst openPreview = () => {\n previewVideo({\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n poster: 'https://wot-ui.cn/assets/panda.jpg',\n title: '视频预览'\n })\n}\n```\n\n## 传入预览对象\n\n可以直接传入 `PreviewVideo` 对象，最简配置只需要提供 `url`。\n\n```ts\npreviewVideo({\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4'\n})\n```\n\n## 多实例调用\n\n通过 `selector` 区分页面内多个实例，`useVideoPreview(selector)` 会绑定到指定实例。`selector` 的值需要与 `wd-video-preview` 组件上的 `selector` 属性保持一致。\n\n```html\n<wd-button @click=\"openMain\">默认实例</wd-button>\n<wd-button @click=\"openSub\">指定实例</wd-button>\n\n<wd-video-preview />\n<wd-video-preview selector=\"sub-preview\" />\n```\n\n```ts\nimport { useVideoPreview } from '@/uni_modules/wot-ui'\n\nconst { previewVideo } = useVideoPreview()\nconst { previewVideo: previewSubVideo } = useVideoPreview('sub-preview')\n\nfunction openMain() {\n previewVideo({\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n title: '默认实例'\n })\n}\n\nfunction openSub() {\n previewSubVideo({\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n title: '指定实例'\n })\n}\n```\n\n## 自定义配置\n\n通过 `VideoPreviewOptions` 可同时配置层级与打开、关闭回调。\n\n```ts\npreviewVideo({\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n poster: 'https://wot-ui.cn/assets/panda.jpg',\n title: '视频预览',\n zIndex: 1200,\n onOpen: () => {\n console.log('打开预览')\n },\n onClose: () => {\n console.log('关闭预览')\n }\n})\n```\n\n## API\n\n### useVideoPreview\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 指定视频预览实例标识，传空字符串时使用默认实例 | string | `''` |\n\n### Methods\n\n函数式调用返回的对象包含以下方法：\n\n| 方法名 | 说明 | 参数 |\n| --- | --- | --- |\n| previewVideo | 打开视频预览 | <code>options: VideoPreviewOptions | PreviewVideo</code> |\n| closeVideoPreview | 关闭视频预览 | - |\n\n### VideoPreviewOptions\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| url | 视频资源地址 | `string` | `''` |\n| poster | 视频封面地址 | `string` | `''` |\n| title | 视频标题 | `string` | `''` |\n| show | 是否显示预览层 | `boolean` | `false` |\n| zIndex | zIndex 层级 | `number` | `1000` |\n| onOpen | 打开时的回调 | `() => void` | - |\n| onClose | 关闭时的回调 | `() => void` | - |",
|
|
19504
19531
|
"props": [],
|
|
19505
19532
|
"events": [],
|
|
@@ -19514,7 +19541,7 @@
|
|
|
19514
19541
|
"category": "未分类",
|
|
19515
19542
|
"description": "视频预览组件，支持通过组件实例或 `useVideoPreview` 函数式调用打开全屏视频预览层。`useVideoPreview` 的独立用法与 API 说明见 [useVideoPreview](/component/use-video-preview)。",
|
|
19516
19543
|
"descriptionZh": "视频预览组件，支持通过组件实例或 `useVideoPreview` 函数式调用打开全屏视频预览层。`useVideoPreview` 的独立用法与 API 说明见 [useVideoPreview](/component/use-video-preview)。",
|
|
19517
|
-
"since": "2.0.
|
|
19544
|
+
"since": "2.0.4",
|
|
19518
19545
|
"doc": "# VideoPreview 视频预览\n\n视频预览组件，支持通过组件实例或 `useVideoPreview` 函数式调用打开全屏视频预览层。`useVideoPreview` 的独立用法与 API 说明见 [useVideoPreview](/component/use-video-preview)。\n\n::: warning 注意\n使用 `useVideoPreview()` 前，需要先在当前页面中声明一个 `wd-video-preview` 实例，否则无法建立注入关系。\n:::\n\n## 组件类型\n\n### useVideoPreview\n\n`useVideoPreview` 是 `wd-video-preview` 的推荐调用方式，适合在按钮点击、列表项点击等交互中直接拉起视频预览。详细说明见 [useVideoPreview](/component/use-video-preview)。\n\n### 基本用法\n\n对应当前 demo 页的用法是在页面中放置一个 `wd-video-preview` 实例，再通过 `previewVideo()` 打开预览。\n\n::: code-group\n\n```html [vue]\n<wd-button @click=\"open\">点击预览视频</wd-button>\n\n<wd-video-preview />\n```\n\n```ts [ts]\nimport { useVideoPreview } from '@/uni_modules/wot-ui/components/wd-video-preview'\nimport type { PreviewVideo } from '@/uni_modules/wot-ui/components/wd-video-preview/types'\n\nconst { previewVideo } = useVideoPreview()\n\nconst video: PreviewVideo = {\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n poster: 'https://wot-ui.cn/assets/panda.jpg',\n title: '视频预览'\n}\n\nfunction open() {\n previewVideo(video)\n}\n```\n\n:::\n\n## 特殊样式\n\n### 多实例调用\n\n当同一页面存在多个 `wd-video-preview` 实例时，可通过 `selector` 区分，并在 `useVideoPreview(selector)` 中传入相同标识。\n\n::: code-group\n\n```html [vue]\n<wd-button @click=\"openMain\">打开主预览</wd-button>\n<wd-button @click=\"openSub\">打开次预览</wd-button>\n\n<wd-video-preview />\n<wd-video-preview selector=\"sub-preview\" />\n```\n\n```ts [ts]\nimport { useVideoPreview } from '@/uni_modules/wot-ui/components/wd-video-preview'\n\nconst { previewVideo: openMainPreview } = useVideoPreview()\nconst { previewVideo: openSubPreview } = useVideoPreview('sub-preview')\n```\n\n:::\n\n### 自定义层级与回调\n\n函数式调用时可直接传入 `zIndex`、`onOpen`、`onClose`，组件会优先采用函数式传入的配置。\n\n```ts\npreviewVideo({\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n poster: 'https://wot-ui.cn/assets/panda.jpg',\n title: '视频预览',\n zIndex: 1200,\n onOpen: () => console.log('打开预览'),\n onClose: () => console.log('关闭预览')\n})\n```\n\n### 组件实例调用\n\n如果更偏向组件式控制，也可以通过 `ref` 调用实例方法 `open` 和 `close`。\n\n::: code-group\n\n```html [vue]\n<wd-video-preview ref=\"videoPreviewRef\" />\n<wd-button @click=\"openPreview\">打开预览</wd-button>\n```\n\n```ts [ts]\nimport { ref } from 'vue'\nimport type { VideoPreviewInstance, PreviewVideo } from '@/uni_modules/wot-ui/components/wd-video-preview/types'\n\nconst videoPreviewRef = ref<VideoPreviewInstance>()\n\nconst video: PreviewVideo = {\n url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',\n poster: 'https://wot-ui.cn/assets/panda.jpg',\n title: '视频预览'\n}\n\nfunction openPreview() {\n videoPreviewRef.value?.open(video)\n}\n```\n\n:::\n\n## VideoPreview Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| selector | 实例标识，用于区分多个视频预览实例 | `string` | `''` |\n| z-index | 预览层级 | `number` | `1000` |\n| on-open | 组件打开时的回调 | <code>() => void</code> | - |\n| on-close | 组件关闭时的回调 | <code>() => void</code> | - |\n| custom-style | 自定义根节点样式 | `string` | `''` |\n| custom-class | 自定义根节点样式类 | `string` | `''` |\n\n## VideoPreview Events\n\n| 事件名称 | 说明 | 参数 |\n| --- | --- | --- |\n| open | 打开预览时触发 | - |\n| close | 关闭预览时触发 | - |\n\n## VideoPreview Methods\n\n通过 `ref` 调用组件实例方法。\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| --- | --- | --- | --- |\n| open | 打开视频预览 | `video: PreviewVideo` | - |\n| close | 关闭视频预览 | - | - |\n\n## useVideoPreview\n\n`useVideoPreview` 的基础用法、多实例调用、方法与 `VideoPreviewOptions` 说明已单独整理到 [useVideoPreview](/component/use-video-preview)，组件文档这里不再重复展开。",
|
|
19519
19546
|
"props": [
|
|
19520
19547
|
{
|
|
@@ -19620,7 +19647,7 @@
|
|
|
19620
19647
|
"category": "未分类",
|
|
19621
19648
|
"description": "在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。",
|
|
19622
19649
|
"descriptionZh": "在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。",
|
|
19623
|
-
"since": "2.0.
|
|
19650
|
+
"since": "2.0.4",
|
|
19624
19651
|
"doc": "# Watermark 水印\n\n在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。\n\n## 组件类型\n\n### 局部文字水印\n\n通过 `content` 指定水印文字，并配合 `full-screen=\"false\"` 将水印限定在局部容器内。\n\n```html\n<view class=\"watermark-wrap\">\n\t<wd-watermark :full-screen=\"false\" content=\"wot-ui\"></wd-watermark>\n</view>\n```\n\n### 局部图片水印\n\n通过 `image` 指定图片地址，并使用 `image-width`、`image-height` 控制图片大小。\n\n::: warning 注意\n钉钉小程序仅支持网络图片，不支持 Base64 图片水印。\n:::\n\n```html\n<view class=\"watermark-wrap\">\n\t<wd-watermark :full-screen=\"false\" image=\"https://v2.wot-ui.cn/logo.svg\" :image-width=\"38\" :image-height=\"38\"></wd-watermark>\n</view>\n```\n\n### 局部多行文字水印\n\n增大 `width` 与 `height` 后，可以承载更长的文字内容，适合多行展示。\n\n```html\n<view class=\"watermark-wrap\">\n\t<wd-watermark :full-screen=\"false\" :width=\"150\" :height=\"150\" content=\"多行文字水印测试自动换行效果展示，这是一段很长的文本\"></wd-watermark>\n</view>\n```\n\n## 特殊样式\n\n### 全局水印\n\n默认情况下组件会铺满页面。结合 `layout` 可以在网格布局与错位布局之间切换，也可以在文字水印和图片水印之间切换。\n\n```html\n<wd-watermark content=\"wot-ui\" :width=\"130\" :height=\"140\" layout=\"grid\"></wd-watermark>\n```\n\n### 自定义层级和透明度\n\n通过 `opacity` 设置透明度，通过 `z-index` 控制水印层级。\n\n```html\n<wd-watermark content=\"wot-ui\" :opacity=\"0.4\" :z-index=\"1200\"></wd-watermark>\n```\n\n## Watermark Attributes\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| content | 水印文字内容 | `string` | `''` |\n| image | 水印图片地址，支持网络图片和 Base64 图片，钉钉小程序仅支持网络图片 | `string` | `''` |\n| image-height | 图片高度 | `number` | `100` |\n| image-width | 图片宽度 | `number` | `100` |\n| gutter-x | X 轴间距，单位为 `px` | `number` | `0` |\n| gutter-y | Y 轴间距，单位为 `px` | `number` | `0` |\n| width | 单个水印画布宽度，单位为 `px` | `number` | `100` |\n| height | 单个水印画布高度，单位为 `px` | `number` | `100` |\n| full-screen | 是否铺满整个页面 | `boolean` | `true` |\n| color | 水印文字颜色 | `string` | `#C9CBD4` |\n| size | 水印文字大小，单位为 `px` | `number` | `14` |\n| font-style | 水印字体样式，仅微信、支付宝和 H5 支持，可选值为 `normal`、`italic`、`oblique` | `WatermarkFontStyle` | `normal` |\n| font-weight | 水印字体粗细，仅微信、支付宝和 H5 支持 | <code>string | number</code> | `normal` |\n| font-family | 水印字体系列，仅微信、支付宝和 H5 支持 | `string` | `PingFang SC` |\n| rotate | 水印旋转角度 | `number` | `-25` |\n| z-index | 水印层级 | `number` | `1100` |\n| opacity | 水印透明度，取值范围为 `0` 到 `1` | `number` | - |\n| layout | 水印布局，可选值为 `grid`、`staggered` | `WatermarkLayout` | `grid` |\n| custom-style | 自定义根节点样式 | `string` | `''` |\n| custom-class | 自定义根节点样式类 | `string` | `''` |\n\n",
|
|
19625
19652
|
"props": [
|
|
19626
19653
|
{
|
|
@@ -19794,33 +19821,8 @@
|
|
|
19794
19821
|
"highlights": []
|
|
19795
19822
|
},
|
|
19796
19823
|
{
|
|
19797
|
-
"version": "[2.0.0
|
|
19798
|
-
"summary": "[2.0.0
|
|
19799
|
-
"highlights": []
|
|
19800
|
-
},
|
|
19801
|
-
{
|
|
19802
|
-
"version": "[2.0.0-alpha.4](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.3...v2.0.0-alpha.4)",
|
|
19803
|
-
"summary": "[2.0.0-alpha.4](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.3...v2.0.0-alpha.4) (2026-04-07)",
|
|
19804
|
-
"highlights": []
|
|
19805
|
-
},
|
|
19806
|
-
{
|
|
19807
|
-
"version": "[2.0.0-alpha.3](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.2...v2.0.0-alpha.3)",
|
|
19808
|
-
"summary": "[2.0.0-alpha.3](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.2...v2.0.0-alpha.3) (2026-04-06)",
|
|
19809
|
-
"highlights": []
|
|
19810
|
-
},
|
|
19811
|
-
{
|
|
19812
|
-
"version": "[2.0.0-alpha.2](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.1...v2.0.0-alpha.2)",
|
|
19813
|
-
"summary": "[2.0.0-alpha.2](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2026-04-06)",
|
|
19814
|
-
"highlights": []
|
|
19815
|
-
},
|
|
19816
|
-
{
|
|
19817
|
-
"version": "[2.0.0-alpha.1](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.0...v2.0.0-alpha.1)",
|
|
19818
|
-
"summary": "[2.0.0-alpha.1](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.0...v2.0.0-alpha.1) (2026-04-06)",
|
|
19819
|
-
"highlights": []
|
|
19820
|
-
},
|
|
19821
|
-
{
|
|
19822
|
-
"version": "[2.0.0-alpha.0](https://github.com/wot-ui/wot-ui/compare/v1.14.0...v2.0.0-alpha.0)",
|
|
19823
|
-
"summary": "[2.0.0-alpha.0](https://github.com/wot-ui/wot-ui/compare/v1.14.0...v2.0.0-alpha.0) (2026-04-06)",
|
|
19824
|
+
"version": "[2.0.0](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.21...v2.0.0)",
|
|
19825
|
+
"summary": "[2.0.0](https://github.com/wot-ui/wot-ui/compare/v2.0.0-alpha.21...v2.0.0) (2026-04-21)",
|
|
19824
19826
|
"highlights": []
|
|
19825
19827
|
}
|
|
19826
19828
|
]
|