diff --git a/docs/component/badge.md b/docs/component/badge.md index 89093827..9df1d9ff 100644 --- a/docs/component/badge.md +++ b/docs/component/badge.md @@ -98,7 +98,7 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|---------| -| value | 显示值 | string / number | - | - | - | - | +| v-model | 显示值 | string / number | - | - | - | - | | max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | - | - | - | | top | 为正时，角标向下偏移对应的像素 | number | - | - | - | | right | 为正时，角标向左偏移对应的像素 | number | - | - | - | diff --git a/docs/component/calendar.md b/docs/component/calendar.md index c3f0d1a8..deff2900 100644 --- a/docs/component/calendar.md +++ b/docs/component/calendar.md @@ -361,7 +361,7 @@ function handleConfirm4({ value }) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ---------------------- | --------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | -| value | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | +| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | | type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | | min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | | max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - | diff --git a/docs/component/calendarView.md b/docs/component/calendarView.md index 25ed1de7..22e86c18 100644 --- a/docs/component/calendarView.md +++ b/docs/component/calendarView.md @@ -222,7 +222,7 @@ function handleChange({ value }) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ----------------- | ---------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | -| value | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | +| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | | type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | | min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | | max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - | diff --git a/docs/component/card.md b/docs/component/card.md index 5fd29c8f..443258f7 100644 --- a/docs/component/card.md +++ b/docs/component/card.md @@ -2,7 +2,6 @@ # Card 卡片 - ## 基本使用 通过 `title` 属性设置标题，默认插槽传入内容。 @@ -11,7 +10,9 @@ ```html 一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。 - 查看详情 + ``` @@ -21,25 +22,41 @@ ```html - - 2020-02-03服务到期 - 您可以去电脑上使用该服务 - + - joy + joy 智催评营销 - 高级版-快速吸粉 | 周期一年 + 高级版-快速吸粉 | 周期一年 - - 评价 - 立即使用 - + + ``` + ```scss -.content, .title { +.content, +.title { display: flex; flex-direction: row; justify-content: flex-start; @@ -58,24 +75,25 @@ ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|-----|------|-------|-------|--------| -| title | 卡片标题 | string | - | - | - | -| type | 卡片类型 | string | rectangle | - | - | + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ----- | -------- | ------ | --------- | ------ | -------- | +| title | 卡片标题 | string | - | - | - | +| type | 卡片类型 | string | rectangle | - | - | ## Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| default | 卡片内容 | - | -| title | 卡片标题 | - | -| footer | 底部操作内容 | - | +| name | 说明 | 最低版本 | +| ------- | ------------ | -------- | +| default | 卡片内容 | - | +| title | 卡片标题 | - | +| footer | 底部操作内容 | - | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根节点自定义样式 | - | -| custom-title-class | 标题自定义样式 | - | -| custom-content-class | 内容自定义样式 | - | -| custom-footer-class | 底部自定义样式 | - | +| 类名 | 说明 | 最低版本 | +| -------------------- | ---------------- | -------- | +| custom-class | 根节点自定义样式 | - | +| custom-title-class | 标题自定义样式 | - | +| custom-content-class | 内容自定义样式 | - | +| custom-footer-class | 底部自定义样式 | - | diff --git a/docs/component/cell.md b/docs/component/cell.md index ba5332fe..642a6491 100644 --- a/docs/component/cell.md +++ b/docs/component/cell.md @@ -1,7 +1,6 @@ -# Cell单格 - +# Cell 单格 ## 基本用法 @@ -20,13 +19,15 @@ 设置 `icon` 属性，值可以为 Icon 章节中的图标名，也可以通过 icon 的 slot 自定义图标位置。 -> 自定义图标，如果有多个cell，需保证所有图标的宽度是一致的且垂直居中。使用 icon 属性且为 Icon 章节的字体图标，则宽度会自动一致且垂直居中；cell图标的大小是宽16px，高16px，large 尺寸图标宽度18px，高度18px，距离右侧文字距离15px。如果使用插槽，可以通过`custom-icon-class`进行设置。 +> 自定义图标，如果有多个 cell，需保证所有图标的宽度是一致的且垂直居中。使用 icon 属性且为 Icon 章节的字体图标，则宽度会自动一致且垂直居中；cell 图标的大小是宽 16px，高 16px，large 尺寸图标宽度 18px，高度 18px，距离右侧文字距离 15px。如果使用插槽，可以通过`custom-icon-class`进行设置。 ```html - + ``` @@ -64,7 +65,7 @@ ## 展示边框线 -在 `wd-cell-group` 上设置 `border` 属性，会给每个cell加上边框，最后一个cell则不展示边框，其他具有 `cell` 类型的表单组件也支持边框展示，如 input、picker。 +在 `wd-cell-group` 上设置 `border` 属性，会给每个 cell 加上边框，最后一个 cell 则不展示边框，其他具有 `cell` 类型的表单组件也支持边框展示，如 input、picker。 ```html @@ -78,9 +79,10 @@ 通过设置 `clickable` 开启点击反馈，之后可以监听`click`事件。 ```html - + ``` + ```typescript import { useToast } from '@/uni_modules/wot-design-uni' const toast = useToast() @@ -98,7 +100,7 @@ function showToast() { ```html - + ``` 可以只设置 `is-link` 用于展示右箭头和点击态。 @@ -124,6 +126,7 @@ function showToast() { ``` + ```typescript const rate = ref(0) @@ -138,9 +141,10 @@ function handleRateChange({ value }) { ```html - + ``` + ```typescript const slider = ref('') function handleSliderChange({ value }) { @@ -158,7 +162,7 @@ function handleSliderChange({ value }) { ## 自定义内容 -`cell` 提供了 `icon`、`title`、`label`和默认value的插槽。 +`cell` 提供了 `icon`、`title`、`label`和默认 value 的插槽。 ```html @@ -174,10 +178,12 @@ function handleSliderChange({ value }) { 订购 - - 标题文字 - 25天后到期 - + ``` @@ -221,66 +227,67 @@ function handleSwitchChange({ value }) { ## CellGroup Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|--------| -| title | 分组标题 | string | - | - | - | -| value | 分组右侧内容 | string | - | - | - | -| border | 是否展示边框线 | string | - | - | - | -| use-slot | 分组启用插槽 | boolean | - | false | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| -------- | -------------- | ------- | ------ | ------ | -------- | +| title | 分组标题 | string | - | - | - | +| value | 分组右侧内容 | string | - | - | - | +| border | 是否展示边框线 | string | - | - | - | +| use-slot | 分组启用插槽 | boolean | - | false | - | ## Cell Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|--------| -| title | 标题 | string | - | - | - | -| value | 右侧内容 | string | - | - | - | -| icon | 图标类名 | string | - | - | - | -| label | 描述信息 | string | - | - | - | -| is-link | 是否为跳转链接 | boolean | - | false | - | -| to | 跳转地址 | string | - | - | - | -| clickable | 开启点击反馈，is-link默认开启 | boolean | - | false | - | -| replace | 跳转时是否替换栈顶页面 | boolean | - | false | - | -| size | 设置单元格大小 | string | large | - | - | -| title-width | 设置左侧标题宽度 | string | - | - | - | -| center | 是否垂直居中，默认顶部居中 | boolean | - | false | - | -| required | 表单属性，必填 | boolean | - | false | - | -| vertical | 表单属性，上下结构 | boolean | - | false | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ----------- | ------------------------------ | ------- | ------ | ------ | -------- | +| title | 标题 | string | - | - | - | +| value | 右侧内容 | string | - | - | - | +| icon | 图标类名 | string | - | - | - | +| label | 描述信息 | string | - | - | - | +| is-link | 是否为跳转链接 | boolean | - | false | - | +| to | 跳转地址 | string | - | - | - | +| clickable | 开启点击反馈，is-link 默认开启 | boolean | - | false | - | +| replace | 跳转时是否替换栈顶页面 | boolean | - | false | - | +| size | 设置单元格大小 | string | large | - | - | +| title-width | 设置左侧标题宽度 | string | - | - | - | +| center | 是否垂直居中，默认顶部居中 | boolean | - | false | - | +| required | 表单属性，必填 | boolean | - | false | - | +| vertical | 表单属性，上下结构 | boolean | - | false | - | ## Cell Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|--------|------|-----|---------| -| click | 当 clickable 或 is-link 为 true 时点击单元格触发 | - | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| -------- | ------------------------------------------------ | ---- | -------- | +| click | 当 clickable 或 is-link 为 true 时点击单元格触发 | - | - | ## CellGroup Slot -> CellGroup必须首先开启`use-slot`,插槽才生效。使用插槽时请通过外部自定义样式类来控制样式。 +> CellGroup 必须首先开启`use-slot`,插槽才生效。使用插槽时请通过外部自定义样式类来控制样式。 -| name | 说明 | 最低版本 | -|------|-----|---------| -| title | 分组标题 | - | -| value | 分组右侧内容 | - | +| name | 说明 | 最低版本 | +| ----- | ------------ | -------- | +| title | 分组标题 | - | +| value | 分组右侧内容 | - | ## Cell Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| title | 标题 | - | -| default | 右侧内容，使用时不需要设置slot="default" | - | -| icon | 图标 | - | -| label | 描述信息 | - | + +| name | 说明 | 最低版本 | +| ------- | ----------------------------------------- | -------- | +| title | 标题 | - | +| default | 右侧内容，使用时不需要设置 `#default` | - | +| icon | 图标 | - | +| label | 描述信息 | - | ## CellGroup 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根结点样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | -------- | +| custom-class | 根结点样式 | - | ## Cell 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根结点样式 | - | -| custom-icon-class | icon使用slot时的自定义样式 | - | -| custom-label-class | label使用slot时的自定义样式 | - | -| custom-value-class | value使用slot时的自定义样式 | - | -| custom-title-class | title使用slot时的自定义样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------------ | ------------------------------ | -------- | +| custom-class | 根结点样式 | - | +| custom-icon-class | icon 使用 slot 时的自定义样式 | - | +| custom-label-class | label 使用 slot 时的自定义样式 | - | +| custom-value-class | value 使用 slot 时的自定义样式 | - | +| custom-title-class | title 使用 slot 时的自定义样式 | - | diff --git a/docs/component/checkbox.md b/docs/component/checkbox.md index f89f41ae..13c617de 100644 --- a/docs/component/checkbox.md +++ b/docs/component/checkbox.md @@ -5,10 +5,10 @@ ## 基本用法 -`value` 为绑定值，通过 `v-model:value` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。 +`value` 为绑定值，通过 `v-model` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。 ```html -单选框1 +单选框1 ``` ```typescript const value = ref(true) @@ -23,8 +23,8 @@ function handleChange1({value}) { 修改 `shape` 属性，可选值为 'circle'、'square'、'button'，默认为 'circle'。 ```html -沃特 -沃特 +沃特 +沃特 ``` ## 修改选中的颜色 @@ -33,7 +33,7 @@ function handleChange1({value}) { ```html 沃特 @@ -50,7 +50,7 @@ const value = ref(true) ```html @@ -64,8 +64,8 @@ const value = ref(true) ```html - 沃特 - 商家后台 + 沃特 + 商家后台 ``` ```typescript @@ -77,8 +77,8 @@ const value = ref([]) ```html - 沃特 - 商家后台 + 沃特 + 商家后台 ``` @@ -86,13 +86,13 @@ const value = ref([]) ```html - 选项一 - 选项二 - 选项三 - 选项四 - 选项五 - 选项六 - 选项七 + 选项一 + 选项二 + 选项三 + 选项四 + 选项五 + 选项六 + 选项七 ``` @@ -108,8 +108,8 @@ const value2 = ref(['1']) ```html - 沃特 - 商家后台 + 沃特 + 商家后台 ``` @@ -123,8 +123,8 @@ const value = ref(['jingmai']) ```html - 沃特 - 商家后台 + 沃特 + 商家后台 ``` @@ -137,10 +137,10 @@ const value = ref(['jingmai']) ```html - 京东 - 沃特 - 商家后台 - 营销中心 + 京东 + 沃特 + 商家后台 + 营销中心 ``` ```typescript @@ -154,8 +154,8 @@ const value = ref(['jd']) ```html - 沃特 - 商家后台 + 沃特 + 商家后台 ``` @@ -163,7 +163,7 @@ const value = ref(['jd']) | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|-----|------|-------|-------|--------| -| value | 单选框选中时的值 | string / number / boolean | - | - | - | +| v-model | 单选框选中时的值 | string / number / boolean | - | - | - | | shape | 单选框形状 | string | circle / square / button | circle | - | | checked-color | 选中的颜色 | string | - | #4D80F0 | - | | disabled | 禁用 | boolean | - | false | - | @@ -177,7 +177,7 @@ const value = ref(['jd']) | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| -| value | 绑定值 | Array | - | - | - | +| v-model | 绑定值 | Array | - | - | - | | shape | 单选框形状 | string | circle / square / button | circle | - | | cell | 表单模式 | boolean | - | false | - | | checked-color | 选中的颜色 | string | - | #4D80F0 | - | diff --git a/docs/component/colPicker.md b/docs/component/colPicker.md index d27ea719..4213bb19 100644 --- a/docs/component/colPicker.md +++ b/docs/component/colPicker.md @@ -539,7 +539,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ | ------- | -------- | -| value | 选中项 | array | - | - | - | +| v-model | 选中项 | array | - | - | - | | columns | 选择器数据，二维数组 | array | - | - | - | | value-key | 选项对象中，value 对应的 key | string | - | value | - | | label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | diff --git a/docs/component/collapse.md b/docs/component/collapse.md index c12efc4a..f8f023c3 100644 --- a/docs/component/collapse.md +++ b/docs/component/collapse.md @@ -2,34 +2,28 @@ # Collapse 折叠面板 - ## 基本使用 -`value` 为绑定值，可以为 array 类型（普通折叠）、 string 类型（手风琴）和 boolean 类型（收起展开查看更多）。CollapseItem 的 `title` 和 `name` 为必填。`name` 用于标识该折叠栏。 -##由于微信小程序非双向绑定，因此需要事件手动赋值到当前页面## +`value` 为绑定值，可以为 array 类型（普通折叠）、 string 类型（手风琴）和 boolean 类型（收起展开查看更多）。CollapseItem 的 `title` 和 `name` 为必填。`name` 用于标识该折叠栏。 ##由于微信小程序非双向绑定，因此需要事件手动赋值到当前页面## + ```typescript page({ data: { - value: [ 'item1' ] + value: ['item1'] }, - handleChange (event) { + handleChange(event) { this.setData({ value: event.detail.value }) } }) ``` + ```html - - 这是一条简单的示例文字。 - - - 这是一条简单的示例文字。 - - - 这是一条简单的示例文字。 - + 这是一条简单的示例文字。 + 这是一条简单的示例文字。 + 这是一条简单的示例文字。 ``` @@ -39,15 +33,9 @@ page({ ```html - - 这是一条简单的示例文字。 - - - 这是一条简单的示例文字。 - - - 这是一条简单的示例文字。 - + 这是一条简单的示例文字。 + 这是一条简单的示例文字。 + 这是一条简单的示例文字。 ``` @@ -57,15 +45,9 @@ page({ ```html - - 这是一条简单的示例文字。 - - - 这是一条简单的示例文字。 - - - 这是一条简单的示例文字。 - + 这是一条简单的示例文字。 + 这是一条简单的示例文字。 + 这是一条简单的示例文字。 ``` @@ -78,59 +60,67 @@ Collapse 可以单独使用，通过设置 `viewmore` 属性，将其转化为 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。 ``` + ## 查看更多-使用插槽 + Collapse 查看更多的模式下，可以使用插槽定义自己想要的折叠处样式，使用 `use-more-slot` 设置插槽开启。并且可以使用外部样式类 `custom-more-slot-class` 为自定义插槽设置样式。 + ```scss -.more-slot{ +.more-slot { color: red; } ``` + ```html 具名插槽：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。 - 显示全部 + ``` ## CollapseItem Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|--------| -| name | 折叠栏的标识符 | string | - | - | - | -| title | 折叠栏的标题 | string | - | - | - | -| disabled | 禁用折叠栏 | boolean | - | false | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| -------- | -------------- | ------- | ------ | ------ | -------- | +| name | 折叠栏的标识符 | string | - | - | - | +| title | 折叠栏的标题 | string | - | - | - | +| disabled | 禁用折叠栏 | boolean | - | false | - | ## Collapse Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|--------| -| value | 绑定值 | string / array / boolean | - | - | - | -| accordion | 手风琴 | boolean | - | false | - | -| viewmore | 查看更多的折叠面板 | boolean | - | false | - | -| useMoreSlot | 查看更多的自定义插槽使用标志 | boolean | - | false | - | -| line-num | 查看更多的折叠面板，收起时的显示行数 | number | - | 2 | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ----------- | ------------------------------------ | ------------------------ | ------ | ------ | -------- | +| value | 绑定值 | string / array / boolean | - | - | - | +| accordion | 手风琴 | boolean | - | false | - | +| viewmore | 查看更多的折叠面板 | boolean | - | false | - | +| useMoreSlot | 查看更多的自定义插槽使用标志 | boolean | - | false | - | +| line-num | 查看更多的折叠面板，收起时的显示行数 | number | - | 2 | - | ## Collapse Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|---------|-----|-----|---------| -| bind:change | 绑定值变化时触发 | `{ value }` | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| ----------- | ---------------- | ----------- | -------- | +| bind:change | 绑定值变化时触发 | `{ value }` | - | ## Collapse Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| more | 查看更多，便于开发者自定义查看更多类型的展开收起样式 | - | +| name | 说明 | 最低版本 | +| ---- | ---------------------------------------------------- | -------- | +| more | 查看更多，便于开发者自定义查看更多类型的展开收起样式 | - | ## CollapseItem 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | collapseItem根结点样式 | - | + +| 类名 | 说明 | 最低版本 | +| ------------ | ----------------------- | -------- | +| custom-class | collapseItem 根结点样式 | - | **注意：组件内插槽样式不生效，因此使用插槽时需注意添加外部样式类** ## Collapse 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|-----|---------| -| custom-class | collapse根结点样式 | - | -| custom-more-slot-class | 查看更多模式下的插槽外部自定义样式 | - | + +| 类名 | 说明 | 最低版本 | +| ---------------------- | ---------------------------------- | -------- | +| custom-class | collapse 根结点样式 | - | +| custom-more-slot-class | 查看更多模式下的插槽外部自定义样式 | - | diff --git a/docs/component/datetimePicker.md b/docs/component/datetimePicker.md index 41d3ff7e..0856bf5c 100644 --- a/docs/component/datetimePicker.md +++ b/docs/component/datetimePicker.md @@ -248,7 +248,7 @@ const displayFormatTabLabel = (items) => { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|---------| -| value | 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 Date | string / date / array | - | - | - | +| v-model | 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 Date | string / date / array | - | - | - | | default-value | 默认日期，类型保持与 value 一致，打开面板时面板自动选到默认日期 | string / date / array | - | - | - | | type | 选择器类型 | string | date / year-month / time | datetime | - | | loading | 加载中 | boolean | - | false | - | diff --git a/docs/component/datetimePickerView.md b/docs/component/datetimePickerView.md index 68196589..19bebe76 100644 --- a/docs/component/datetimePickerView.md +++ b/docs/component/datetimePickerView.md @@ -109,7 +109,7 @@ const filter = (type, values) => { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|---------| -| value | 选中项，当 type 为 time 时，类型为字符串，否则为 Date | string / date | - | - | +| v-model | 选中项，当 type 为 time 时，类型为字符串，否则为 Date | string / date | - | - | | type | 选择器类型 | string | date / year-month / time | datetime | - | | loading | 加载中 | boolean | - | false | - | | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - | diff --git a/docs/component/dropMenu.md b/docs/component/dropMenu.md index 3dc2b95f..87b9fc2b 100644 --- a/docs/component/dropMenu.md +++ b/docs/component/dropMenu.md @@ -6,7 +6,7 @@ ## 基础用法 -基础用法需要绑定 `value` 值以及 `options` 属性。 +基础用法需要绑定 `v-model` 值以及 `options` 属性。 `options` 属性是一个一维对象数组，数组项的数据结构为：label（选项文本），value（选项值），tip（选项说明）。 @@ -144,7 +144,7 @@ function confirm() { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | --------- | ---------------------------------------------------------------------- | --------------- | ------ | ------ | -------- | -| value | 当前选中项对应选中的 value | string / number | - | - | - | +| v-model | 当前选中项对应选中的 value | string / number | - | - | - | | disabled | 禁用菜单 | boolean | - | false | - | | options | 列表数据，对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - | | icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - | diff --git a/docs/component/form.md b/docs/component/form.md index 4d01d208..563f7c79 100644 --- a/docs/component/form.md +++ b/docs/component/form.md @@ -112,7 +112,7 @@ html 文件代码： - + 已阅读并同意 《借款额度合同及相关授权》 diff --git a/docs/component/input.md b/docs/component/input.md index a5a1d06e..9e8e956d 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -144,7 +144,7 @@ function handleChange(event) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|---------| | type | 类型 | string | text / textarea / number / digit / idcard | text | - | -| value | 绑定值 | string / number | - | - | - | +| v-model | 绑定值 | string / number | - | - | - | | placeholder | 占位文本 | string | - | 请输入... | - | | clearable | 显示清空按钮 | boolean | - | false | - | | maxlength | 原生属性，最大长度 | string | - | - | - | diff --git a/docs/component/inputNumber.md b/docs/component/inputNumber.md index 9360fbce..520e6493 100644 --- a/docs/component/inputNumber.md +++ b/docs/component/inputNumber.md @@ -93,7 +93,7 @@ function handleChange1({ value }) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| -| value | 绑定值 | number / string | - | - | - | +| v-model | 绑定值 | number / string | - | - | - | | min | 最小值 | number | - | 1 | - | | max | 最大值 | number | - | Infinity | - | | step | 步数 | number | - | 1 | - | diff --git a/docs/component/pagination.md b/docs/component/pagination.md index e4748a5d..521b1eae 100644 --- a/docs/component/pagination.md +++ b/docs/component/pagination.md @@ -45,7 +45,7 @@ function handleChange({ value }) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| -| value | 绑定值 | number | - | - | - | +| v-model | 绑定值 | number | - | - | - | | prev-text | 上一页按钮文字 | string | - | 上一页 | - | | next-text | 下一页按钮文字 | string | - | 下一页 | - | | total-page | 总页数，如果有total，则优先使用total计算页数 | number | - | `根据页数计算` | - | diff --git a/docs/component/popover.md b/docs/component/popover.md index c9676dd5..abd2b2e4 100644 --- a/docs/component/popover.md +++ b/docs/component/popover.md @@ -16,7 +16,7 @@ Popover 的属性与 [Tooltip](/#/components/tooltip) 很类似，因此对于 ```html - + 点击展示 @@ -56,7 +56,7 @@ function handleChange1({ show }) { **注意：iconClass 属性值为组件库内部的 icon 图标名。** ```html - + 列表 ``` @@ -124,7 +124,7 @@ function link(e) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ------------- | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -| value | 手动状态是否可见 | boolean | - | false | - | +| v-model | 手动状态是否可见 | boolean | - | false | - | | content | 显示的内容，也可以通过 `slot#content` 传入 | string/array（当模式为菜单模式时，content 属性格式为 Array） | - | - | - | | mode | 当前显示的模式，决定内容的展现形式 | string | normal（普通模式）/ menu（菜单模式） | normal | - | | placement | popover 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - | diff --git a/docs/component/radio.md b/docs/component/radio.md index 36ac036b..e72c3f1d 100644 --- a/docs/component/radio.md +++ b/docs/component/radio.md @@ -143,7 +143,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| -| value | 会自动选中value对应的单选框 | string / number / boolean | - | - | - | +| v-model | 会自动选中value对应的单选框 | string / number / boolean | - | - | - | | shape | 单选框形状 | string | dot / button / check | check | - | | size | 设置大小 | string | large | - | - | | checked-color | 选中的颜色 | string | - | #4D80F0 | - | diff --git a/docs/component/rate.md b/docs/component/rate.md index 2b1f5981..62df41a3 100644 --- a/docs/component/rate.md +++ b/docs/component/rate.md @@ -65,7 +65,7 @@ function changeValue({ value }) { | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|-----|------|-------|-------|--------| -| value | 当前分数 | number | - | - | - | +| v-model | 当前分数 | number | - | - | - | | num | 评分最大值 | number | - | 5 | - | | readonly | 是否只读 | boolean | - | false | - | | size | 图标大小 | string | - | 16px | - | diff --git a/docs/component/search.md b/docs/component/search.md index d9390db0..d91fa363 100644 --- a/docs/component/search.md +++ b/docs/component/search.md @@ -77,12 +77,14 @@ function change({ value }) { ```html - - - {{ searchType }} - - - + ``` diff --git a/docs/component/selectPicker.md b/docs/component/selectPicker.md index fea6f627..3a9780f6 100644 --- a/docs/component/selectPicker.md +++ b/docs/component/selectPicker.md @@ -1,7 +1,6 @@ -# SelectPicker 单复选选择器 - +# SelectPicker 单复选选择器 ## 基本用法 @@ -9,79 +8,60 @@ `columns` 设置数据源，为二维数组，每一列为一个一维数组，每个选项包含 `value`(选项值) 和 `label`(选项名称)； -`value` 设置选中项的值，数据类型为 `Array` | `String` `Number` 或 `Boolean`； - -监听 `bind:confirm` 事件，获取新值。 +`v-model` 设置选中项的值，数据类型为 `Array` | `String` `Number` 或 `Boolean`； ```html - + ``` ```typescript -Page({ - data: { - columns1: [ - { - value: '1', - label: '沃特' - }, - { - value: '2', - label: '京东金融' - }, - { - value: '3', - label: '京me' - } - ], - value: ['1'] +const columns = ref>([ + { + value: '101', + label: '男装' }, - handleChange (event) { - Toast('选择了' + event.detail.value) + { + value: '102', + label: '奢侈品' }, - handleConfirm (event) { - this.setData({ - value: event.detail.value - }) + { + value: '103', + label: '女装' } -}) +]) +const value = ref(['101']) + +function handleChange({ value }) { + toast.show('选择了' + value) +} ``` ## 类型切换 -`type` 默认值为 `checkbox`， 为默认值时，value值类型为 `Array` 类型 +`type` 默认值为 `checkbox`， 为默认值时，value 值类型为 `Array` 类型 -设置 `type` 值为 `radio` ，开启单选类型，value值类型为 `String` `Number` 或 `Boolean`。 +设置 `type` 值为 `radio` ，开启单选类型，value 值类型为 `String` `Number` 或 `Boolean`。 ```html - + ``` ```typescript -Page({ - data: { - columns1: [ - { - value: '1', - label: '沃特' - }, - { - value: '2', - label: '京东金融' - }, - { - value: '3', - label: '京me' - } - ], - value: '1' +const columns = ref>([ + { + value: '101', + label: '男装' }, - handleConfirm (event) { - this.setData({ - value: event.detail.value - }) + { + value: '102', + label: '奢侈品' + }, + { + value: '103', + label: '女装' } -}) +]) +const value = ref(['101']) ``` ## 禁用 @@ -89,7 +69,7 @@ Page({ 设置 `disabled` 属性。 ```html - + ``` ## 只读 @@ -97,7 +77,7 @@ Page({ 设置 `readonly` 属性。 ```html - + ``` ## 禁用选项 @@ -105,35 +85,26 @@ Page({ `columns` 每个选项支持 `disabled` 属性。 ```html - + ``` ```typescript -Page({ - data: { - columns1: [ - { - value: '1', - label: '沃特', - disabled: true - }, - { - value: '2', - label: '京东金融' - }, - { - value: '3', - label: '京me' - } - ], - value: ['1'] +const columns = ref>([ + { + value: '101', + label: '男装', + disabled: true }, - handleConfirm (event) { - this.setData({ - value: event.detail.value - }) + { + value: '102', + label: '奢侈品' + }, + { + value: '103', + label: '女装' } -}) +]) +const value = ref(['101']) ``` ## 展示格式化 @@ -141,90 +112,73 @@ Page({ 设置 `display-format` 属性，其类型为 `function`，接收当前选中项（当类型`checkbox`时 参数是 数组类型，类型为`radio` 时参数是 `String` `Number` 或 `Boolean` 类型）, 当前的选项数组 `columns`，返回要展示的字符串。 ```html - + ``` ```typescript -Page({ - data: { - columns1: [ - { - value: '1', - label: '沃特' - }, - { - value: '2', - label: '京东金融' - }, - { - value: '3', - label: '京me' - } - ], - value: ['1'], - - displayFormat (items, columns) { - let showValue = '' - columns.forEach(column => { - items.forEach((item, index) => { - if (column.value === item) { - showValue += `${item}: ${column.label} ${index + 1 < items.length ? '--' : ''} ` - } - }) - }) - return showValue - } +const columns = ref>([ + { + value: '101', + label: '男装', + disabled: true }, - handleConfirm (event) { - this.setData({ - value: event.detail.value - }) + { + value: '102', + label: '奢侈品' + }, + { + value: '103', + label: '女装' } -}) +]) +const value = ref(['101']) + +const displayFormat = (items, columns) => { + let showValue = '' + columns.forEach((column) => { + items.forEach((item, index) => { + if (column.value === item) { + showValue += `${item}: ${column.label} ${index + 1 < items.length ? '--' : ''} ` + } + }) + }) + return showValue +} ``` ## 确定前校验 -设置 `before-confirm` 函数，在用户点击`确定`按钮时，会执行 `before-confirm` 函数，并传入`value`(选中项 也就是当前选择的值） 和 `resolve` 参数，可以对 `value` 进行校验，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会关闭弹窗。 +设置 `before-confirm` 函数，在用户点击`确定`按钮时，会执行 `before-confirm` 函数，并传入`value`(选中项 也就是当前选择的值） 和 `resolve` 参数，可以对 `value` 进行校验，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会关闭弹窗。 ```html - + ``` ```typescript -Page({ - data: { - columns1: [ - { - value: '1', - label: '沃特' - }, - { - value: '2', - label: '京东金融' - }, - { - value: '3', - label: '京me' - } - ], - value: ['1'], - - beforeConfirm (value, resolve) { - if (value.length > 0) { - Toast.error('暂时无法选择商品') - resolve(false) - } else { - resolve(true) - } - } +const columns = ref>([ + { + value: '101', + label: '男装' }, - handleConfirm (event) { - this.setData({ - value: event.detail.value - }) + { + value: '102', + label: '奢侈品' + }, + { + value: '103', + label: '女装' } -}) +]) +const value = ref(['101']) + +const beforeConfirm = (value, resolve) => { + if (value.length > 0) { + toast.error('暂时无法选择商品') + resolve(false) + } else { + resolve(true) + } +} ``` ## 设置标题 @@ -232,7 +186,7 @@ Page({ 设置 `title` 属性，修改弹出层的标题。 ```html - + ``` ## 错误状态 @@ -240,7 +194,7 @@ Page({ 设置 `error` 属性，选择器的值显示为红色。 ```html - + ``` ## 必填样式 @@ -248,7 +202,7 @@ Page({ 设置 `required` 属性，展示必填样式。 ```html - + ``` ## 选择器大小 @@ -256,7 +210,7 @@ Page({ 通过设置 `size` 修改选择器大小，将 `size` 设置为 'large' 时字号为 16px。 ```html - + ``` ## 值靠右展示 @@ -264,7 +218,7 @@ Page({ 设置 `align-right` 属性，选择器的值靠右展示。 ```html - + ``` ## 可搜索 @@ -272,7 +226,7 @@ Page({ 设置 `filterable` 属性支持本地搜索，设置 `filter-placeholder` 属性设置搜索框的占位符。 ```html - + ``` ## 自定义选择器 @@ -281,115 +235,148 @@ Page({ ```html 当前选中项：{{customShow}} - + 默认唤起项 ``` ```typescript -Page({ - data: { - columns: [ - { - value: '1', - label: '沃特' - }, - { - value: '2', - label: '京东金融' - }, - { - value: '3', - label: '京me' - } - ], - value: [], - customShow: '' +const value = ref(['102']) + +const columns = ref>([ + { + value: '101', + label: '男装' }, - handleConfirm (event) { - this.setData({ - value: event.detail.value, - customShow: event.detail.selectedItems.map(item => { - return item.label - }).join(', ') - }) + { + value: '102', + label: '奢侈品' + }, + { + value: '103', + label: '女装' + }, + { + value: '104', + label: '鞋靴' + }, + { + value: '105', + label: '内衣配饰' + }, + { + value: '106', + label: '箱包' + }, + { + value: '107', + label: '美妆护肤' + }, + { + value: '108', + label: '个性清洁' + }, + { + value: '109', + label: '钟表珠宝' + }, + { + value: '110', + label: '手机' + }, + { + value: '111', + label: '数码' + }, + { + value: '112', + label: '电脑办公' } -}) +]) + +function handleConfirm({ value, selectedItems }) { + console.log(value) + customShow.value = selectedItems + .map((item) => { + return item.label + }) + .join(', ') +} ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|---------| -| value | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string | array / number / boolean / string | - | - | - | -| columns | 选择器数据，一维数组 | array | - | - | - | -| type | 单复选选择器类型 | string | checkbox / radio | checkbox | - | -| value-key | 选项对象中，value对应的 key | string | - | value | - | -| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | -| title | 弹出层标题 | string | - | - | - | -| label | 选择器左侧文案 | string | - | - | - | -| placeholder | 选择器占位符 | string | - | 请选择 | - | -| disabled | 禁用 | boolean | - | fasle | - | -| loading | 加载中 | boolean | - | false | - | -| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - | -| readonly | 只读 | boolean | - | false | - | -| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | -| confirm-button-text | 确认按钮文案 | string | - | 确认 | - | -| size | 设置选择器大小 | string | large | - | - | -| label-width | 设置左侧标题宽度 | string | - | 33% | - | -| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - | -| required | 必填样式 | boolean | - | false | - | -| align-right | 选择器的值靠右展示 | boolean | - | false | - | -| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - | -| select-size | 设置picker内部的选项组尺寸大小 （单/复选框） | string | large | - | - | -| min | 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - | -| max | 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - | -| checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - | -| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - | -| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - | -| name | form 表单中的字段名 | string | - | - | - | -| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | -| z-index | 弹窗层级 | number | - | 15 | 2.3.0 | -| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | 2.3.0 | -| filterable | 可搜索（目前只支持本地搜索） | boolean | - | false | 2.3.0 | -| filter-placeholder | 搜索框占位符 | string | - | 搜索 | 2.3.0 | -| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | -------- | +| value | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string | array / number / boolean / string | - | - | - | +| columns | 选择器数据，一维数组 | array | - | - | - | +| type | 单复选选择器类型 | string | checkbox / radio | checkbox | - | +| value-key | 选项对象中，value 对应的 key | string | - | value | - | +| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | +| title | 弹出层标题 | string | - | - | - | +| label | 选择器左侧文案 | string | - | - | - | +| placeholder | 选择器占位符 | string | - | 请选择 | - | +| disabled | 禁用 | boolean | - | fasle | - | +| loading | 加载中 | boolean | - | false | - | +| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - | +| readonly | 只读 | boolean | - | false | - | +| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | +| confirm-button-text | 确认按钮文案 | string | - | 确认 | - | +| size | 设置选择器大小 | string | large | - | - | +| label-width | 设置左侧标题宽度 | string | - | 33% | - | +| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - | +| required | 必填样式 | boolean | - | false | - | +| align-right | 选择器的值靠右展示 | boolean | - | false | - | +| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - | +| select-size | 设置 picker 内部的选项组尺寸大小 （单/复选框） | string | large | - | - | +| min | 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - | +| max | 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - | +| checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - | +| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - | +| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - | +| name | form 表单中的字段名 | string | - | - | - | +| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | +| z-index | 弹窗层级 | number | - | 15 | - | +| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - | +| filterable | 可搜索（目前只支持本地搜索） | boolean | - | false | - | +| filter-placeholder | 搜索框占位符 | string | - | 搜索 | - | +| ellipsis | 是否超出隐藏 | boolean | - | false | - | ## 选项数据结构 -| 键名 | 说明 | 类型 | 是否必填 | 最低版本 | -|------|-----|-----|---------|--------| -| value | 选项值 | string | 是 | - | -| label | 选项名 | string | 是 | - | -| disabled | 禁用选项 | boolean | 否 | - | +| 键名 | 说明 | 类型 | 是否必填 | 最低版本 | +| -------- | -------- | ------- | -------- | -------- | +| value | 选项值 | string | 是 | - | +| label | 选项名 | string | 是 | - | +| disabled | 禁用选项 | boolean | 否 | - | ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|--------|-----|-------|--------| -| bind:confirm | 点击确认时触发 | event.detail = { value, selectedItems }, checkbox 类型时 value 和 selectedItems 为数组，radio 类型为非数组 | - | -| bind:change | picker内选项更改时触发 | `{ value }`, checkbox 类型时 value 为数组，radio 类型为非数组 | - | -| bind:cancel | 点击关闭按钮或者蒙层时触发 | - | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| ------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- | +| confirm | 点击确认时触发 | event.detail = { value, selectedItems }, checkbox 类型时 value 和 selectedItems 为数组，radio 类型为非数组 | - | +| change | picker 内选项更改时触发 | `{ value }`, checkbox 类型时 value 为数组，radio 类型为非数组 | - | +| cancel | 点击关闭按钮或者蒙层时触发 | - | - | ## Methods -| 方法名称 | 说明 | 参数 | 最低版本 | -|---------|-----|-----|---------| -| open | 打开弹窗 | - | - | -| close | 关闭弹窗 | - | - | +| 方法名称 | 说明 | 参数 | 最低版本 | +| -------- | -------- | ---- | -------- | +| open | 打开弹窗 | - | - | +| close | 关闭弹窗 | - | - | ## Slots -| 插槽名称 | 说明 | 最低版本 | -|---------|-----|--------| -| default | 自定义展示 | - | -| label | 左侧插槽 | - | +| 插槽名称 | 说明 | 最低版本 | +| -------- | ---------- | -------- | +| default | 自定义展示 | - | +| label | 左侧插槽 | - | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根结点样式 | - | -| custom-label-class | label 外部自定义样式 | - | -| custom-value-class | value 外部自定义样式 | - | -| custom-content-class | 弹出层内容区域自定义样式 | - | +| 类名 | 说明 | 最低版本 | +| -------------------- | ------------------------ | -------- | +| custom-class | 根结点样式 | - | +| custom-label-class | label 外部自定义样式 | - | +| custom-value-class | value 外部自定义样式 | - | +| custom-content-class | 弹出层内容区域自定义样式 | - | diff --git a/docs/component/slider.md b/docs/component/slider.md index ae2916af..348ce8db 100644 --- a/docs/component/slider.md +++ b/docs/component/slider.md @@ -7,47 +7,29 @@ ## 基本用法 -`value` 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。 +`v-model` 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。 ```html - + ``` ```typescript -page({ - data: { - value: 30, - }, - handleChange (event) { - this.setData({ - value: event.detail.value - }) - } -}) +const value = ref(30) ``` ## 双滑块 双滑块模式下 `value` 为 `二元数组` 类型。 ```html - + ``` ```typescript -page({ - data: { - value: [10, 30], - }, - handleChange (event) { - this.setData({ - value: event.detail.value - }) - } -}) +const value = ref([10, 30]) ``` ## 最大值最小值 设置 `min` 最小值，`min` 最大值。 ```html - + ``` ## 隐藏文案 @@ -55,13 +37,13 @@ page({ 设置 `hide-label` 隐藏滑块当前值。 ```html - + ``` 设置 `hide-min-max` 隐藏最大最小值。 ```html - + ``` ## 禁用 @@ -69,13 +51,13 @@ page({ 设置 `disabled` 属性。 ```html - + ``` ## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| -| value | 滑块值，如果为array，则为双向滑块 | number / array | - | - | - | +| v-model | 滑块值，如果为array，则为双向滑块 | number / array | - | - | - | | hide-min-max | 是否显示左右的最大最小值 | boolean | - | false | - | | hide-label | 是否显示当前滑块值 | boolean | - | false | - | | disabled | 是否禁用 | boolean | - | false | - | @@ -84,15 +66,14 @@ page({ | step | 步进值 | number | - | 1 | - | | active-color | 进度条激活背景颜色 | string | - | linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%) | - | | inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - | -| name | form 表单中的字段名 | string | - | - | - | ## Events | 事件名称 | 说明 | 参数 | 最低版本 | |---------|-----|-----|---------| -| bind:dragstart | 开始移动时触发 | `{ value }` | - | -| bind:dragmove | 移动滑块时触发 | `{ value }` | - | -| bind:dragend | 移动结束时触发 | `{ value }` | - | +| dragstart | 开始移动时触发 | `{ value }` | - | +| dragmove | 移动滑块时触发 | `{ value }` | - | +| dragend | 移动结束时触发 | `{ value }` | - | ## 外部样式类 | 类名 | 说明 | 最低版本 | diff --git a/docs/component/sortButton.md b/docs/component/sortButton.md index c0ac9f66..864fc020 100644 --- a/docs/component/sortButton.md +++ b/docs/component/sortButton.md @@ -5,23 +5,18 @@ ## 基本用法 -`value` 为组件状态，其值为：`-1、0、1`，分别代表：降序、未选中状态、升序。 `title` 为展示文案，按钮默认处于未选中状态，监听 `bind:change` 事件获取新值。 +使用`v-model` 绑定组件展示状态，其值为：`-1、0、1`，分别代表：降序、未选中状态、升序。 `title` 为展示文案，按钮默认处于未选中状态。 ```html - + ``` ```typescript -Page({ - data: { - value: 0 - }, - handleChange (event) { - this.setData({ - value: event.detail.value - }) - } -}) +const value = ref(0) + +function handleChange({ value }) { + console.log(value) +} ``` ## 按钮重置 @@ -37,7 +32,7 @@ Page({ 通过设置 `desc-first` 优先切换为降序，默认为升序。 ```html - + ``` ## 取消展示下划线 @@ -45,14 +40,14 @@ Page({ 当只有一个排序按钮时，应该不展示下划线，设置 `line` 属性为 `false`。 ```html - + ``` ## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| -| value | 选中的箭头方向：1 升序，0 重置状态，-1 降序。 | number | -1,0,1 | 0或-1 | - | +| v-model | 选中的箭头方向：1 升序，0 重置状态，-1 降序。 | number | -1,0,1 | 0或-1 | - | | title | 排序按钮展示的文案。 | string | - | - | - | | allow-reset | 展示双箭头时，允许手动重置按钮。 | boolean | - | false | - | | desc-first | 优先切换为降序，不开启则默认优先切换为升序 | boolean | - | false | - | @@ -62,7 +57,7 @@ Page({ | 事件名称 | 说明 | 参数 | 最低版本 | |---------|-----|-----|---------| -| bind:change | 监听排序修改 | `{ value }` | - | +| change | 监听排序修改 | `{ value }` | - | ## 外部样式类 | 类名 | 说明 | 最低版本 | diff --git a/docs/component/steps.md b/docs/component/steps.md index 2411e7db..6fd5afbd 100644 --- a/docs/component/steps.md +++ b/docs/component/steps.md @@ -8,7 +8,7 @@ `active` 为步骤进度，为 number 类型，步骤的下标。 ```html - + @@ -20,7 +20,7 @@ 设置 `align-center` 水平居中，只对横向步骤条有效。 ```html - + @@ -32,7 +32,7 @@ 可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题，则会使用默认的文案。 ```html - + @@ -44,7 +44,7 @@ 可以通过 `icon` 属性设置步骤的图标，传入图标的名称，也可以通过 `icon` 的 slot 插槽自定义图标，使用插槽需要设置 `icon-slot` 为 `true`。 ```html - + @@ -56,7 +56,7 @@ 设置 `vertical` 属性。 ```html - + @@ -68,7 +68,7 @@ 设置 `dot` 属性。 ```html - + @@ -80,7 +80,7 @@ 设置 `status`，支持 'finished'（完成）、'process'（进行中）、'error'（失败） 三种状态。 ```html - + diff --git a/docs/component/sticky.md b/docs/component/sticky.md index 43bb8284..db01a40f 100644 --- a/docs/component/sticky.md +++ b/docs/component/sticky.md @@ -23,25 +23,24 @@ ```html - 点击插入 + 点击插入 - 动态插入 + 动态插入 ``` ```typescript -Page({ - data: { - show: false - }, - display () { - this.setData({ show: true }) - }, - onShow () { - setTimeout(this.display, 5000) - } +const show = ref(false) + +function display() { + show.value = true +} + +onShow(() => { + setTimeout(display, 5000) }) + ``` ```scss @@ -56,7 +55,7 @@ page{ 通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。 ```html - + 吸顶距离 ``` diff --git a/docs/component/swipeAction.md b/docs/component/swipeAction.md index ff45bc61..dafde783 100644 --- a/docs/component/swipeAction.md +++ b/docs/component/swipeAction.md @@ -1,6 +1,6 @@ -# SwipeAction 滑动操作 +# SwipeAction 滑动操作 :::warning 滑动操作组件对页面的功能隐藏较深，用户难以发现，建议使用其他交互方式来实现操作功能，比如列表项有个按钮，点击按钮弹出 ActionSheet。 @@ -8,45 +8,50 @@ 如果坚持要使用滑动操作组件，建议在用户进入页面时加上操作提示以提示用户列表项可以左右滑动。 ::: - ## 基本用法 `wd-swipe-action`分为三部分：'自定义左按钮内容'、'自定义内容'、'自定义右按钮内容'。自定义按钮内容需要设置`slot`开启，自定义内容为默认插槽，无需手动开启。 -因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 swipeAction ，建议引入组件库的 clickoutside 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。 +因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 swipeAction ，建议引入组件库的 clickOut 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。 :::warning -如果存在用户手动点击 swipeAction 以外某个地方如按钮滑出 swipeAction 的场景，则需要在点击的元素（在这里上按钮）加上 catchtap 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 swipeAction 关闭了。 +如果存在用户手动点击 swipeAction 以外某个地方如按钮滑出 swipeAction 的场景，则需要在点击的元素（在这里上按钮）加上 @click 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 swipeAction 关闭了。 ::: ```html - + - - 操作1 - 操作2 - 操作3 - + + ``` -```typescript -import Toast from '/wot-design/toast/toast' -import clickoutside from '/wot-design/common/clickoutside' -Page({ - handleAction (event) { - Toast(`点击了${event.target.dataset.action}`) - }, - clickoutside: clickoutside -}) +```typescript +import { useToast, clickOut } from '@/uni_modules/wot-design-uni' + +const toast = useToast() +function clickoutside() { + clickOut.closeOutside() +} + +function handleAction(action: string) { + toast.show(`点击了${action}`) +} ``` + ```scss .action { height: 100%; } -.button{ +.button { display: inline-block; padding: 0 11px; height: 100%; @@ -57,59 +62,63 @@ Page({ ## 左右滑动 -> `wd-swipe-action`组件提供`left`/`right`两个滑动按钮，通过设置插槽`slot="left"`和`slot="right"`开启 +> `wd-swipe-action`组件提供`left`/`right`两个滑动按钮，通过设置插槽`v-slot:left`和`v-slot:right`开启 ```html - - 操作1 - 操作2 - 操作3 - + - - 操作4 - 操作5 - 操作6 - + ``` ## 切换按钮 -> 可以通过设置`value`来控制开启关闭滑动按钮，可选值为:`left`、`close`、`right`分别表示："打开左滑动按钮"、"关闭滑动按钮""打开右滑动按钮" +> 可以通过设置`v-model`来控制开启关闭滑动按钮，可选值为:`left`、`close`、`right`分别表示："打开左滑动按钮"、"关闭滑动按钮""打开右滑动按钮" ```html - - - 操作1 - 操作2 - 操作3 - - - - 操作4 - 操作5 - 操作6 - + + + + - 打开左边 - 关闭所有 - 打开右边 + 打开左边 + 关闭所有 + 打开右边 ``` + ```typescript -Page({ - data: { - value: 'close' - }, - changeState (event) { - const { value } = event.target.dataset - this.setData({ value }) - } -}) +const value = ref('close') +function changeState(position: string) { + value.value = position +} ``` ## 按钮关闭前的钩子函数 @@ -122,42 +131,49 @@ Page({ ```html - - - 操作1 - 操作2 - 操作3 - - - - 操作4 - 操作5 - 操作6 - + + + + - 打开左边 - 关闭所有 - 打开右边 + 打开左边 + 关闭所有 + 打开右边 ``` -```typescript -import Toast from '../../dist/toast/toast' -Page({ - data: { - value: 'close', - beforeClose (reason, position) { - Toast(`${reason}导致${position}操作按钮关闭`) - } - }, - changeState (event) { - const { value } = event.target.dataset - this.setData({ value: value }) +```typescript +import { useToast } from '@/uni_modules/wot-design-uni' + +const toast = useToast() + +const value = ref('close') +function changeState(position: string) { + value.value = position +} + +const beforeClose = (reason, position) => { + if (reason === 'click') { + toast.show(`${reason} ${position}导致滑动按钮关闭`) + } else { + toast.show(`${reason}导致${position}滑动按钮关闭`) } -}) +} ``` ## 点击事件 @@ -167,23 +183,26 @@ Page({ 回调函数的参数表示点击的位置，其中`left`、`right`表示点击了左右滑动按钮，`inside`表示点击了容器内按钮以外的地方。 ```html - - - + + + + ``` -```typescript -import Toast from '../../dist/toast/toast' -Page({ - handleClick (event) { - Toast(`点击${event.detail.value}关闭操作按钮`) - } -}) +```typescript +import { useToast } from '@/uni_modules/wot-design-uni' + +const toast = useToast() + +function handleClick({ value }) { + toast.show(`点击${value}关闭操作按钮`) +} ``` ## 禁用滑动按钮 @@ -193,38 +212,40 @@ Page({ ```html - - 操作1 - 操作2 - 操作3 - + ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|---------| -| value | 滑动按钮的状态 | string | left / close / right | close | - | -| disabled | 是否禁用滑动操作 | boolean | - | false | - | -| before-close | 关闭滑动按钮前的钩子函数 | function | - | - | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------ | ------------------------ | -------- | -------------------- | ------ | -------- | +| v-model | 滑动按钮的状态 | string | left / close / right | close | - | +| disabled | 是否禁用滑动操作 | boolean | - | false | - | +| before-close | 关闭滑动按钮前的钩子函数 | function | - | - | - | ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|--------|------|-----|---------| -| bind:click | 当滑动按钮打开时，点击整个滑动操作容器触发click事件 | event.detail= {value}, value 可能为 'left'、'inside'、'right' | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| -------- | ----------------------------------------------------- | ----------------------------------------------------- | -------- | +| click | 当滑动按钮打开时，点击整个滑动操作容器触发 click 事件 | event={value}, value 可能为 'left'、'inside'、'right' | - | ## Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| left | 自定义左按钮 | - | -| default | 自定义内容 | - | -| right | 自定义右按钮 | - | +| name | 说明 | 最低版本 | +| ------- | ------------ | -------- | +| left | 自定义左按钮 | - | +| default | 自定义内容 | - | +| right | 自定义右按钮 | - | ## Cell 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|-----|---------| -| custom-class | 根结点样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | -------- | +| custom-class | 根结点样式 | - | diff --git a/docs/component/switch.md b/docs/component/switch.md index d3e1b612..e0991c4e 100644 --- a/docs/component/switch.md +++ b/docs/component/switch.md @@ -5,23 +5,14 @@ ## 基本用法 -设置 `value` 值，监听 `change` 事件修改值。 +`v-model` 值，为绑定值，默认为 boolean 类型。 ```html - + ``` ```typescript -Page({ - data: { - checked: true - }, - handleChange (event) { - this.setData({ - checked: event.detail.value - }) - } -}) +const checked = ref(true) ``` ## 修改值 @@ -29,7 +20,7 @@ Page({ 通过 `active-value` 属性修改开关打开时的值，`inactive-value` 属性修改开关关闭时的值。 ```html - + ``` ## 修改颜色 @@ -37,7 +28,7 @@ Page({ 通过 `active-color` 属性修改开关打开时的颜色，`inactive-color` 属性修改开关关闭时的颜色。 ```html - + ``` ## 修改大小 @@ -45,7 +36,7 @@ Page({ 设置 `size` 修改开关大小。 ```html - + ``` ## 禁用 @@ -57,27 +48,31 @@ Page({ 设置 `before-change` 属性，修改前钩子，接收 { value, resolve } 参数，`resolve(true)` 表示修改通过，`resolve(false)` 表示不修改。 ```html - + ``` ```typescript -Page({ - data: { - checked: true - }, - handleChange (event) { - this.setData({ - checked: event.detail.value +import { useMessage } from '@/uni_modules/wot-design-uni' + +const message = useMessage() + +const beforeChange = ({ value, resolve }) => { + message + .confirm('是否切换开关') + .then(() => { + resolve(true) }) - } -}) + .catch(() => { + resolve(false) + }) +} ``` ## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|---------| -| value | 绑定值 | boolean / string / number | - | - | - | +| v-model | 绑定值 | boolean / string / number | - | - | - | | disabled | 禁用 | boolean | - | false | - | | active-value | 打开时的值 | boolean / string / number | - | true | - | | inactive-value | 关闭时的值 | boolean / string / number | - | false | - | @@ -85,7 +80,7 @@ Page({ | inactive-color | 关闭时的背景色，默认为白色，所以有灰色边框，如果设置了该值，则会自动去除灰色边框 | string | - | #fff | - | | size | 开关大小，可以为任何单位的字符串尺寸 | string | - | 28px | - | | name | form 表单中的字段名 | string | - | - | - | -| before-change | 修改前钩子 | function | - | - | 2.3.0 | +| before-change | 修改前钩子 | function | - | - | - | ## Events diff --git a/docs/component/tabs.md b/docs/component/tabs.md index ec1c41b9..41d5e0d8 100644 --- a/docs/component/tabs.md +++ b/docs/component/tabs.md @@ -10,13 +10,17 @@ > 当`value`为`number`类型时，`wd-tab`可以不必设置`name`。同时如果value超出了tab数量，会用0自动兜底 ```html - - - - 内容{{item + 1}} + + + + 内容{{ item}} +``` +```typescript +const tab = ref(0) + ``` ```scss .content{ @@ -25,30 +29,30 @@ } ``` -## 滑动动画 + ## 粘性布局 设置 `sticky` 属性，使用粘性布局。可以设置 `offset-top` 属性，当距离窗口顶部多少像素时，固定标签头。 ```html - - - - 内容{{item + 1}} + + + + 内容{{ item}} @@ -59,10 +63,10 @@ 在 `wd-tab` 上设置 `disabled` 属性，禁用某个页签。 ```html - - - - 内容{{item + 1}} + + + + 内容{{ item }} @@ -73,10 +77,10 @@ 监听页签的点击事件. ```html - - - - 内容{{item + 1}} + + + + 内容{{ item }} @@ -97,10 +101,10 @@ Page({ 设置 `swipeable` 属性，支持手势滑动。 ```html - - - - 内容{{item + 1}} + + + + 内容{{ item }} @@ -114,14 +118,12 @@ Page({ | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|---------| -| value | 绑定值 | string / number | - | - | - | +| v-model | 绑定值 | string / number | - | - | - | | slidable-num | 可滑动的标签数阈值 | number | - | 6 | - | | map-num | 显示导航地图的标签数阈值 | number | - | 10 | - | | sticky | 粘性布局 | boolean | - | false | - | | offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - | -| ~~animated~~ | ~~开启切换动画~~，2.3.0 版本修改 tabs 切换方案，去掉该属性 | boolean | - | false | - | | swipeable | 开启手势滑动 | boolean | - | false | - | -| ~~lazy-render~~ | ~~懒渲染标签页~~，2.3.0 版本修改 tabs 切换方案，去掉该属性 | boolean | - | false | - | ## Tab Attributes @@ -135,6 +137,6 @@ Page({ | 事件名称 | 说明 | 参数 | 最低版本 | |---------|-----|-----|---------| -| bind:change | 绑定值变化时触发 | event.detail = { index, name },index为tab下标，name为tab绑定的值 | - | -| bind:click | 点击标题时触发 | event.detail = { index, name },index为tab下标，name为tab绑定的值 | - | -| bind:disabled | 点击禁用的标题时触发| event.detail = { index, name },index为tab下标，name为tab绑定的值 | - | +| change | 绑定值变化时触发 | event = { index, name },index为tab下标，name为tab绑定的值 | - | +| click | 点击标题时触发 | event = { index, name },index为tab下标，name为tab绑定的值 | - | +| disabled | 点击禁用的标题时触发| event = { index, name },index为tab下标，name为tab绑定的值 | - | diff --git a/docs/component/tag.md b/docs/component/tag.md index 232ebcd7..bb265e4f 100644 --- a/docs/component/tag.md +++ b/docs/component/tag.md @@ -1,8 +1,6 @@ -# Tag 标签 - - +# Tag 标签 ## 基本用法 @@ -15,11 +13,13 @@ 标签 标签 ``` + ```scss -.space{ - margin: 0 10px; +:deep(.space) { + margin: 0 10px 10px; } ``` + ## 幽灵标签 设置 `plain` 属性。 @@ -45,6 +45,7 @@ ``` ## 幽灵标记标签 + 同时设置 `mark` 和 `plain` 属性。 ```html @@ -75,7 +76,9 @@ 标签 插槽 - + ``` @@ -84,13 +87,14 @@ 设置 `color` 修改文字颜色，设置 `bg-color` 修改背景色和边框颜色。 ```html - 标签 - 标签 +标签 +标签 ``` ## 可关闭 设置 `closable` 属性，允许标签关闭，关闭时会触发 `close` 事件。 + ```html 标签 ``` @@ -100,122 +104,82 @@ 设置 `dynamic` 属性，该标签为新增样式，输入内容确定后触发 `confirm` 事件。 ```html - - {{item}} - - +{{item}} + ``` ```typescript -Page({ - data: { - tags: ['标签一', '标签二'] - }, - handleClose (event) { - const { index } = event.currentTarget.dataset - this.setData({ - tags: this.data.tags.filter((item, i) => { - return i !== index - }) - }) - }, - handleConfirm (event) { - const { value } = event.detail.value +const tags = ref(['标签一', '标签二']) - if (!value) return +function handleClose(order) { + tags.value = tags.value.filter((value, index) => index !== order) + console.log('close:index' + order) +} - this.setData({ - tags: [...this.data.tags, value] - }) - } -}) +function handleConfirm({ value }) { + if (!value) return + tags.value = [...tags.value, value] +} ``` ## 事件 ```html - + {{tag.value}} ``` ```typescript -Page({ - data: { - tags: [ - { - plain: true, - closable: true, - type: 'primary', - value: '标签一' - } - ] - }, - handleClick ({ currentTarget: { dataset: { index } } }) { - console.log('click:index' + index) - }, - handleClose ({ currentTarget: { dataset: { index: order } } }) { - this.setData({ - tags: this.data.tags.filter((value, index) => index !== order) - }) - console.log('close:index' + order) +const tags = ref([ + { + plain: true, + closable: true, + type: 'primary', + value: '标签一' } -}) +]) + +function handleClick(index) { + console.log('click:index' + index) +} +function handleClose(order) { + tags.value = tags.value.filter((value, index) => index !== order) + console.log('close:index' + order) +} ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|---------| -| type | 标签类型 | string | primary / danger / warning / success | - | - | - | -| plain | 幽灵类型 | boolean | - | false | - | -| mark | 标记类型 | boolean | - | false | - | -| round | 圆角类型 | boolean | - | false | - | -| icon | 左侧图标 | string | - | - | - | -| color | 文字颜色 | string | - | - | - | -| bg-color | 背景色和边框色 | string | - | - | - | -| closable | 可关闭(只对圆角类型支持) | boolean | - | false | - | -| use-icon-slot | 开启图标插槽 | boolean | - | false | - | -| dynamic | 新增标签 | boolean | - | false | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------- | ------------------------ | ------- | ------------------------------------ | ------ | -------- | --- | +| type | 标签类型 | string | primary / danger / warning / success | - | - | - | +| plain | 幽灵类型 | boolean | - | false | - | +| mark | 标记类型 | boolean | - | false | - | +| round | 圆角类型 | boolean | - | false | - | +| icon | 左侧图标 | string | - | - | - | +| color | 文字颜色 | string | - | - | - | +| bg-color | 背景色和边框色 | string | - | - | - | +| closable | 可关闭(只对圆角类型支持) | boolean | - | false | - | +| use-icon-slot | 开启图标插槽 | boolean | - | false | - | +| dynamic | 新增标签 | boolean | - | false | - | ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|---------|-----|-----|---------| -| bind:click | 标签点击时触发 | event | - | -| bind:close | 点击关闭按钮时触发 | event | - | -| bind:confirm | 新增标签输入内容确定后触发 | `{ value }` | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| ------------ | -------------------------- | ----------- | -------- | +| bind:click | 标签点击时触发 | event | - | +| bind:close | 点击关闭按钮时触发 | event | - | +| bind:confirm | 新增标签输入内容确定后触发 | `{ value }` | - | ## Slots | name | 说明 | 最低版本 | -|------|-----|---------| -| icon | 图标 | - | +| ---- | ---- | -------- | +| icon | 图标 | - | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根结点样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | -------- | +| custom-class | 根结点样式 | - | diff --git a/docs/component/toast.md b/docs/component/toast.md index 50502857..df1067ea 100644 --- a/docs/component/toast.md +++ b/docs/component/toast.md @@ -1,47 +1,47 @@ -# Toast 轻提示 - +# Toast 轻提示 ## 基本用法 需要在页面中引入该组件，作为挂载点。 ```html - + toast ``` ```typescript -import Toast from '/wot-design/toast/toast.js' +import { useToast } from '@/uni_modules/wot-design-uni' -Page({ - showToast () { - Toast('提示信息') - } -}) +const toast = useToast() + +function showToast() { + toast.show('提示信息') +} ``` ## 成功、异常、警告、常规 ```typescript -Toast.success('操作成功') -Toast.error('手机验证码输入错误，请重新输入') -Toast.warning('提示信息') -Toast.info('常规提示信息') +toast.show('提示信息') +toast.success('操作成功') +toast.error('手机验证码输入错误，请重新输入') +toast.warning('提示信息') +toast.info('常规提示信息') ``` ## 提示位置 ```typescript // 顶部提示 -Toast({ +toast.show({ position: 'top', msg: '提示信息' }) // 底部提示 -Toast({ +toast.show({ position: 'bottom', msg: '提示信息' }) @@ -50,7 +50,7 @@ Toast({ ## 关闭提示 ```typescript -Toast.close() +toast.close() ``` ## loading 提示 @@ -58,13 +58,13 @@ Toast.close() `loading` 开启后需要用户手动关闭，关闭可以调用 `close`，或者再调用一次 toast 提示，因为 toast 只会存在一个，新的 toast 会自动顶掉旧的 toast。 ```typescript -Toast.loading('加载中...') +toast.loading('加载中...') ``` 修改 loading 指示器类型： ```typescript -Toast.loading({ +toast.loading({ loadingType: 'ring', msg: '加载中...' }) @@ -73,45 +73,44 @@ Toast.loading({ 手动关闭 loading： ```typescript -Toast.close() +toast.close() ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|-----|------|-------|-------|--------| -| options | 配置项，可以直接传入字符串作为提示信息 | string / object | - | - | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------- | -------------------------------------- | --------------- | ------ | ------ | -------- | +| options | 配置项，可以直接传入字符串作为提示信息 | string / object | - | - | - | ## options -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|------|--------|---------| -| msg | 消息内容 | string | - | - | - | -| duration | 持续时间，单位 ms，为0时表示不自动关闭 | number | - | 2000 | - | -| iconName | 图标类型 | string | success / error / warning | - | - | -| iconSize | 左侧图标尺寸 | string | - | 42px | - | -| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - | -| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - | -| position | 提示信息框的位置 | string | top / middle / bottom | middle | - | -| zIndex | toast 层级 | number | - | 100 | - | -| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - | -| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - | -| context | 引用 `wd-toast` 的页面实例或自定义组件实例 | object | - | 当前页面实例 | 2.3.0 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------ | --------------------------------------------------------------------------- | ------- | ------------------------- | ------------ | -------- | +| msg | 消息内容 | string | - | - | - | +| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - | +| iconName | 图标类型 | string | success / error / warning | - | - | +| iconSize | 左侧图标尺寸 | string | - | 42px | - | +| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - | +| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - | +| position | 提示信息框的位置 | string | top / middle / bottom | middle | - | +| zIndex | toast 层级 | number | - | 100 | - | +| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - | +| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - | ## Methods -| 方法名称 | 说明 | 参数 | 最低版本 | -|--------|------|-----|---------| -| success | 成功提示 | options | - | -| error | 关闭提示 | options | - | -| info | 常规提示 | options | - | -| warning | 警告提示 | options | - | -| loading | 加载提示 | options | - | -| close |手动关闭消息提示框，是Toast实例上的方法| - | - | +| 方法名称 | 说明 | 参数 | 最低版本 | +| -------- | ----------------------------------------- | ------- | -------- | +| success | 成功提示 | options | - | +| error | 关闭提示 | options | - | +| info | 常规提示 | options | - | +| warning | 警告提示 | options | - | +| loading | 加载提示 | options | - | +| close | 手动关闭消息提示框，是 Toast 实例上的方法 | - | - | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根结点样式 | - | -| custom-icon-class | 自定义图标类名 | - | +| 类名 | 说明 | 最低版本 | +| ----------------- | -------------- | -------- | +| custom-class | 根结点样式 | - | +| custom-icon-class | 自定义图标类名 | - | diff --git a/docs/component/tooltip.md b/docs/component/tooltip.md index e7f8ed3e..5b8a561e 100644 --- a/docs/component/tooltip.md +++ b/docs/component/tooltip.md @@ -1,15 +1,14 @@ -# Tooltip 文字提示 +# Tooltip 文字提示 常用于展示提示信息。 - ## 基本用法 在这里我们提供 12 种不同方向的展示方式，可以通过以下完整示例来理解。 -`show` 控制是否展示文字提示。监听 `bind:change` 事件获取新值。 +`v-model` 控制是否展示文字提示。 使用`content`属性来决定显示时的提示信息。 @@ -21,7 +20,7 @@ 如 `placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。 -因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 tooltip ，建议引入组件库的 clickoutside 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。 +因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 tooltip ，建议引入组件库的 clickOut 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。 :::warning 如果存在用户手动点击 tooltip 以外某个地方如按钮滑出 tooltip 的场景，则需要在点击的元素（在这里上按钮）加上 catchtap 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 tooltip 关闭了。 @@ -29,24 +28,20 @@ ```html - + top ``` ```typescript -import clickoutside from '/wot-design/common/clickoutside' +import { clickOut } from '@/uni_modules/wot-design-uni' -Page({ - data: { - show: false - }, - handleChange (event) { - this.setData({ show: event.detail.show }) - }, - clickoutside: clickoutside -}) +const show = ref(false) + +function clickoutside() { + clickOut.closeOutside() +} ``` ## 更多 Content @@ -58,25 +53,24 @@ Page({ 使用插槽时，请使用 `useContentSlot` 属性，确定 `content` 插槽开启。 ```html - - 多行文本 - - 多行文本1 - 多行文本2 - 多行文本3 - + + 多行文本 + ``` ```typescript -Page({ - data: { - show: false - }, - handleChange (event) { - this.setData({ show: event.detail.show }) - } -}) +import { clickOut } from '@/uni_modules/wot-design-uni' +const show = ref(false) +function clickoutside() { + clickOut.closeOutside() +} ``` ## 显示关闭按钮 @@ -84,22 +78,11 @@ Page({ Tooltip 组件通过属性`show-close` 控制是否显示关闭按钮。 ```html - - 显示关闭按钮 + + 显示关闭按钮 ``` -```typescript -Page({ - data: { - show: false - }, - handleChange (event) { - this.setData({ show: event.detail.show }) - } -}) -``` - ## 高级扩展 除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果： @@ -107,73 +90,73 @@ Page({ 如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。 ```html - - 禁用 + + 禁用 ``` ## 控制位置 -**注意：由于微信小程序无法动态插入节点，因此文字气泡位置会根据传入定位的节点最外层位置对齐，如果文字提示位置不在您想要渲染的位置上，可以通过控制组件整体位置达到想要的效果。** +**注意：由于小程序无法动态插入节点，因此文字气泡位置会根据传入定位的节点最外层位置对齐，如果文字提示位置不在您想要渲染的位置上，可以通过控制组件整体位置达到想要的效果。** 错误用法示例： ```html - - top + + top - - top + + top ``` 正确用法： ```html - + top - + top ``` ## Tooltip Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|-----|------|-------|-------|---------| -| show | 状态是否可见 | boolean | - | false | - | -| content | 显示的内容，也可以通过 `slot#content` 传入 | string / array | - | - | - | -| placement | Tooltip 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - | -| disabled | Tooltip 是否可用 | boolean | - | false | - | -| visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - | -| offset | 出现位置的偏移量 | number | - | 0 | - | -| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------- | ------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | +| show | 状态是否可见 | boolean | - | false | - | +| content | 显示的内容，也可以通过 `slot#content` 传入 | string / array | - | - | - | +| placement | Tooltip 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - | +| disabled | Tooltip 是否可用 | boolean | - | false | - | +| visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - | +| offset | 出现位置的偏移量 | number | - | 0 | - | +| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - | ## Events -| 事件名称 | 说明 | 回调参数 | 最低版本 | -|---------|-----|---------|--------| -| bind:open |显示时触发 | - | - | -| bind:close | 隐藏时触发 | - | - | -| bind:change | 显隐值变化时触发 | - | - | +| 事件名称 | 说明 | 回调参数 | 最低版本 | +| ----------- | ---------------- | -------- | -------- | +| bind:open | 显示时触发 | - | - | +| bind:close | 隐藏时触发 | - | - | +| bind:change | 显隐值变化时触发 | - | - | ## Methods -| 方法名称 | 说明 | 参数 | 最低版本 | -|--------|------|-----|---------| -| open | 打开文字提示弹框 | - | - | -| close | 关闭文字提示弹框 | - | - | +| 方法名称 | 说明 | 参数 | 最低版本 | +| -------- | ---------------- | ---- | -------- | +| open | 打开文字提示弹框 | - | - | +| close | 关闭文字提示弹框 | - | - | ## Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| content | 多行内容或用户自定义样式 | - | +| name | 说明 | 最低版本 | +| ------- | ------------------------ | -------- | +| content | 多行内容或用户自定义样式 | - | ## Tooltip 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根结点样式 | - | -| custom-arrow | 尖角样式 | - | -| custom-pop | 文字提示样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------ | ------------ | -------- | +| custom-class | 根结点样式 | - | +| custom-arrow | 尖角样式 | - | +| custom-pop | 文字提示样式 | - | diff --git a/docs/component/transition.md b/docs/component/transition.md index 98c633c3..ebfa8b95 100644 --- a/docs/component/transition.md +++ b/docs/component/transition.md @@ -1,16 +1,13 @@ -# Transition 动画 - +# Transition 动画 ## 基本用法 将元素包裹在 `wd-transition` 标签中，并设置 `show` 来切换显隐，设置 `name` 选择动画。 ```html - - 内容 - +内容 ``` ## 动画类型 @@ -18,9 +15,7 @@ `wd-transition` 内置了常用的动画，如 `fade`、`slide`、`zoom-in` 等。 ```html - - 内容 - +内容 ``` ## 动画时间 @@ -37,8 +32,8 @@ ```html -# Upload 上传 +# Upload 上传 图片上传组件 @@ -13,26 +13,21 @@ `action` 设置图片上传的地址； ```html - + ``` ```typescript -Page({ - data: { - fileList: [{ - url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' - }] - }, - handleChange (event) { - this.setData({ - fileList: event.detail.fileList - }) +const fileList = ref([ + { + url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' } -}) +]) + +const action: string = 'https://ftf.jd.com/api/uploadImg' + +function handleChange({ files }) { + fileList.value = files +} ``` ## 禁用 @@ -40,12 +35,7 @@ Page({ 设置 `disabled` 开启禁用上传 ```html - - + ``` ## 多选上传 @@ -53,12 +43,7 @@ Page({ 通过设置 `multiple` 开启文件多选上传。 ```html - + ``` ## 最大上传数限制 @@ -66,168 +51,181 @@ Page({ 上传组件可通过设置 `limit` 来限制上传文件的个数。 ```html - + ``` ## 拦截预览图片操作 -设置 `before-preview` 函数，在用户点击图片进行预览时，会执行 `before-preview` 函数，接收 { index: 当前预览的下标, imgList: 所有图片地址列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行预览图片操作。 +设置 `before-preview` 函数，在用户点击图片进行预览时，会执行 `before-preview` 函数，接收 { index: 当前预览的下标, imgList: 所有图片地址列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行预览图片操作。 ```html ``` ```typescript -Page({ - data: { - fileList: [{ - url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' - }], - beforePreview ({ index, resolve }) { - MessageBox.confirm({ - msg: '是否预览图片', - title: '提示' - }).then(() => { - resolve(true) - }).catch(() => { - Toast('取消预览操作') - }) - }, - }, +import { useToast, useMessage } from '@/uni_modules/wot-design-uni' - handleChange (event) { - this.setData({ - fileList: event.detail.fileList - }) +const messageBox = useMessage() +const toast = useToast() +const fileList = ref([ + { + url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' } -}) +]) + +const beforePreview = ({ file, resolve }) => { + messageBox + .confirm({ + msg: '是否预览图片', + title: '提示' + }) + .then(() => { + resolve(true) + }) + .catch(() => { + toast.show('取消预览操作') + }) +} + +function handleChange({ files }) { + fileList.value = files +} ``` ## 上传前置处理 -设置 `before-upload` 函数，弹出图片选择界面，在用户选择图片点击确认后，会执行 `before-upload` 函数，接收 { files: 当前上传的文件, fileList: 文件列表, resolve }，可以对 `file` 进行处理，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行上传操作。 +设置 `before-upload` 函数，弹出图片选择界面，在用户选择图片点击确认后，会执行 `before-upload` 函数，接收 { files: 当前上传的文件, fileList: 文件列表, resolve }，可以对 `file` 进行处理，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行上传操作。 ```html ``` ```typescript -Page({ - data: { - fileList: [{ - url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' - }], - beforeUpload ({ files, resolve }) { - MessageBox.confirm({ - msg: '是否上传图片', - title: '提示' - }).then(() => { - resolve(true) - }).catch(() => { - Toast('取消上传操作') - }) - } - }, +import { useToast, useMessage } from '@/uni_modules/wot-design-uni' - handleChange (event) { - this.setData({ - fileList: event.detail.fileList - }) +const messageBox = useMessage() +const toast = useToast() +const fileList = ref([ + { + url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' } -}) +]) + +const beforeUpload = ({ file, resolve }) => { + messageBox + .confirm({ + msg: '是否上传', + title: '提示' + }) + .then(() => { + resolve(true) + }) + .catch(() => { + toast.show('取消上传操作') + }) +} + +function handleChange({ files }) { + fileList.value = files +} ``` ## 移除图片前置处理 -设置 `before-remove` 函数，在用户点击关闭按钮时，会执行 `before-remove` 函数，接收 { file: 移除的文件, index: 移除文件的下标, fileList: 文件列表, resolve }，可以对 `file` 进行处理，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行移除图片操作。 +设置 `before-remove` 函数，在用户点击关闭按钮时，会执行 `before-remove` 函数，接收 { file: 移除的文件, index: 移除文件的下标, fileList: 文件列表, resolve }，可以对 `file` 进行处理，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行移除图片操作。 ```html - + :file-list="fileList" + action="https://ftf.jd.com/api/uploadImg" + @change="handleChange" + :before-remove="beforeRemove" +> ``` ```typescript -Page({ - data: { - fileList: [{ - url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' - }], - beforeRemove ({ file, fileList, resolve }) { - MessageBox.confirm({ - msg: '是否移除图片', - title: '提示' - }).then(() => { - resolve(true) - }).catch(() => { - Toast('取消移除操作') - }) - } - }, +import { useToast, useMessage } from '@/uni_modules/wot-design-uni' - handleChange (event) { - this.setData({ - fileList: event.detail.fileList - }) +const messageBox = useMessage() +const toast = useToast() +const fileList = ref([ + { + url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' } -}) +]) + +const beforeRemove = ({ file, fileList, resolve }) => { + messageBox + .confirm({ + msg: '是否删除', + title: '提示' + }) + .then(() => { + toast.success('删除成功') + resolve(true) + }) + .catch(() => { + toast.show('取消删除操作') + }) +} + +function handleChange({ files }) { + fileList.value = files +} ``` ## 选择文件前置处理 -设置 `before-choose` 函数，在用户点击唤起项时，会执行 `before-choose` 函数，接收 { fileList: 文件列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行选择文件操作。 +设置 `before-choose` 函数，在用户点击唤起项时，会执行 `before-choose` 函数，接收 { fileList: 文件列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行选择文件操作。 ```html - + :file-list="fileList" + action="https://ftf.jd.com/api/uploadImg" + @change="handleChange" + :before-choose="beforeChoose" +> ``` ```typescript -Page({ - data: { - fileList: [{ - url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' - }], - beforeChoose ({ fileList, resolve }) { - MessageBox.confirm({ - msg: '是否选择图片', - title: '提示' - }).then(() => { - resolve(true) - }).catch(() => { - Toast('取消选择操作') - }) - } - }, - handleChange (event) { - this.setData({ - fileList: event.detail.fileList - }) +import { useToast, useMessage } from '@/uni_modules/wot-design-uni' + +const messageBox = useMessage() +const toast = useToast() +const fileList = ref([ + { + url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' } -}) +]) + +const beforeChoose = (file, resolve) => { + messageBox + .confirm({ + msg: '是否选择', + title: '提示' + }) + .then(() => { + resolve(true) + }) + .catch(() => { + toast.show('取消选择操作') + }) +} + +function handleChange({ files }) { + fileList.value = files +} ``` ## 自定义唤起上传样式 @@ -237,82 +235,72 @@ Page({ 开启`use-default-slot`属性。 ```html - + 上传 - - +]) ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|------|-----|-----|-------|-------|--------| -| file-list | 上传的文件列表, 例如: [{ name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg' }] | array | - | [] | - | -| action | 必选参数，上传的地址 | string | - | - | - | -| header | 设置上传的请求头部 | object | - | - | - | -| multiple | 是否支持多选文件 | boolean | - | - | - | -| disabled | 是否禁用 | boolean | - | false | - | -| limit | 最大允许上传个数 | number | - | - | - | -| show-limit-num | 限制上传个数的情况下，是否展示当前上传的个数 | boolean | - | false | - | -| max-size | 文件大小限制，单位为`byte` | number | - | - | - | -| source-type | 选择图片的来源，chooseImage 接口详细参数，查看[官方手册](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html) | array / string | - | ['album', 'camera'] | - | -| size-type | 所选的图片的尺寸，chooseImage 接口详细参数，查看[官方手册](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html) | array / string | - | ['original', 'compressed'] | - | -| name | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容，uploadFile 接口详细参数，查看[官方手册](https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html) | string | - | file | - | -| formData | HTTP 请求中其他额外的 form data，uploadFile 接口详细参数，查看[官方手册](https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html) | object | - | - | - | -| header | HTTP 请求 Header，Header 中不能设置 Referer，uploadFile 接口详细参数，查看[官方手册](https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html) | object | - | - | - | -| on-preview-fail | 预览失败执行操作 | function({ index, imgList }) | - | - | - | -| before-upload | 上传文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, fileList, resolve }) | - | - | - | -| before-choose | 选择图片之前的钩子，参数为文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function({ fileList, resolve }) | - | - | - | -| before-remove | 删除文件之前的钩子，参数为要删除的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function({ file, fileList, resolve }) | - | - | - | -| before-preview | 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function({ index, imgList, resolve }) | - | - | - | -| loading-type | [加载中图标类型](/component/loading) | string | - | circular-ring | - | -| loading-color | [加载中图标颜色](/component/loading) | string | - | #ffffff | - | -| loading-size | [加载中图标尺寸](/component/loading) | string | - | 24px | - | -| use-default-slot | 开启默认唤起项插槽 | boolean | - | false | - | -| status-key | file 数据结构中，status 对应的 key | string | - | status | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------ | -------------------------- | -------- | +| file-list | 上传的文件列表, 例如: [{ name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg' }] | array | - | [] | - | +| action | 必选参数，上传的地址 | string | - | - | - | +| header | 设置上传的请求头部 | object | - | - | - | +| multiple | 是否支持多选文件 | boolean | - | - | - | +| disabled | 是否禁用 | boolean | - | false | - | +| limit | 最大允许上传个数 | number | - | - | - | +| show-limit-num | 限制上传个数的情况下，是否展示当前上传的个数 | boolean | - | false | - | +| max-size | 文件大小限制，单位为`byte` | number | - | - | - | +| source-type | 选择图片的来源，chooseImage 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage) | array / string | - | ['album', 'camera'] | - | +| size-type | 所选的图片的尺寸，chooseImage 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage) | array / string | - | ['original', 'compressed'] | - | +| name | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容，uploadFile 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/request/network-file#uploadfile) | string | - | file | - | +| formData | HTTP 请求中其他额外的 form data，uploadFile 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/request/network-file#uploadfile) | object | - | - | - | +| header | HTTP 请求 Header，Header 中不能设置 Referer，uploadFile 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/request/network-file#uploadfile) | object | - | - | - | +| on-preview-fail | 预览失败执行操作 | function({ index, imgList }) | - | - | - | +| before-upload | 上传文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, fileList, resolve }) | - | - | - | +| before-choose | 选择图片之前的钩子，参数为文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ fileList, resolve }) | - | - | - | +| before-remove | 删除文件之前的钩子，参数为要删除的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, fileList, resolve }) | - | - | - | +| before-preview | 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ index, imgList, resolve }) | - | - | - | +| loading-type | [加载中图标类型](/component/loading) | string | - | circular-ring | - | +| loading-color | [加载中图标颜色](/component/loading) | string | - | #ffffff | - | +| loading-size | [加载中图标尺寸](/component/loading) | string | - | 24px | - | +| use-default-slot | 开启默认唤起项插槽 | boolean | - | false | - | +| status-key | file 数据结构中，status 对应的 key | string | - | status | - | ## file 数据结构 -| 键名 | 类型 | 说明 | 最低版本 | -|-----|------|-----|--------| -| uid | number | 当前上传文件在列表中的唯一标识 | - | -| url | string | 上传图片地址 | - | -| action | string | 上传的地址 | - | -| percent | number | 上传进度 | - | -| size | number | 响文件尺寸应码 | - | -| status | string | 当前图片上传状态 | - | -| response | string / object | 后端返回的内容，可能是对象，也可能是字符串 | 2.3.0 | +| 键名 | 类型 | 说明 | 最低版本 | +| -------- | --------------- | ------------------------------------------ | -------- | +| uid | number | 当前上传文件在列表中的唯一标识 | - | +| url | string | 上传图片地址 | - | +| action | string | 上传的地址 | - | +| percent | number | 上传进度 | - | +| size | number | 响文件尺寸应码 | - | +| status | string | 当前图片上传状态 | - | +| response | string / object | 后端返回的内容，可能是对象，也可能是字符串 | - | ## Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| default | 上传唤起插槽样式 | - | +| name | 说明 | 最低版本 | +| ------- | ---------------- | -------- | +| default | 上传唤起插槽样式 | - | ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|--------|------|-----|---------| -| bind:success | 上传成功时触发 | event.detail = { file, fileList } file 为当前选上传的文件，'fileList' 上传图片列表 | - | -| bind:fail | 上传失败时触发 | event.detail = { error, file } error 错误信息，file 上传失败的文件 | - | -| bind:progress | 上传中时触发 | event.detail = { response, file } response 上传中响应信息，file 为当前选上传的文件 | - | -| bind:chooseerror | 选择图片失败时触发 | event.detail = { error } error 选择图片失败的错误信息 | - | -| bind:change | 上传列表修改时触发 | 选中的值 event.detail = { fileList } 'fileList' 上传图片列表 | - | -| bind:remove | 移除图片时触发 | event.detail = { file } file: 移除的文件信息 | - | -| bind:oversize | 文件大小超过限制时触发 | event.detail = { file } file: 尺寸超出的文件信息 | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| ---------------- | ---------------------- | ---------------------------------------------------------------------------------- | -------- | +| success | 上传成功时触发 | event = { file, fileList } file 为当前选上传的文件，'fileList' 上传图片列表 | - | +| fail | 上传失败时触发 | event = { error, file } error 错误信息，file 上传失败的文件 | - | +| progress | 上传中时触发 | event = { response, file } response 上传中响应信息，file 为当前选上传的文件 | - | +| chooseerror | 选择图片失败时触发 | event = { error } error 选择图片失败的错误信息 | - | +| change | 上传列表修改时触发 | 选中的值 event = { fileList } 'fileList' 上传图片列表 | - | +| remove | 移除图片时触发 | event = { file } file: 移除的文件信息 | - | +| oversize | 文件大小超过限制时触发 | event = { file } file: 尺寸超出的文件信息 | - | diff --git a/docs/guide/commonProblems.md b/docs/guide/commonProblems.md index e5334c79..b744eff3 100644 --- a/docs/guide/commonProblems.md +++ b/docs/guide/commonProblems.md @@ -40,7 +40,7 @@ export default { } ``` -## 使用外部样式类 +## 小程序使用外部样式类 Wot Design Uni 开放了大量的自定义样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。需要注意的是普通样式类和自定义样式类的优先级是未定义的，因此使用时请添加`!important`以保证外部样式类的优先级。 ```vue @@ -53,6 +53,60 @@ Wot Design Uni 开放了大量的自定义样式类供开发者使用，具体 } ``` +## 小程序自定义组件渲染问题 +微信/QQ/百度/抖音这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，下面以`divider`组件举例： + +```vue + + + + + + + + + + +``` + +### 解决办法 +在微信端可以使用[virtualHost](https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE)解决，`virtualHost`设为`true`之后会将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签，启用后还可以通过 [mergeVirtualHostAttributes](https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin) 合并合并组件虚拟节点外层属性。 +```js +// vue2使用virtualHost +export default { + data(){ return { } }, + options: { + virtualHost: true + } +} +``` + +```ts +// vue3 script setup 使用virtualHost + + +``` +### 启用virtualHost效果 +这里我们还是以`divider`组件举例： + +```vue + + + + + + + + +``` ## 关于我们 diff --git a/src/model/KV.ts b/src/model/KV.ts deleted file mode 100644 index 48f79882..00000000 --- a/src/model/KV.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * @Author: weisheng - * @Date: 2021-12-28 15:57:08 - * @LastEditTime: 2021-12-28 15:58:09 - * @LastEditors: weisheng - * @Description: - * @FilePath: \fant-mini\src\model\KV.ts - * 记得注释 - */ -export default class KV { - label: string = '' // 操作标题 - value!: T // 操作项数组 -} diff --git a/src/model/OperationOption.ts b/src/model/OperationOption.ts deleted file mode 100644 index 3fefe374..00000000 --- a/src/model/OperationOption.ts +++ /dev/null @@ -1,16 +0,0 @@ -import KV from './KV' - -/* - * @Author: weisheng - * @Date: 2021-12-28 15:13:43 - * @LastEditTime: 2023-03-21 22:34:12 - * @LastEditors: weisheng - * @Description: 模板操作选项 - * @FilePath: \fant-mini-plus\src\model\OperationOption.ts - * 记得注释 - */ -export default class OperationOption { - label: string = '' // 操作的标题（用于展示） - name: string | string[] = '' // 操作真实值用于代码传参 - value: KV[] = [] // 操作项数组 -} diff --git a/src/pages/checkbox/Index.vue b/src/pages/checkbox/Index.vue index a5647148..b5b82cf8 100644 --- a/src/pages/checkbox/Index.vue +++ b/src/pages/checkbox/Index.vue @@ -1,89 +1,89 @@ diff --git a/src/pages/form/Index.vue b/src/pages/form/Index.vue index 8fff0443..5eb60b04 100644 --- a/src/pages/form/Index.vue +++ b/src/pages/form/Index.vue @@ -94,7 +94,7 @@ - + 已阅读并同意 《借款额度合同及相关授权》 @@ -228,7 +228,9 @@ function handleCardId({ value }) { function handlePhone({ value }) { console.log(value) } -function formSubmit() { +function formSubmit(event) { + console.log(event) + if (!couponName.value) { toast.error('请填写优惠券名称') return diff --git a/src/pages/popover/Index.vue b/src/pages/popover/Index.vue index d0380191..d5d5bdd6 100644 --- a/src/pages/popover/Index.vue +++ b/src/pages/popover/Index.vue @@ -4,7 +4,7 @@ - + 点击展示 @@ -12,7 +12,7 @@ - + @@ -23,7 +23,7 @@ - + 列表 diff --git a/src/pages/sticky/Index.vue b/src/pages/sticky/Index.vue index b2c2e4aa..a64204bf 100644 --- a/src/pages/sticky/Index.vue +++ b/src/pages/sticky/Index.vue @@ -65,6 +65,7 @@