mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 01:28:30 +08:00
docs: ✏️ 修复所有组件的文档
This commit is contained in:
xuqingkai
parent
b0b06913e8
commit
4b1d3fc3f8
@ -98,7 +98,7 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| value | 显示值 | string / number | - | - | - | - |
|
||||
| v-model | 显示值 | string / number | - | - | - | - |
|
||||
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | - | - | - |
|
||||
| top | 为正时，角标向下偏移对应的像素 | number | - | - | - |
|
||||
| right | 为正时，角标向左偏移对应的像素 | number | - | - | - |
|
||||
|
||||
@ -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 个月 | - |
|
||||
|
||||
@ -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 个月 | - |
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
# Card 卡片
|
||||
|
||||
|
||||
## 基本使用
|
||||
|
||||
通过 `title` 属性设置标题，默认插槽传入内容。
|
||||
@ -11,7 +10,9 @@
|
||||
```html
|
||||
<wd-card title="经营分析">
|
||||
一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
|
||||
<wd-button slot="footer" size="small" plain>查看详情</wd-button>
|
||||
<template #footer>
|
||||
<wd-button size="small" plain>查看详情</wd-button>
|
||||
</template>
|
||||
</wd-card>
|
||||
```
|
||||
|
||||
@ -21,25 +22,41 @@
|
||||
|
||||
```html
|
||||
<wd-card type="rectangle">
|
||||
<view class="title" slot="title">
|
||||
<view>2020-02-03服务到期</view>
|
||||
<view class="title-tip"><wd-icon name="warning" size="14px" style="vertical-align: bottom"/> 您可以去电脑上使用该服务</view>
|
||||
</view>
|
||||
<template #title>
|
||||
<view class="title">
|
||||
<view>2020-02-03服务到期</view>
|
||||
<view class="title-tip">
|
||||
<wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
|
||||
您可以去电脑上使用该服务
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view style="height: 40px;" class="content">
|
||||
<image src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg" width="40" height="40" alt="joy" style="border-radius: 4px; margin-right: 12px;" />
|
||||
<image
|
||||
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
|
||||
width="40"
|
||||
height="40"
|
||||
alt="joy"
|
||||
style="border-radius: 4px; margin-right: 12px;"
|
||||
/>
|
||||
<view>
|
||||
<view style="color: rgba(0,0,0,0.85); font-size: 16px;">智催评营销</view>
|
||||
<view style="color: rgba(0,0,0,0.25); font-size: 12px;">高级版-快速吸粉 | 周期一年 </view>
|
||||
<view style="color: rgba(0,0,0,0.25); font-size: 12px;">高级版-快速吸粉 | 周期一年</view>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="footer">
|
||||
<wd-button size="small" style="margin-right: 8px;">评价</wd-button>
|
||||
<wd-button size="small" plain>立即使用</wd-button>
|
||||
</view>
|
||||
|
||||
<template #footer>
|
||||
<view>
|
||||
<wd-button size="small" style="margin-right: 8px;">评价</wd-button>
|
||||
<wd-button size="small" plain>立即使用</wd-button>
|
||||
</view>
|
||||
</template>
|
||||
</wd-card>
|
||||
```
|
||||
|
||||
```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 | 底部自定义样式 | - |
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<frame/>
|
||||
|
||||
# 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
|
||||
<wd-cell-group>
|
||||
<wd-cell title="标题文字" value="内容" icon="setting" />
|
||||
<wd-cell title="标题文字" value="内容">
|
||||
<view class="cell-icon" slot="icon"></view>
|
||||
<template #icon>
|
||||
<view class="cell-icon"></view>
|
||||
</template>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
```
|
||||
@ -64,7 +65,7 @@
|
||||
|
||||
## 展示边框线
|
||||
|
||||
在 `wd-cell-group` 上设置 `border` 属性，会给每个cell加上边框，最后一个cell则不展示边框，其他具有 `cell` 类型的表单组件也支持边框展示，如 input、picker。
|
||||
在 `wd-cell-group` 上设置 `border` 属性，会给每个 cell 加上边框，最后一个 cell 则不展示边框，其他具有 `cell` 类型的表单组件也支持边框展示，如 input、picker。
|
||||
|
||||
```html
|
||||
<wd-cell-group title="交易管理" border>
|
||||
@ -78,9 +79,10 @@
|
||||
通过设置 `clickable` 开启点击反馈，之后可以监听`click`事件。
|
||||
|
||||
```html
|
||||
<wd-toast id="wd-toast"/>
|
||||
<wd-toast id="wd-toast" />
|
||||
<wd-cell title="标题文字" value="内容" clickable click="toast" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
const toast = useToast()
|
||||
@ -98,7 +100,7 @@ function showToast() {
|
||||
|
||||
```html
|
||||
<wd-cell title="帮助与反馈" is-link to="/pages/index/index" />
|
||||
<wd-cell title="设置" value="内容" is-link to="/pages/button/index" replace>
|
||||
<wd-cell title="设置" value="内容" is-link to="/pages/button/index" replace></wd-cell>
|
||||
```
|
||||
|
||||
可以只设置 `is-link` 用于展示右箭头和点击态。
|
||||
@ -124,6 +126,7 @@ function showToast() {
|
||||
<wd-rate v-model="rate" change="handleRateChange"></wd-rate>
|
||||
</wd-cell>
|
||||
```
|
||||
|
||||
```typescript
|
||||
const rate = ref(0)
|
||||
|
||||
@ -138,9 +141,10 @@ function handleRateChange({ value }) {
|
||||
|
||||
```html
|
||||
<wd-cell title="上下结构" vertical>
|
||||
<wd-slider v-model="slider" change="handleSliderChange"></wd-slider>
|
||||
<wd-slider v-model="slider" change="handleSliderChange"></wd-slider>
|
||||
</wd-cell>
|
||||
```
|
||||
|
||||
```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
|
||||
<wd-cell-group>
|
||||
@ -174,10 +178,12 @@ function handleSliderChange({ value }) {
|
||||
<view class="custom-text">订购</view>
|
||||
</wd-cell>
|
||||
<wd-cell>
|
||||
<view slot="title">
|
||||
<view style="display: inline-block;">标题文字</view>
|
||||
<view class="end-time">25天后到期</view>
|
||||
</view>
|
||||
<template #title>
|
||||
<view>
|
||||
<view style="display: inline-block">标题文字</view>
|
||||
<view class="end-time">25天后到期</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
```
|
||||
@ -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 时的自定义样式 | - |
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
`value` 为绑定值，通过 `v-model:value` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。
|
||||
`value` 为绑定值，通过 `v-model` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。
|
||||
|
||||
```html
|
||||
<wd-checkbox v-model:value="value" @change="handleChange">单选框1</wd-checkbox>
|
||||
<wd-checkbox v-model="value" @change="handleChange">单选框1</wd-checkbox>
|
||||
```
|
||||
```typescript
|
||||
const value = ref<boolean>(true)
|
||||
@ -23,8 +23,8 @@ function handleChange1({value}) {
|
||||
修改 `shape` 属性，可选值为 'circle'、'square'、'button'，默认为 'circle'。
|
||||
|
||||
```html
|
||||
<wd-checkbox :value="true" shape="square">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="true" shape="button">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="true" shape="square">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="true" shape="button">沃特</wd-checkbox>
|
||||
```
|
||||
|
||||
## 修改选中的颜色
|
||||
@ -33,7 +33,7 @@ function handleChange1({value}) {
|
||||
|
||||
```html
|
||||
<wd-checkbox
|
||||
v-model:value="value"
|
||||
v-model="value"
|
||||
checked-color="#f00"
|
||||
>
|
||||
沃特
|
||||
@ -50,7 +50,7 @@ const value = ref<boolean>(true)
|
||||
|
||||
```html
|
||||
<wd-checkbox
|
||||
:value="true"
|
||||
:modelValue="true"
|
||||
true-value="沃特"
|
||||
false-value="商家后台"
|
||||
>
|
||||
@ -64,8 +64,8 @@ const value = ref<boolean>(true)
|
||||
|
||||
```html
|
||||
<wd-checkbox-group v-model="value">
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
```typescript
|
||||
@ -77,8 +77,8 @@ const value = ref<number[]>([])
|
||||
```html
|
||||
|
||||
<wd-checkbox-group v-model="value1" cell>
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
|
||||
@ -86,13 +86,13 @@ const value = ref<number[]>([])
|
||||
|
||||
```html
|
||||
<wd-checkbox-group v-model="value2" cell shape="button">
|
||||
<wd-checkbox value="1" disabled>选项一</wd-checkbox>
|
||||
<wd-checkbox value="2">选项二</wd-checkbox>
|
||||
<wd-checkbox value="3">选项三</wd-checkbox>
|
||||
<wd-checkbox value="4">选项四</wd-checkbox>
|
||||
<wd-checkbox value="5">选项五</wd-checkbox>
|
||||
<wd-checkbox value="6">选项六</wd-checkbox>
|
||||
<wd-checkbox value="7">选项七</wd-checkbox>
|
||||
<wd-checkbox modelValue="1" disabled>选项一</wd-checkbox>
|
||||
<wd-checkbox modelValue="2">选项二</wd-checkbox>
|
||||
<wd-checkbox modelValue="3">选项三</wd-checkbox>
|
||||
<wd-checkbox modelValue="4">选项四</wd-checkbox>
|
||||
<wd-checkbox modelValue="5">选项五</wd-checkbox>
|
||||
<wd-checkbox modelValue="6">选项六</wd-checkbox>
|
||||
<wd-checkbox modelValue="7">选项七</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
|
||||
@ -108,8 +108,8 @@ const value2 = ref(['1'])
|
||||
|
||||
```html
|
||||
<wd-checkbox-group v-model="value" inline>
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
|
||||
@ -123,8 +123,8 @@ const value = ref(['jingmai'])
|
||||
|
||||
```html
|
||||
<wd-checkbox-group v-model="value" disabled>
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
|
||||
@ -137,10 +137,10 @@ const value = ref(['jingmai'])
|
||||
|
||||
```html
|
||||
<wd-checkbox-group v-model="value" :min="1" :max="3">
|
||||
<wd-checkbox value="jd">京东</wd-checkbox>
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox value="market">营销中心</wd-checkbox>
|
||||
<wd-checkbox modelValue="jd">京东</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="market">营销中心</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
```typescript
|
||||
@ -154,8 +154,8 @@ const value = ref(['jd'])
|
||||
|
||||
```html
|
||||
<wd-checkbox-group v-model="value" size="large">
|
||||
<wd-checkbox value="1">沃特</wd-checkbox>
|
||||
<wd-checkbox value="2">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="1">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="2">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -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
|
||||
<wd-collapse value="{{ value }}" bind:change="handleChange1">
|
||||
<wd-collapse-item title="标签1" name="item1">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签2" name="item2">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签3" name="item3">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签1" name="item1">这是一条简单的示例文字。</wd-collapse-item>
|
||||
<wd-collapse-item title="标签2" name="item2">这是一条简单的示例文字。</wd-collapse-item>
|
||||
<wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
@ -39,15 +33,9 @@ page({
|
||||
|
||||
```html
|
||||
<wd-collapse value="{{ value }}" accordion>
|
||||
<wd-collapse-item title="标签1" name="item1">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签2" name="item2">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签3" name="item3">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签1" name="item1">这是一条简单的示例文字。</wd-collapse-item>
|
||||
<wd-collapse-item title="标签2" name="item2">这是一条简单的示例文字。</wd-collapse-item>
|
||||
<wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
@ -57,15 +45,9 @@ page({
|
||||
|
||||
```html
|
||||
<wd-collapse value="{{ value }}">
|
||||
<wd-collapse-item title="标签1" name="item1">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签2" name="item2" disabled >
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签3" name="item3">
|
||||
这是一条简单的示例文字。
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="标签1" name="item1">这是一条简单的示例文字。</wd-collapse-item>
|
||||
<wd-collapse-item title="标签2" name="item2" disabled>这是一条简单的示例文字。</wd-collapse-item>
|
||||
<wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
@ -78,59 +60,67 @@ Collapse 可以单独使用，通过设置 `viewmore` 属性，将其转化为
|
||||
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
## 查看更多-使用插槽
|
||||
|
||||
Collapse 查看更多的模式下，可以使用插槽定义自己想要的折叠处样式，使用 `use-more-slot` 设置插槽开启。并且可以使用外部样式类 `custom-more-slot-class` 为自定义插槽设置样式。
|
||||
|
||||
```scss
|
||||
.more-slot{
|
||||
.more-slot {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<wd-collapse viewmore value="{{ value }}" bind:change="handleChange4" use-more-slot custom-more-slot-class="more-slot">
|
||||
具名插槽：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
|
||||
<view slot="more">显示全部</view>
|
||||
<template #more>
|
||||
<view>显示全部</view>
|
||||
</template>
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
## 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 | 查看更多模式下的插槽外部自定义样式 | - |
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -112,7 +112,7 @@ html 文件代码：
|
||||
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable v-model="phone" @change="handlePhone" />
|
||||
</wd-cell-group>
|
||||
<view class="tip">
|
||||
<wd-checkbox :value="read" name="read" @change="handleRead" custom-label-class="label-class">
|
||||
<wd-checkbox v-model="read" name="read" @change="handleRead" custom-label-class="label-class">
|
||||
已阅读并同意
|
||||
<text style="color: #4d80f0">《借款额度合同及相关授权》</text>
|
||||
</wd-checkbox>
|
||||
|
||||
@ -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 | - | - | - |
|
||||
|
||||
@ -93,7 +93,7 @@ function handleChange1({ value }) {
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| value | 绑定值 | number / string | - | - | - |
|
||||
| v-model | 绑定值 | number / string | - | - | - |
|
||||
| min | 最小值 | number | - | 1 | - |
|
||||
| max | 最大值 | number | - | Infinity | - |
|
||||
| step | 步数 | number | - | 1 | - |
|
||||
|
||||
@ -45,7 +45,7 @@ function handleChange({ value }) {
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| value | 绑定值 | number | - | - | - |
|
||||
| v-model | 绑定值 | number | - | - | - |
|
||||
| prev-text | 上一页按钮文字 | string | - | 上一页 | - |
|
||||
| next-text | 下一页按钮文字 | string | - | 下一页 | - |
|
||||
| total-page | 总页数，如果有total，则优先使用total计算页数 | number | - | `根据页数计算` | - |
|
||||
|
||||
@ -16,7 +16,7 @@ Popover 的属性与 [Tooltip](/#/components/tooltip) 很类似，因此对于
|
||||
|
||||
```html
|
||||
<view @click="clickoutside">
|
||||
<wd-popover v-model:show="show" content="这是一段信息。" @change="handleChange">
|
||||
<wd-popover v-model="show" content="这是一段信息。" @change="handleChange">
|
||||
<wd-button>点击展示</wd-button>
|
||||
</wd-popover>
|
||||
</view>
|
||||
@ -56,7 +56,7 @@ function handleChange1({ show }) {
|
||||
**注意：iconClass 属性值为组件库内部的 icon 图标名。**
|
||||
|
||||
```html
|
||||
<wd-popover v-model:show="show" mode="menu" :content="menu" @menu-click="link" @change="handleChange">
|
||||
<wd-popover v-model="show" mode="menu" :content="menu" @menu-click="link" @change="handleChange">
|
||||
<wd-button>列表</wd-button>
|
||||
</wd-popover>
|
||||
```
|
||||
@ -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 | - |
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -65,7 +65,7 @@ function changeValue({ value }) {
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|-----|------|-------|-------|--------|
|
||||
| value | 当前分数 | number | - | - | - |
|
||||
| v-model | 当前分数 | number | - | - | - |
|
||||
| num | 评分最大值 | number | - | 5 | - |
|
||||
| readonly | 是否只读 | boolean | - | false | - |
|
||||
| size | 图标大小 | string | - | 16px | - |
|
||||
|
||||
@ -77,12 +77,14 @@ function change({ value }) {
|
||||
|
||||
```html
|
||||
<wd-search v-model="value">
|
||||
<wd-popover slot="prefix" mode="menu" :content="menu" @menuclick="changeSearchType">
|
||||
<view class="search-type">
|
||||
<text>{{ searchType }}</text>
|
||||
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
|
||||
</view>
|
||||
</wd-popover>
|
||||
<template #prefix>
|
||||
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
|
||||
<view class="search-type">
|
||||
<text>{{ searchType }}</text>
|
||||
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
|
||||
</view>
|
||||
</wd-popover>
|
||||
</template>
|
||||
</wd-search>
|
||||
```
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<frame/>
|
||||
|
||||
# SelectPicker 单复选选择器
|
||||
|
||||
# SelectPicker 单复选选择器
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -9,79 +8,60 @@
|
||||
|
||||
`columns` 设置数据源，为二维数组，每一列为一个一维数组，每个选项包含 `value`(选项值) 和 `label`(选项名称)；
|
||||
|
||||
`value` 设置选中项的值，数据类型为 `Array` | `String` `Number` 或 `Boolean`；
|
||||
|
||||
监听 `bind:confirm` 事件，获取新值。
|
||||
`v-model` 设置选中项的值，数据类型为 `Array` | `String` `Number` 或 `Boolean`；
|
||||
|
||||
```html
|
||||
<wd-select-picker label="基本用法" value="{{ value }}" columns="{{ columns }}" bindchange="handleChange" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="基本用法" v-model="value" :columns="columns" @change="handleChange"></wd-select-picker>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns1: [
|
||||
{
|
||||
value: '1',
|
||||
label: '沃特'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '京东金融'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '京me'
|
||||
}
|
||||
],
|
||||
value: ['1']
|
||||
const columns = ref<Record<string, any>>([
|
||||
{
|
||||
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<string[]>(['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
|
||||
<wd-select-picker label="类型切换" value="{{ value }}" columns="{{ columns }}" type="radio" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="类型切换" v-model="value" :columns="columns" type="radio"></wd-select-picker>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns1: [
|
||||
{
|
||||
value: '1',
|
||||
label: '沃特'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '京东金融'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '京me'
|
||||
}
|
||||
],
|
||||
value: '1'
|
||||
const columns = ref<Record<string, any>>([
|
||||
{
|
||||
value: '101',
|
||||
label: '男装'
|
||||
},
|
||||
handleConfirm (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
{
|
||||
value: '102',
|
||||
label: '奢侈品'
|
||||
},
|
||||
{
|
||||
value: '103',
|
||||
label: '女装'
|
||||
}
|
||||
})
|
||||
])
|
||||
const value = ref<string[]>(['101'])
|
||||
```
|
||||
|
||||
## 禁用
|
||||
@ -89,7 +69,7 @@ Page({
|
||||
设置 `disabled` 属性。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="禁用" value="{{ value }}" columns="{{ columns }}" disabled binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="禁用" v-model="value" :columns="columns" disabled></wd-select-picker>
|
||||
```
|
||||
|
||||
## 只读
|
||||
@ -97,7 +77,7 @@ Page({
|
||||
设置 `readonly` 属性。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="只读" value="{{ value }}" columns="{{ columns }}" readonly binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="只读" v-model="value" :columns="columns" readonly></wd-select-picker>
|
||||
```
|
||||
|
||||
## 禁用选项
|
||||
@ -105,35 +85,26 @@ Page({
|
||||
`columns` 每个选项支持 `disabled` 属性。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="禁用选项" value="{{ value }}" columns="{{ columns }}" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="禁用选项" v-model="value" :columns="columns"></wd-select-picker>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns1: [
|
||||
{
|
||||
value: '1',
|
||||
label: '沃特',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '京东金融'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '京me'
|
||||
}
|
||||
],
|
||||
value: ['1']
|
||||
const columns = ref<Record<string, any>>([
|
||||
{
|
||||
value: '101',
|
||||
label: '男装',
|
||||
disabled: true
|
||||
},
|
||||
handleConfirm (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
{
|
||||
value: '102',
|
||||
label: '奢侈品'
|
||||
},
|
||||
{
|
||||
value: '103',
|
||||
label: '女装'
|
||||
}
|
||||
})
|
||||
])
|
||||
const value = ref<string[]>(['101'])
|
||||
```
|
||||
|
||||
## 展示格式化
|
||||
@ -141,90 +112,73 @@ Page({
|
||||
设置 `display-format` 属性，其类型为 `function`，接收当前选中项（当类型`checkbox`时 参数是 数组类型，类型为`radio` 时参数是 `String` `Number` 或 `Boolean` 类型）, 当前的选项数组 `columns`，返回要展示的字符串。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="展示格式化" value="{{ value }}" columns="{{ columns }}" :display-format="displayFormat" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="展示格式化" v-model="value" :columns="columns" :display-format="displayFormat"></wd-select-picker>
|
||||
```
|
||||
|
||||
```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<Record<string, any>>([
|
||||
{
|
||||
value: '101',
|
||||
label: '男装',
|
||||
disabled: true
|
||||
},
|
||||
handleConfirm (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
{
|
||||
value: '102',
|
||||
label: '奢侈品'
|
||||
},
|
||||
{
|
||||
value: '103',
|
||||
label: '女装'
|
||||
}
|
||||
})
|
||||
])
|
||||
const value = ref<string[]>(['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
|
||||
<wd-select-picker label="确定前校验" value="{{ value }}" columns="{{ columns }}" :before-confirm="beforeConfirm" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="确定前校验" v-model="value" :columns="columns" :before-confirm="beforeConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
```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<Record<string, any>>([
|
||||
{
|
||||
value: '101',
|
||||
label: '男装'
|
||||
},
|
||||
handleConfirm (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
{
|
||||
value: '102',
|
||||
label: '奢侈品'
|
||||
},
|
||||
{
|
||||
value: '103',
|
||||
label: '女装'
|
||||
}
|
||||
})
|
||||
])
|
||||
const value = ref<string[]>(['101'])
|
||||
|
||||
const beforeConfirm = (value, resolve) => {
|
||||
if (value.length > 0) {
|
||||
toast.error('暂时无法选择商品')
|
||||
resolve(false)
|
||||
} else {
|
||||
resolve(true)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 设置标题
|
||||
@ -232,7 +186,7 @@ Page({
|
||||
设置 `title` 属性，修改弹出层的标题。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="标题" value="{{ value }}" columns="{{ columns }}" title="多选" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="标题" v-model="value" :columns="columns" title="多选"></wd-select-picker>
|
||||
```
|
||||
|
||||
## 错误状态
|
||||
@ -240,7 +194,7 @@ Page({
|
||||
设置 `error` 属性，选择器的值显示为红色。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="错误" value="{{ value }}" columns="{{ columns }}" error binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="错误" v-model="value" :columns="columns" error></wd-select-picker>
|
||||
```
|
||||
|
||||
## 必填样式
|
||||
@ -248,7 +202,7 @@ Page({
|
||||
设置 `required` 属性，展示必填样式。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="必填" value="{{ value }}" columns="{{ columns }}" required binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="必填" v-model="value" :columns="columns" required></wd-select-picker>
|
||||
```
|
||||
|
||||
## 选择器大小
|
||||
@ -256,7 +210,7 @@ Page({
|
||||
通过设置 `size` 修改选择器大小，将 `size` 设置为 'large' 时字号为 16px。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="大尺寸" value="{{ value }}" columns="{{ columns }}" size="large" binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="大尺寸" v-model="value" :columns="columns" size="large"></wd-select-picker>
|
||||
```
|
||||
|
||||
## 值靠右展示
|
||||
@ -264,7 +218,7 @@ Page({
|
||||
设置 `align-right` 属性，选择器的值靠右展示。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="值靠右展示" value="{{ value }}" columns="{{ columns }}" align-right binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="值靠右展示" v-model="value" :columns="columns" align-right></wd-select-picker>
|
||||
```
|
||||
|
||||
## 可搜索
|
||||
@ -272,7 +226,7 @@ Page({
|
||||
设置 `filterable` 属性支持本地搜索，设置 `filter-placeholder` 属性设置搜索框的占位符。
|
||||
|
||||
```html
|
||||
<wd-select-picker label="可搜索" value="{{ value }}" columns="{{ columns }}" filterable binconfirm="handleConfirm"></wd-select-picker>
|
||||
<wd-select-picker label="可搜索" v-model="value" :columns="columns" filterable></wd-select-picker>
|
||||
```
|
||||
|
||||
## 自定义选择器
|
||||
@ -281,115 +235,148 @@ Page({
|
||||
|
||||
```html
|
||||
<veiw>当前选中项：{{customShow}}</view>
|
||||
<wd-select-picker value="{{ value }}" columns="{{ columns }}" binconfirm="handleConfirm">
|
||||
<wd-select-picker v-model="value" use-default-slot :columns="columns" @confirm="handleConfirm">
|
||||
<wd-button>默认唤起项</wd-button>
|
||||
</wd-select-picker>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns: [
|
||||
{
|
||||
value: '1',
|
||||
label: '沃特'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '京东金融'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '京me'
|
||||
}
|
||||
],
|
||||
value: [],
|
||||
customShow: ''
|
||||
const value = ref<string[]>(['102'])
|
||||
|
||||
const columns = ref<Record<string, any>>([
|
||||
{
|
||||
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 | 弹出层内容区域自定义样式 | - |
|
||||
|
||||
@ -7,47 +7,29 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
`value` 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。
|
||||
`v-model` 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。
|
||||
```html
|
||||
<wd-slider value="{{ value }}" bind:dragend="handleChange"/>
|
||||
<wd-slider v-model="value"/>
|
||||
```
|
||||
```typescript
|
||||
page({
|
||||
data: {
|
||||
value: 30,
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
}
|
||||
})
|
||||
const value = ref<number>(30)
|
||||
```
|
||||
## 双滑块
|
||||
|
||||
双滑块模式下 `value` 为 `二元数组` 类型。
|
||||
|
||||
```html
|
||||
<wd-slider value="{{ value }}" bind:dragend="handleChange"/>
|
||||
<wd-slider v-model="value" />
|
||||
```
|
||||
```typescript
|
||||
page({
|
||||
data: {
|
||||
value: [10, 30],
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
}
|
||||
})
|
||||
const value = ref<number[]>([10, 30])
|
||||
```
|
||||
## 最大值最小值
|
||||
|
||||
设置 `min` 最小值，`min` 最大值。
|
||||
|
||||
```html
|
||||
<wd-slider value="{{ value }}" min="{{ 4 }}" max="{{ 10000 }}" bind:dragend="handleChange"/>
|
||||
<wd-slider v-model="value" :min="4" :max="1000" />
|
||||
```
|
||||
|
||||
## 隐藏文案
|
||||
@ -55,13 +37,13 @@ page({
|
||||
设置 `hide-label` 隐藏滑块当前值。
|
||||
|
||||
```html
|
||||
<wd-slider value="{{ value }}" hide-label bbind:dragend="handleChange"/>
|
||||
<wd-slider v-model="value" hide-label/>
|
||||
```
|
||||
|
||||
设置 `hide-min-max` 隐藏最大最小值。
|
||||
|
||||
```html
|
||||
<wd-slider value="{{ value }}" hide-min-max bind:dragend="handleChange"/>
|
||||
<wd-slider v-model="value" hide-min-max />
|
||||
```
|
||||
|
||||
## 禁用
|
||||
@ -69,13 +51,13 @@ page({
|
||||
设置 `disabled` 属性。
|
||||
|
||||
```html
|
||||
<wd-slider value="{{ value }}" disabled bind:dragend="handleChange"/>
|
||||
<wd-slider v-model="value" disabled />
|
||||
```
|
||||
|
||||
## 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 }` | - |
|
||||
|
||||
## 外部样式类
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|
||||
@ -5,23 +5,18 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
`value` 为组件状态，其值为：`-1、0、1`，分别代表：降序、未选中状态、升序。 `title` 为展示文案，按钮默认处于未选中状态，监听 `bind:change` 事件获取新值。
|
||||
使用`v-model` 绑定组件展示状态，其值为：`-1、0、1`，分别代表：降序、未选中状态、升序。 `title` 为展示文案，按钮默认处于未选中状态。
|
||||
|
||||
```html
|
||||
<wd-sort-button title="价格" value="{{value}}" bind:change="handleChange" />
|
||||
<wd-sort-button title="价格" v-model="value" @change="handleChange" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: 0
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
}
|
||||
})
|
||||
const value = ref<number>(0)
|
||||
|
||||
function handleChange({ value }) {
|
||||
console.log(value)
|
||||
}
|
||||
```
|
||||
|
||||
## 按钮重置
|
||||
@ -37,7 +32,7 @@ Page({
|
||||
通过设置 `desc-first` 优先切换为降序，默认为升序。
|
||||
|
||||
```html
|
||||
<wd-sort-button value="{{ value }}" desc-first title="价格" />
|
||||
<wd-sort-button v-model="value" desc-first title="价格" />
|
||||
```
|
||||
|
||||
## 取消展示下划线
|
||||
@ -45,14 +40,14 @@ Page({
|
||||
当只有一个排序按钮时，应该不展示下划线，设置 `line` 属性为 `false`。
|
||||
|
||||
```html
|
||||
<wd-sort-button value="{{ value }}" line="{{false}}" title="价格" />
|
||||
<wd-sort-button v-model="value" :line="false" title="价格" />
|
||||
```
|
||||
|
||||
## 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 }` | - |
|
||||
|
||||
## 外部样式类
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
`active` 为步骤进度，为 number 类型，步骤的下标。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 0 }}">
|
||||
<wd-steps :active="0">
|
||||
<wd-step />
|
||||
<wd-step />
|
||||
<wd-step />
|
||||
@ -20,7 +20,7 @@
|
||||
设置 `align-center` 水平居中，只对横向步骤条有效。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 0 }}" align-center>
|
||||
<wd-steps :active="0" align-center>
|
||||
<wd-step />
|
||||
<wd-step />
|
||||
<wd-step />
|
||||
@ -32,7 +32,7 @@
|
||||
可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题，则会使用默认的文案。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 0 }}" align-center>
|
||||
<wd-steps :active="0" align-center>
|
||||
<wd-step title="步骤1" description="注册1个账号" />
|
||||
<wd-step title="步骤2" description="登录账号并绑定手机" />
|
||||
<wd-step title="步骤3" description="完善个人信息" />
|
||||
@ -44,7 +44,7 @@
|
||||
可以通过 `icon` 属性设置步骤的图标，传入图标的名称，也可以通过 `icon` 的 slot 插槽自定义图标，使用插槽需要设置 `icon-slot` 为 `true`。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 1 }}" align-center>
|
||||
<wd-steps :active="1" align-center>
|
||||
<wd-step icon="invite" />
|
||||
<wd-step icon="link" />
|
||||
<wd-step icon="clock" />
|
||||
@ -56,7 +56,7 @@
|
||||
设置 `vertical` 属性。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 1 }}" vertical>
|
||||
<wd-steps :active="1" vertical>
|
||||
<wd-step description="注册1个账号" />
|
||||
<wd-step description="登录账号并绑定手机" />
|
||||
<wd-step description="完善个人信息" />
|
||||
@ -68,7 +68,7 @@
|
||||
设置 `dot` 属性。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 1 }}" vertical dot>
|
||||
<wd-steps :active="1" vertical dot>
|
||||
<wd-step description="注册1个账号" />
|
||||
<wd-step description="登录账号并绑定手机" />
|
||||
<wd-step description="完善个人信息" />
|
||||
@ -80,7 +80,7 @@
|
||||
设置 `status`，支持 'finished'（完成）、'process'（进行中）、'error'（失败） 三种状态。
|
||||
|
||||
```html
|
||||
<wd-steps active="{{ 1 }}" align-center>
|
||||
<wd-steps :active="1" align-center>
|
||||
<wd-step title="绑定手机" status="error" />
|
||||
<wd-step title="重新绑定手机" />
|
||||
<wd-step title="步骤3" />
|
||||
|
||||
@ -23,25 +23,24 @@
|
||||
|
||||
```html
|
||||
<view style="margin-top: 20px;">
|
||||
<wd-button type="error" jd:if="{{show}}">点击插入</wd-button>
|
||||
<wd-button type="error" v-if="show">点击插入</wd-button>
|
||||
<wd-sticky>
|
||||
<wd-button type="success" jd:if="{{show}}">动态插入</wd-button>
|
||||
<wd-button type="success" v-if="show">动态插入</wd-button>
|
||||
</wd-sticky>
|
||||
</view>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
show: false
|
||||
},
|
||||
display () {
|
||||
this.setData({ show: true })
|
||||
},
|
||||
onShow () {
|
||||
setTimeout(this.display, 5000)
|
||||
}
|
||||
const show = ref<boolean>(false)
|
||||
|
||||
function display() {
|
||||
show.value = true
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
setTimeout(display, 5000)
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
```scss
|
||||
@ -56,7 +55,7 @@ page{
|
||||
通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。
|
||||
|
||||
```html
|
||||
<wd-sticky offset-top="{{50}}">
|
||||
<wd-sticky :offset-top="50">
|
||||
<wd-button>吸顶距离</wd-button>
|
||||
</wd-sticky>
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<frame/>
|
||||
|
||||
# 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
|
||||
<view catchtap="clickoutside">
|
||||
<view @click.stop="clickoutside">
|
||||
<wd-swipe-action>
|
||||
<wd-cell title="标题文字" value="内容"/>
|
||||
<view slot="right" class="action">
|
||||
<view class="button" style="background: #C8C7CD;" bindtap="handleAction" data-action="操作1">操作1</view>
|
||||
<view class="button" style="background: #FFB300;" bindtap="handleAction" data-action="操作2">操作2</view>
|
||||
<view class="button" style="background: #E2231A;" bindtap="handleAction" data-action="操作3">操作3</view>
|
||||
</view>
|
||||
<template #right>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #C8C7CD;" @click="handleAction("操作1")">操作1</view>
|
||||
<view class="button" style="background: #FFB300;" @click="handleAction('操作2')">操作2</view>
|
||||
<view class="button" style="background: #E2231A;" @click="handleAction('操作3')">操作3</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</wd-swipe-action>
|
||||
</view>
|
||||
```
|
||||
```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
|
||||
<wd-swipe-action>
|
||||
<view slot="left" class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
<template #left>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
</template>
|
||||
<wd-cell title="标题文字" value="内容" />
|
||||
<view slot="right" class="action">
|
||||
<view class="button" style="background: #cdb86e;">操作4</view>
|
||||
<view class="button" style="background: #42ffd1;">操作5</view>
|
||||
<view class="button" style="background: #383fe2;">操作6</view>
|
||||
</view>
|
||||
<template #right>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #cdb86e;">操作4</view>
|
||||
<view class="button" style="background: #42ffd1;">操作5</view>
|
||||
<view class="button" style="background: #383fe2;">操作6</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
```
|
||||
|
||||
## 切换按钮
|
||||
|
||||
> 可以通过设置`value`来控制开启关闭滑动按钮，可选值为:`left`、`close`、`right`分别表示："打开左滑动按钮"、"关闭滑动按钮""打开右滑动按钮"
|
||||
> 可以通过设置`v-model`来控制开启关闭滑动按钮，可选值为:`left`、`close`、`right`分别表示："打开左滑动按钮"、"关闭滑动按钮""打开右滑动按钮"
|
||||
|
||||
```html
|
||||
<wd-swipe-action value="{{value}}">
|
||||
<view slot="left" class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
<wd-cell title="标题文字" value="内容"/>
|
||||
<view slot="right" class="action">
|
||||
<view class="button" style="background: #cdb86e;">操作4</view>
|
||||
<view class="button" style="background: #42ffd1;">操作5</view>
|
||||
<view class="button" style="background: #383fe2;">操作6</view>
|
||||
</view>
|
||||
<wd-swipe-action v-model="value">
|
||||
<template #left>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
</template>
|
||||
<wd-cell title="标题文字" value="内容" />
|
||||
<template #right>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #cdb86e;">操作4</view>
|
||||
<view class="button" style="background: #42ffd1;">操作5</view>
|
||||
<view class="button" style="background: #383fe2;">操作6</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
|
||||
<view class="button-group">
|
||||
<wd-button data-value='left' bindclick="changeState">打开左边</wd-button>
|
||||
<wd-button data-value='close' bindclick="changeState">关闭所有</wd-button>
|
||||
<wd-button data-value='right' bindclick="changeState">打开右边</wd-button>
|
||||
<wd-button @click="changeState('left')">打开左边</wd-button>
|
||||
<wd-button @click="changeState('close')">关闭所有</wd-button>
|
||||
<wd-button @click="changeState('right')">打开右边</wd-button>
|
||||
</view>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: 'close'
|
||||
},
|
||||
changeState (event) {
|
||||
const { value } = event.target.dataset
|
||||
this.setData({ value })
|
||||
}
|
||||
})
|
||||
const value = ref<string>('close')
|
||||
function changeState(position: string) {
|
||||
value.value = position
|
||||
}
|
||||
```
|
||||
|
||||
## 按钮关闭前的钩子函数
|
||||
@ -122,42 +131,49 @@ Page({
|
||||
|
||||
```html
|
||||
<demo-block transparent title="切换按钮">
|
||||
<wd-swipe-action value="{{value}}" before-close="{{beforeClose}}">
|
||||
<view slot="left" class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
<wd-cell title="标题文字" value="内容"/>
|
||||
<view slot="right" class="action">
|
||||
<view class="button" style="background: #cdb86e;">操作4</view>
|
||||
<view class="button" style="background: #42ffd1;">操作5</view>
|
||||
<view class="button" style="background: #383fe2;">操作6</view>
|
||||
</view>
|
||||
<wd-swipe-action v-model="value" :before-close="beforeClose">
|
||||
<template #left>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
</template>
|
||||
<wd-cell title="标题文字" value="内容" />
|
||||
<template #right>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #cdb86e;">操作4</view>
|
||||
<view class="button" style="background: #42ffd1;">操作5</view>
|
||||
<view class="button" style="background: #383fe2;">操作6</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
|
||||
<view class="button-group">
|
||||
<wd-button data-value='left' bindclick="changeState">打开左边</wd-button>
|
||||
<wd-button data-value='close' bindclick="changeState">关闭所有</wd-button>
|
||||
<wd-button data-value='right' bindclick="changeState">打开右边</wd-button>
|
||||
<wd-button @click="changeState('left')">打开左边</wd-button>
|
||||
<wd-button @click="changeState('close')">关闭所有</wd-button>
|
||||
<wd-button @click="changeState('right')">打开右边</wd-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
```
|
||||
```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<string>('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
|
||||
<wd-swipe-action bind:click="handleClick">
|
||||
<wd-cell title="标题文字" value="内容"/>
|
||||
<view slot="right" class="action">
|
||||
<wd-swipe-action @click="handleClick">
|
||||
<wd-cell title="标题文字" value="内容" />
|
||||
<template #right>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
</wd-swipe-action>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
```
|
||||
```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
|
||||
<wd-swipe-action disabled>
|
||||
<wd-cell title="标题文字" value="内容" />
|
||||
<view slot="right" class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
<template #right>
|
||||
<view class="action">
|
||||
<view class="button" style="background: #C8C7CD;">操作1</view>
|
||||
<view class="button" style="background: #FFB300;">操作2</view>
|
||||
<view class="button" style="background: #E2231A;">操作3</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
```
|
||||
|
||||
## 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 | 根结点样式 | - |
|
||||
|
||||
@ -5,23 +5,14 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
设置 `value` 值，监听 `change` 事件修改值。
|
||||
`v-model` 值，为绑定值，默认为 boolean 类型。
|
||||
|
||||
```html
|
||||
<wd-switch value="{{ checked }}" bind:change="handleChange" />
|
||||
<wd-switch v-model="checked" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
checked: true
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({
|
||||
checked: event.detail.value
|
||||
})
|
||||
}
|
||||
})
|
||||
const checked = ref<boolean>(true)
|
||||
```
|
||||
|
||||
## 修改值
|
||||
@ -29,7 +20,7 @@ Page({
|
||||
通过 `active-value` 属性修改开关打开时的值，`inactive-value` 属性修改开关关闭时的值。
|
||||
|
||||
```html
|
||||
<wd-switch value="{{ checked }}" active-value="沃特" inactive-value="商家后台" />
|
||||
<wd-switch v-model="checked" active-value="沃特" inactive-value="商家后台" />
|
||||
```
|
||||
|
||||
## 修改颜色
|
||||
@ -37,7 +28,7 @@ Page({
|
||||
通过 `active-color` 属性修改开关打开时的颜色，`inactive-color` 属性修改开关关闭时的颜色。
|
||||
|
||||
```html
|
||||
<wd-switch value="{{ checked }}" active-color="#13ce66" inactive-color="#f00" />
|
||||
<wd-switch v-model="checked" active-color="#13ce66" inactive-color="#f00" />
|
||||
```
|
||||
|
||||
## 修改大小
|
||||
@ -45,7 +36,7 @@ Page({
|
||||
设置 `size` 修改开关大小。
|
||||
|
||||
```html
|
||||
<wd-switch value="{{ checked }}" size="20px" />
|
||||
<wd-switch v-model="checked" size="20px" />
|
||||
```
|
||||
|
||||
## 禁用
|
||||
@ -57,27 +48,31 @@ Page({
|
||||
设置 `before-change` 属性，修改前钩子，接收 { value, resolve } 参数，`resolve(true)` 表示修改通过，`resolve(false)` 表示不修改。
|
||||
|
||||
```html
|
||||
<wd-switch value="{{ checked }}" before-change="{{ beforeChange }}" bind:change="handleChange" />
|
||||
<wd-switch v-model="checked" :before-change="beforeChange" bind:change="handleChange" />
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
|
||||
@ -10,13 +10,17 @@
|
||||
> 当`value`为`number`类型时，`wd-tab`可以不必设置`name`。同时如果value超出了tab数量，会用0自动兜底
|
||||
|
||||
```html
|
||||
<wd-tabs value="{{0}}">
|
||||
<block jd:for="{{4}}" jd:key="$this">
|
||||
<wd-tab title="标签{{item + 1}}">
|
||||
<view class="content">内容{{item + 1}}</view>
|
||||
<wd-tabs v-model="tab">
|
||||
<block v-for="item in 4" :key="item">
|
||||
<wd-tab :title="`标签${item}`">
|
||||
<view class="content">内容{{ item}}</view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
```
|
||||
```typescript
|
||||
const tab = ref<number>(0)
|
||||
|
||||
```
|
||||
```scss
|
||||
.content{
|
||||
@ -25,30 +29,30 @@
|
||||
}
|
||||
```
|
||||
|
||||
## 滑动动画
|
||||
<!-- ## 滑动动画
|
||||
|
||||
设置 `animated` 属性，开启tab切换动画。
|
||||
|
||||
```html
|
||||
<wd-tabs value="{{0}}" animated>
|
||||
<block jd:for="{{4}}" jd:key="$this">
|
||||
<wd-tab title="标签{{item + 1}}">
|
||||
<view class="content">内容{{item + 1}}</view>
|
||||
<wd-tabs v-model="tab" animated>
|
||||
<block v-for="item in 4" :key="item">
|
||||
<wd-tab :title="`标签${item}`">
|
||||
<view class="content">内容{{ item }}</view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
|
||||
```
|
||||
``` -->
|
||||
|
||||
## 粘性布局
|
||||
|
||||
设置 `sticky` 属性，使用粘性布局。可以设置 `offset-top` 属性，当距离窗口顶部多少像素时，固定标签头。
|
||||
|
||||
```html
|
||||
<wd-tabs value="{{0}}" sticky>
|
||||
<block jd:for="{{4}}" jd:key="$this">
|
||||
<wd-tab title="标签{{item + 1}}">
|
||||
<view class="content">内容{{item + 1}}</view>
|
||||
<wd-tabs v-model="tab" sticky>
|
||||
<block v-for="item in 4" :key="item">
|
||||
<wd-tab :title="`标签${item}`">
|
||||
<view class="content">内容{{ item}}</view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
@ -59,10 +63,10 @@
|
||||
在 `wd-tab` 上设置 `disabled` 属性，禁用某个页签。
|
||||
|
||||
```html
|
||||
<wd-tabs value="{{0}}">
|
||||
<block jd:for="{{4}}" jd:key="$this">
|
||||
<wd-tab title="标签{{item + 1}}" disabled="{{item === 1}}">
|
||||
<view class="content">内容{{item + 1}}</view>
|
||||
<wd-tabs v-model="tab">
|
||||
<block v-for="item in 4" :key="item">
|
||||
<wd-tab :title="`标签${item}`" :disabled="item === 1">
|
||||
<view class="content">内容{{ item }}</view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
@ -73,10 +77,10 @@
|
||||
监听页签的点击事件.
|
||||
|
||||
```html
|
||||
<wd-tabs value="{{0}}" bind:click="handleClick">
|
||||
<block jd:for="{{4}}" jd:key="$this">
|
||||
<wd-tab title="标签{{item + 1}}">
|
||||
<view class="content">内容{{item + 1}}</view>
|
||||
<wd-tabs v-model="tab" @click="handleClick">
|
||||
<block v-for="item in 4" :key="item">
|
||||
<wd-tab :title="`标签${item}`">
|
||||
<view class="content">内容{{ item }}</view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
@ -97,10 +101,10 @@ Page({
|
||||
设置 `swipeable` 属性，支持手势滑动。
|
||||
|
||||
```html
|
||||
<wd-tabs value="{{0}}" swipeable>
|
||||
<block jd:for="{{4}}" jd:key="$this">
|
||||
<wd-tab title="标签{{item + 1}}">
|
||||
<view class="content">内容{{item + 1}}</view>
|
||||
<wd-tabs v-model="tab" swipeable>
|
||||
<block v-for="item in 4" :key="item">
|
||||
<wd-tab :title="`标签${item}`">
|
||||
<view class="content">内容{{ item }}</view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
@ -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绑定的值 | - |
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<frame/>
|
||||
|
||||
# Tag 标签
|
||||
|
||||
|
||||
# Tag 标签
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -15,11 +13,13 @@
|
||||
<wd-tag custom-class="space" type="warning">标签</wd-tag>
|
||||
<wd-tag custom-class="space" type="success">标签</wd-tag>
|
||||
```
|
||||
|
||||
```scss
|
||||
.space{
|
||||
margin: 0 10px;
|
||||
:deep(.space) {
|
||||
margin: 0 10px 10px;
|
||||
}
|
||||
```
|
||||
|
||||
## 幽灵标签
|
||||
|
||||
设置 `plain` 属性。
|
||||
@ -45,6 +45,7 @@
|
||||
```
|
||||
|
||||
## 幽灵标记标签
|
||||
|
||||
同时设置 `mark` 和 `plain` 属性。
|
||||
|
||||
```html
|
||||
@ -75,7 +76,9 @@
|
||||
<wd-tag custom-class="space" icon="clock" mark>标签</wd-tag>
|
||||
<wd-tag custom-class="space" mark use-icon-slot>
|
||||
<text>插槽</text>
|
||||
<wd-icon slot="icon" name="clock"/>
|
||||
<template #icon>
|
||||
<wd-icon name="clock" />
|
||||
</template>
|
||||
</wd-tag>
|
||||
```
|
||||
|
||||
@ -84,13 +87,14 @@
|
||||
设置 `color` 修改文字颜色，设置 `bg-color` 修改背景色和边框颜色。
|
||||
|
||||
```html
|
||||
<wd-tag color="#0083ff" bg-color="#d0e8ff">标签</wd-tag>
|
||||
<wd-tag color="#FAA21E" bg-color="#FAA21E" plain>标签</wd-tag>
|
||||
<wd-tag color="#0083ff" bg-color="#d0e8ff">标签</wd-tag>
|
||||
<wd-tag color="#FAA21E" bg-color="#FAA21E" plain>标签</wd-tag>
|
||||
```
|
||||
|
||||
## 可关闭
|
||||
|
||||
设置 `closable` 属性，允许标签关闭，关闭时会触发 `close` 事件。
|
||||
|
||||
```html
|
||||
<wd-tag closable round type="primary">标签</wd-tag>
|
||||
```
|
||||
@ -100,122 +104,82 @@
|
||||
设置 `dynamic` 属性，该标签为新增样式，输入内容确定后触发 `confirm` 事件。
|
||||
|
||||
```html
|
||||
<wd-tag
|
||||
jd:for="{{ tags }}"
|
||||
jd:key="$this"
|
||||
custom-class="space"
|
||||
round
|
||||
closable
|
||||
data-index="{{ index }}"
|
||||
bind:close="handleClose"
|
||||
>
|
||||
{{item}}
|
||||
</wd-tag>
|
||||
<wd-tag
|
||||
custom-class="space"
|
||||
round
|
||||
dynamic
|
||||
bind:confirm="handleConfirm"
|
||||
></wd-tag>
|
||||
<wd-tag v-for="(tag, index) in tags" :key="index" custom-class="space" round closable @close="handleClose(index)">{{item}}</wd-tag>
|
||||
<wd-tag custom-class="space" round dynamic @confirm="handleConfirm"></wd-tag>
|
||||
```
|
||||
|
||||
```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
|
||||
<wd-tag
|
||||
jd:for="{{tags}}"
|
||||
jd:key="$this"
|
||||
jd:for-item="tag"
|
||||
round
|
||||
closable
|
||||
data-index="{{index}}"
|
||||
bind:click="handleClick"
|
||||
bind:close="handleClose"
|
||||
>
|
||||
<wd-tag v-for="(tag, index) in tags" :key="index" round closable @click="handleClick(index)" @close="handleClose(index)">
|
||||
{{tag.value}}
|
||||
</wd-tag>
|
||||
```
|
||||
|
||||
```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 | 根结点样式 | - |
|
||||
|
||||
@ -1,47 +1,47 @@
|
||||
<frame/>
|
||||
|
||||
# Toast 轻提示
|
||||
|
||||
# Toast 轻提示
|
||||
|
||||
## 基本用法
|
||||
|
||||
需要在页面中引入该组件，作为挂载点。
|
||||
|
||||
```html
|
||||
<wd-toast id="wd-toast"/>
|
||||
<wd-toast />
|
||||
<wd-button bind:click="showToast">toast</wd-button>
|
||||
```
|
||||
|
||||
```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 | 自定义图标类名 | - |
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<frame/>
|
||||
|
||||
# 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
|
||||
<view catchtap="clickoutside">
|
||||
<wd-tooltip show="{{ show }}" bind:change="handleChange" placement="top" content="top 提示文字">
|
||||
<wd-tooltip v-model="show" bind:change="handleChange" placement="top" content="top 提示文字">
|
||||
<wd-button>top</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
```
|
||||
|
||||
```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<boolean>(false)
|
||||
|
||||
function clickoutside() {
|
||||
clickOut.closeOutside()
|
||||
}
|
||||
```
|
||||
|
||||
## 更多 Content
|
||||
@ -58,25 +53,24 @@ Page({
|
||||
使用插槽时，请使用 `useContentSlot` 属性，确定 `content` 插槽开启。
|
||||
|
||||
```html
|
||||
<wd-tooltip show="{{ show }}" bind:change="handleChange" placement="right" useContentSlot>
|
||||
<wd-button >多行文本</wd-button>
|
||||
<view slot="content" style="color: red; padding: 5px; width: 90px">
|
||||
<view>多行文本1</view>
|
||||
<view>多行文本2</view>
|
||||
<view>多行文本3</view>
|
||||
</view>
|
||||
<wd-tooltip v-model="show" placement="right" useContentSlot>
|
||||
<wd-button>多行文本</wd-button>
|
||||
<template #content>
|
||||
<view style="color: red; padding: 5px; width: 90px">
|
||||
<view>多行文本1</view>
|
||||
<view>多行文本2</view>
|
||||
<view>多行文本3</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
show: false
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({ show: event.detail.show })
|
||||
}
|
||||
})
|
||||
import { clickOut } from '@/uni_modules/wot-design-uni'
|
||||
const show = ref<boolean>(false)
|
||||
function clickoutside() {
|
||||
clickOut.closeOutside()
|
||||
}
|
||||
```
|
||||
|
||||
## 显示关闭按钮
|
||||
@ -84,22 +78,11 @@ Page({
|
||||
Tooltip 组件通过属性`show-close` 控制是否显示关闭按钮。
|
||||
|
||||
```html
|
||||
<wd-tooltip show="{{show}}" content="显示关闭按钮" show-close bind:change="handleChange">
|
||||
<wd-button >显示关闭按钮</wd-button>
|
||||
<wd-tooltip v-model="show" content="显示关闭按钮" show-close>
|
||||
<wd-button>显示关闭按钮</wd-button>
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
show: false
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({ show: event.detail.show })
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 高级扩展
|
||||
|
||||
除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
|
||||
@ -107,73 +90,73 @@ Page({
|
||||
如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。
|
||||
|
||||
```html
|
||||
<wd-tooltip show="{{ show }}" bind:change="handleChange" placement="right-end" content="禁用" disabled>
|
||||
<wd-button >禁用</wd-button>
|
||||
<wd-tooltip v-model="show" placement="right-end" content="禁用" disabled>
|
||||
<wd-button>禁用</wd-button>
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
## 控制位置
|
||||
|
||||
**注意：由于微信小程序无法动态插入节点，因此文字气泡位置会根据传入定位的节点最外层位置对齐，如果文字提示位置不在您想要渲染的位置上，可以通过控制组件整体位置达到想要的效果。**
|
||||
**注意：由于小程序无法动态插入节点，因此文字气泡位置会根据传入定位的节点最外层位置对齐，如果文字提示位置不在您想要渲染的位置上，可以通过控制组件整体位置达到想要的效果。**
|
||||
错误用法示例：
|
||||
|
||||
```html
|
||||
<wd-tooltip placement="top" content="top 提示文字" >
|
||||
<wd-button style="margin-left: 100px">top</wd-button>
|
||||
<wd-tooltip placement="top" content="top 提示文字">
|
||||
<wd-button custom-style="margin-left: 100px">top</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip placement="top" content="top 提示文字" >
|
||||
<wd-button style="position: absolute; left: 100px;">top</wd-button>
|
||||
<wd-tooltip placement="top" content="top 提示文字">
|
||||
<wd-button custom-style="position: absolute; left: 100px;">top</wd-button>
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
正确用法：
|
||||
|
||||
```html
|
||||
<wd-tooltip placement="top" content="top 提示文字" style="margin-left: 100px">
|
||||
<wd-tooltip placement="top" content="top 提示文字" custom-style="margin-left: 100px">
|
||||
<wd-button>top</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip placement="top" content="top 提示文字" style="position: absolute; left: 100px;">
|
||||
<wd-tooltip placement="top" content="top 提示文字" custom-style="position: absolute; left: 100px;">
|
||||
<wd-button>top</wd-button>
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
## 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 | 文字提示样式 | - |
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
<frame/>
|
||||
|
||||
# Transition 动画
|
||||
|
||||
# Transition 动画
|
||||
|
||||
## 基本用法
|
||||
|
||||
将元素包裹在 `wd-transition` 标签中，并设置 `show` 来切换显隐，设置 `name` 选择动画。
|
||||
|
||||
```html
|
||||
<wd-transition show="{{ show }}" name="fade">
|
||||
内容
|
||||
</wd-transition>
|
||||
<wd-transition :show="show" name="fade">内容</wd-transition>
|
||||
```
|
||||
|
||||
## 动画类型
|
||||
@ -18,9 +15,7 @@
|
||||
`wd-transition` 内置了常用的动画，如 `fade`、`slide`、`zoom-in` 等。
|
||||
|
||||
```html
|
||||
<wd-transition show="{{ show }}" name="slide">
|
||||
内容
|
||||
</wd-transition>
|
||||
<wd-transition :show="show" name="slide">内容</wd-transition>
|
||||
```
|
||||
|
||||
## 动画时间
|
||||
@ -37,8 +32,8 @@
|
||||
|
||||
```html
|
||||
<wd-transition
|
||||
show="{{ customShow }}"
|
||||
duration="{{ { enter: 700, leave: 1000 } }}"
|
||||
:show="customShow"
|
||||
:duration="{ enter: 700, leave: 1000 }"
|
||||
enter-class="custom-enter"
|
||||
enter-active-class="custom-enter-active"
|
||||
enter-to-class="custom-enter-to"
|
||||
@ -50,7 +45,10 @@
|
||||
```
|
||||
|
||||
```scss
|
||||
.block {
|
||||
:deep(button) {
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
:deep(.block) {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -60,14 +58,15 @@
|
||||
background: #0083ff;
|
||||
}
|
||||
|
||||
.custom-enter-active, .custom-leave-active {
|
||||
:deep(.custom-enter-active),
|
||||
:deep(.custom-leave-active) {
|
||||
transition-property: background, transform;
|
||||
}
|
||||
.custom-enter {
|
||||
:deep(.custom-enter) {
|
||||
transform: translate3d(-100px, -100px, 0) rotate(-180deg);
|
||||
background: #ff0000;
|
||||
}
|
||||
.custom-leave-to {
|
||||
:deep(.custom-leave-to) {
|
||||
transform: translate3d(100px, 100px, 0) rotate(180deg);
|
||||
background: #ff0000;
|
||||
}
|
||||
@ -75,32 +74,32 @@
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| show | 是否展示组件 | boolean | - | - | - |
|
||||
| name | 动画类型 | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
|
||||
| duration | 动画执行时间 | number / boolean | - | 300(ms) | - |
|
||||
| custom-style | 自定义样式 | string | - | - | - |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------ | ------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | -------- |
|
||||
| show | 是否展示组件 | boolean | - | - | - |
|
||||
| name | 动画类型 | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
|
||||
| duration | 动画执行时间 | number / boolean | - | 300(ms) | - |
|
||||
| custom-style | 自定义样式 | string | - | - | - |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| bind:beforeenter | 进入前触发 | - | - |
|
||||
| bind:enter | 进入时触发 | - | - |
|
||||
| bind:afterenter | 进入后触发 | - | - |
|
||||
| bind:beforeleave | 离开前触发 | - | - |
|
||||
| bind:leave | 离开时触发 | - | - |
|
||||
| bind:afterleave | 离开后触发| - | - |
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| ---------------- | ---------- | ---- | -------- |
|
||||
| bind:beforeenter | 进入前触发 | - | - |
|
||||
| bind:enter | 进入时触发 | - | - |
|
||||
| bind:afterenter | 进入后触发 | - | - |
|
||||
| bind:beforeleave | 离开前触发 | - | - |
|
||||
| bind:leave | 离开时触发 | - | - |
|
||||
| bind:afterleave | 离开后触发 | - | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| custom-class | 根结点样式 | - |
|
||||
| enter-class | 定义进入过渡的开始状态，在元素被插入前生效，在插入的下一帧移除 | - |
|
||||
| enter-active-class | 定义动画执行期间的状态，在整个进入动画中应用；在元素被插入前生效，在动画结束后移除；可以定义 transition 相关属性 | - |
|
||||
| enter-to-class | 定义进入过渡的结束状态，在元素被插入的下一帧生效，在动画结束后移除 | - |
|
||||
| leave-class | 定义离开过渡的开始状态，在离开动画触发时立即生效，在下一帧移除 | - |
|
||||
| leave-active-class | 定义动画执行期间的状态，在整个离开动画中应用；在离开动画触发时立即生效，在动画结束后移除；可以定义 transition 相关属性 | - |
|
||||
| leave-to-class | 定义离开过渡的结束状态，在离开动画触发时的下一帧生效，在动画结束后移除 | - |
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------- |
|
||||
| custom-class | 根结点样式 | - |
|
||||
| enter-class | 定义进入过渡的开始状态，在元素被插入前生效，在插入的下一帧移除 | - |
|
||||
| enter-active-class | 定义动画执行期间的状态，在整个进入动画中应用；在元素被插入前生效，在动画结束后移除；可以定义 transition 相关属性 | - |
|
||||
| enter-to-class | 定义进入过渡的结束状态，在元素被插入的下一帧生效，在动画结束后移除 | - |
|
||||
| leave-class | 定义离开过渡的开始状态，在离开动画触发时立即生效，在下一帧移除 | - |
|
||||
| leave-active-class | 定义动画执行期间的状态，在整个离开动画中应用；在离开动画触发时立即生效，在动画结束后移除；可以定义 transition 相关属性 | - |
|
||||
| leave-to-class | 定义离开过渡的结束状态，在离开动画触发时的下一帧生效，在动画结束后移除 | - |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<frame/>
|
||||
|
||||
# Upload 上传
|
||||
# Upload 上传
|
||||
|
||||
图片上传组件
|
||||
|
||||
@ -13,26 +13,21 @@
|
||||
`action` 设置图片上传的地址；
|
||||
|
||||
```html
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
></wd-upload>
|
||||
<wd-upload :file-list="fileList" :action="action" @change="handleChange"></wd-upload>
|
||||
```
|
||||
|
||||
```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<any[]>([
|
||||
{
|
||||
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
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
disabled>
|
||||
</wd-upload>
|
||||
<wd-upload :file-list="fileList" action="https://ftf.jd.com/api/uploadImg" @change="handleChange" disabled></wd-upload>
|
||||
```
|
||||
|
||||
## 多选上传
|
||||
@ -53,12 +43,7 @@ Page({
|
||||
通过设置 `multiple` 开启文件多选上传。
|
||||
|
||||
```html
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
multiple
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
></wd-upload>
|
||||
<wd-upload :file-list="fileList" multiple action="https://ftf.jd.com/api/uploadImg" @change="handleChange"></wd-upload>
|
||||
```
|
||||
|
||||
## 最大上传数限制
|
||||
@ -66,168 +51,181 @@ Page({
|
||||
上传组件可通过设置 `limit` 来限制上传文件的个数。
|
||||
|
||||
```html
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
limit="{{3}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
></wd-upload>
|
||||
<wd-upload :file-list="fileList" :limit="3" action="https://ftf.jd.com/api/uploadImg" @change="handleChange"></wd-upload>
|
||||
```
|
||||
|
||||
## 拦截预览图片操作
|
||||
|
||||
设置 `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
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
before-preview="{{beforePreview}}"
|
||||
:file-list="fileList"
|
||||
action="https://ftf.jd.com/api/uploadImg"
|
||||
@change="handleChange"
|
||||
:before-preview="beforePreview"
|
||||
></wd-upload>
|
||||
```
|
||||
|
||||
```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<any[]>([
|
||||
{
|
||||
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
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
before-upload="{{beforeUpload}}"
|
||||
:file-list="fileList"
|
||||
action="https://ftf.jd.com/api/uploadImg"
|
||||
@change="handleChange"
|
||||
:before-upload="beforeUpload"
|
||||
></wd-upload>
|
||||
```
|
||||
|
||||
```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<any[]>([
|
||||
{
|
||||
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
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
before-remove="{{beforeRemove}}">
|
||||
</wd-upload>
|
||||
:file-list="fileList"
|
||||
action="https://ftf.jd.com/api/uploadImg"
|
||||
@change="handleChange"
|
||||
:before-remove="beforeRemove"
|
||||
></wd-upload>
|
||||
```
|
||||
|
||||
```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<any[]>([
|
||||
{
|
||||
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
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange"
|
||||
before-choose="{{beforeChoose}}">
|
||||
</wd-upload>
|
||||
:file-list="fileList"
|
||||
action="https://ftf.jd.com/api/uploadImg"
|
||||
@change="handleChange"
|
||||
:before-choose="beforeChoose"
|
||||
></wd-upload>
|
||||
```
|
||||
|
||||
```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<any[]>([
|
||||
{
|
||||
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
|
||||
<wd-upload
|
||||
file-list="{{fileList}}"
|
||||
use-default-slot
|
||||
action="http://fant-mini-plus.top/api/uploadImg"
|
||||
bind:change="handleChange">
|
||||
<wd-upload :file-list="fileList" use-default-slot action="https://ftf.jd.com/api/uploadImg" @change="handleChange">
|
||||
<wd-button>上传</wd-button>
|
||||
</wd-upload>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
fileList: [{
|
||||
name: '图片名称',
|
||||
url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
|
||||
}]
|
||||
}
|
||||
```
|
||||
``` typescript
|
||||
const fileList = ref<any[]>([
|
||||
{
|
||||
url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
])
|
||||
```
|
||||
|
||||
## 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: 尺寸超出的文件信息 | - |
|
||||
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
## 使用外部样式类
|
||||
## 小程序使用外部样式类
|
||||
Wot Design Uni 开放了大量的自定义样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。需要注意的是普通样式类和自定义样式类的优先级是未定义的，因此使用时请添加`!important`以保证外部样式类的优先级。
|
||||
|
||||
```vue
|
||||
@ -53,6 +53,60 @@ Wot Design Uni 开放了大量的自定义样式类供开发者使用，具体
|
||||
}
|
||||
```
|
||||
|
||||
## 小程序自定义组件渲染问题
|
||||
微信/QQ/百度/抖音这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，下面以`divider`组件举例：
|
||||
|
||||
```vue
|
||||
<!-- 使用 -->
|
||||
<wd-divider></wd-divider>
|
||||
|
||||
<!-- h5渲染 -->
|
||||
<view class="wd-divider"></view>
|
||||
|
||||
<!-- 微信小程序渲染 -->
|
||||
<wd-divider>
|
||||
<view class="wd-divider"></view>
|
||||
</wd-divider>
|
||||
```
|
||||
|
||||
### 解决办法
|
||||
在微信端可以使用[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
|
||||
<script lang="ts">
|
||||
export default {
|
||||
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
|
||||
options: {
|
||||
virtualHost: true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
```
|
||||
### 启用virtualHost效果
|
||||
这里我们还是以`divider`组件举例：
|
||||
|
||||
```vue
|
||||
<!-- 使用 -->
|
||||
<wd-divider></wd-divider>
|
||||
|
||||
<!-- h5渲染 -->
|
||||
<view class="wd-divider"></view>
|
||||
|
||||
<!-- 微信小程序渲染 -->
|
||||
<view class="wd-divider"></view>
|
||||
```
|
||||
|
||||
|
||||
## 关于我们
|
||||
|
||||
@ -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<T> {
|
||||
label: string = '' // 操作标题
|
||||
value!: T // 操作项数组
|
||||
}
|
||||
@ -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<any>[] = [] // 操作项数组
|
||||
}
|
||||
@ -1,89 +1,89 @@
|
||||
<template>
|
||||
<demo-block title="基本用法">
|
||||
<wd-checkbox v-model:value="check1">沃特</wd-checkbox>
|
||||
<wd-checkbox v-model="check1">沃特</wd-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="修改形状: square">
|
||||
<wd-checkbox v-model:value="check2" shape="square">沃特</wd-checkbox>
|
||||
<wd-checkbox v-model="check2" shape="square">沃特</wd-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="修改形状: button">
|
||||
<wd-checkbox v-model:value="check3" shape="button">沃特</wd-checkbox>
|
||||
<wd-checkbox v-model="check3" shape="button">沃特</wd-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="修改选中颜色">
|
||||
<wd-checkbox v-model:value="check4" checked-color="rgb(52, 209, 157)">沃特</wd-checkbox>
|
||||
<wd-checkbox v-model="check4" checked-color="rgb(52, 209, 157)">沃特</wd-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用状态">
|
||||
<view style="margin-bottom: 10px">
|
||||
<wd-checkbox-group v-model="value1" disabled>
|
||||
<wd-checkbox :value="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="2" :disabled="false">商家后台</wd-checkbox>
|
||||
<wd-checkbox :value="3" shape="square">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="4" shape="square">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2" :disabled="false">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="3" shape="square">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="4" shape="square">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</view>
|
||||
<wd-checkbox-group v-model="value2" disabled>
|
||||
<wd-checkbox :value="1" shape="button">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="2" shape="button">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1" shape="button">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2" shape="button">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="`修改 true-value 和 false-value ${value3}`">
|
||||
<wd-checkbox v-model:value="value3" true-value="沃特" false-value="商家后台" @change="handleChange1">复选框</wd-checkbox>
|
||||
<wd-checkbox v-model="value3" true-value="沃特" false-value="商家后台" @change="handleChange1">复选框</wd-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="同行展示">
|
||||
<wd-checkbox-group v-model="value4" inline>
|
||||
<wd-checkbox :value="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="2">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="复选框组">
|
||||
<wd-checkbox-group v-model="value5">
|
||||
<wd-checkbox :value="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="2">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="表单模式---复选框组" transparent>
|
||||
<wd-checkbox-group v-model="value6" cell>
|
||||
<wd-checkbox :value="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="2">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="表单模式---复选框按钮组" transparent>
|
||||
<wd-checkbox-group v-model="value7" cell shape="button">
|
||||
<wd-checkbox :value="1" disabled>选项一</wd-checkbox>
|
||||
<wd-checkbox :value="2">选项二</wd-checkbox>
|
||||
<wd-checkbox :value="3">选项三</wd-checkbox>
|
||||
<wd-checkbox :value="4">选项四</wd-checkbox>
|
||||
<wd-checkbox :value="5">选项五</wd-checkbox>
|
||||
<wd-checkbox :value="6">选项六</wd-checkbox>
|
||||
<wd-checkbox :value="7">选项七</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1" disabled>选项一</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2">选项二</wd-checkbox>
|
||||
<wd-checkbox :modelValue="3">选项三</wd-checkbox>
|
||||
<wd-checkbox :modelValue="4">选项四</wd-checkbox>
|
||||
<wd-checkbox :modelValue="5">选项五</wd-checkbox>
|
||||
<wd-checkbox :modelValue="6">选项六</wd-checkbox>
|
||||
<wd-checkbox :modelValue="7">选项七</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="设置最小选中数量和最大选中数量" transparent>
|
||||
<wd-checkbox-group v-model="value8" :min="1" :max="3" cell>
|
||||
<wd-checkbox :value="1">京东</wd-checkbox>
|
||||
<wd-checkbox :value="2">沃特</wd-checkbox>
|
||||
<wd-checkbox :value="3">商家后台</wd-checkbox>
|
||||
<wd-checkbox :value="4">营销中心</wd-checkbox>
|
||||
<wd-checkbox :modelValue="1">京东</wd-checkbox>
|
||||
<wd-checkbox :modelValue="2">沃特</wd-checkbox>
|
||||
<wd-checkbox :modelValue="3">商家后台</wd-checkbox>
|
||||
<wd-checkbox :modelValue="4">营销中心</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="大尺寸">
|
||||
<wd-checkbox-group v-model="value9" inline size="large">
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
<wd-checkbox-group v-model="value10" size="large" class="group">
|
||||
<wd-checkbox value="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
|
||||
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
|
||||
</wd-checkbox-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable v-model="phone" @change="handlePhone" />
|
||||
</wd-cell-group>
|
||||
<view class="tip">
|
||||
<wd-checkbox :value="read" name="read" @change="handleRead" custom-label-class="label-class">
|
||||
<wd-checkbox v-model="read" name="read" @change="handleRead" custom-label-class="label-class">
|
||||
已阅读并同意
|
||||
<text style="color: #4d80f0">《借款额度合同及相关授权》</text>
|
||||
</wd-checkbox>
|
||||
@ -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
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<view @click="clickOutside" class="wrapper">
|
||||
<demo-block custom-class="pop" title="基本用法">
|
||||
<view class="center">
|
||||
<wd-popover id="pop1" content="这是一段内容。" v-model:show="show1" @change="handleChange1">
|
||||
<wd-popover id="pop1" content="这是一段内容。" v-model="show1" @change="handleChange1">
|
||||
<wd-button data-id="pop1">点击展示</wd-button>
|
||||
</wd-popover>
|
||||
</view>
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<demo-block custom-class="pop" title="嵌套信息">
|
||||
<view class="center list">
|
||||
<wd-popover v-model:show="show2" use-content-slot @change="handleChange2">
|
||||
<wd-popover v-model="show2" use-content-slot @change="handleChange2">
|
||||
<template #content>
|
||||
<view class="pop-content">这是一段自定义样式的内容。</view>
|
||||
</template>
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
<demo-block custom-class="pop" title="列表展示">
|
||||
<view class="center list">
|
||||
<wd-popover v-model:show="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
|
||||
<wd-popover v-model="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
|
||||
<wd-button>列表</wd-button>
|
||||
</wd-popover>
|
||||
</view>
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { ref } from 'vue'
|
||||
const show = ref<boolean>(false)
|
||||
|
||||
@ -74,6 +75,9 @@ function display() {
|
||||
function insert() {
|
||||
display()
|
||||
}
|
||||
onShow(() => {
|
||||
setTimeout(display, 5000)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.demo-block {
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-08-01 11:12:05
|
||||
* @LastEditTime: 2023-08-02 13:14:32
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\pages\switch\Index.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-13 11:47:12
|
||||
@ -35,7 +44,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked1 = ref<boolean>(true)
|
||||
|
||||
@ -70,16 +70,7 @@
|
||||
|
||||
<demo-block title="可关闭">
|
||||
<view>
|
||||
<wd-tag
|
||||
v-for="(tag, index) in tags"
|
||||
:key="index"
|
||||
custom-class="space"
|
||||
round
|
||||
closable
|
||||
:data-index="index"
|
||||
@click="handleClick(index)"
|
||||
@close="handleClose(index)"
|
||||
>
|
||||
<wd-tag v-for="(tag, index) in tags" :key="index" custom-class="space" round closable @click="handleClick(index)" @close="handleClose(index)">
|
||||
{{ tag.value }}
|
||||
</wd-tag>
|
||||
</view>
|
||||
|
||||
@ -3,63 +3,63 @@
|
||||
<view @click.stop="clickOutside">
|
||||
<demo-block title="基本用法">
|
||||
<view class="top">
|
||||
<wd-tooltip v-model:show="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
|
||||
<wd-tooltip v-model="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
|
||||
<wd-button :round="false">bottom-start</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2">
|
||||
<wd-tooltip v-model="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2">
|
||||
<wd-button :round="false">bottom</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show3" placement="bottom-end" content="bottom-end 提示文字" @change="handleChange3">
|
||||
<wd-tooltip v-model="show3" placement="bottom-end" content="bottom-end 提示文字" @change="handleChange3">
|
||||
<wd-button :round="false">bottom-end</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
<view class="left">
|
||||
<wd-tooltip v-model:show="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4">
|
||||
<wd-tooltip v-model="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4">
|
||||
<wd-button :round="false">right-start</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show5" placement="right" content="right 提示文字" style="margin: 20px 0" @change="handleChange5">
|
||||
<wd-tooltip v-model="show5" placement="right" content="right 提示文字" style="margin: 20px 0" @change="handleChange5">
|
||||
<wd-button :round="false">right</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6">
|
||||
<wd-tooltip v-model="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6">
|
||||
<wd-button :round="false">right-end</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
<view class="right">
|
||||
<wd-tooltip v-model:show="show7" placement="left-start" content="left-start 提示文字" @change="handleChange7">
|
||||
<wd-tooltip v-model="show7" placement="left-start" content="left-start 提示文字" @change="handleChange7">
|
||||
<wd-button :round="false">
|
||||
left-start
|
||||
<wd-icon name="setting" />
|
||||
</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show8" placement="left" content="left 提示文字" style="margin: 20px 0" @change="handleChange8">
|
||||
<wd-tooltip v-model="show8" placement="left" content="left 提示文字" style="margin: 20px 0" @change="handleChange8">
|
||||
<wd-button :round="false">left</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9">
|
||||
<wd-tooltip v-model="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9">
|
||||
<wd-button :round="false">left-end</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<wd-tooltip v-model:show="show10" placement="top-start" content="top-start 提示文字" @change="handleChange10">
|
||||
<wd-tooltip v-model="show10" placement="top-start" content="top-start 提示文字" @change="handleChange10">
|
||||
<wd-button :round="false">top-start</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show11" placement="top" content="top 提示文字" @change="handleChange11">
|
||||
<wd-tooltip v-model="show11" placement="top" content="top 提示文字" @change="handleChange11">
|
||||
<wd-button :round="false">top</wd-button>
|
||||
</wd-tooltip>
|
||||
<wd-tooltip v-model:show="show12" placement="top-end" content="top-end 提示文字" @change="handleChange12">
|
||||
<wd-tooltip v-model="show12" placement="top-end" content="top-end 提示文字" @change="handleChange12">
|
||||
<wd-button :round="false">top-end</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
</demo-block>
|
||||
<demo-block title="显示关闭按钮">
|
||||
<view class="demo-left">
|
||||
<wd-tooltip v-model:show="show13" content="显示关闭按钮" placement="right" show-close @change="handleChange13">
|
||||
<wd-tooltip v-model="show13" content="显示关闭按钮" placement="right" show-close @change="handleChange13">
|
||||
<wd-button :round="false">显示关闭按钮</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
</demo-block>
|
||||
<demo-block title="多行文本">
|
||||
<view class="demo-left lines-demo">
|
||||
<wd-tooltip v-model:show="show14" placement="right" use-content-slot @change="handleChange14">
|
||||
<wd-tooltip v-model="show14" placement="right" use-content-slot @change="handleChange14">
|
||||
<wd-button :round="false">多行文本</wd-button>
|
||||
<template #content>
|
||||
<view class="lines-content">
|
||||
@ -74,21 +74,21 @@
|
||||
<demo-block title="控制显隐">
|
||||
<wd-button plain @click="control" size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button>
|
||||
<view class="demo-left demo-control">
|
||||
<wd-tooltip placement="top" content="控制显隐" v-model:show="show15">
|
||||
<wd-tooltip placement="top" content="控制显隐" v-model="show15">
|
||||
<wd-button :round="false">top</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
</demo-block>
|
||||
<demo-block title="绑定事件">
|
||||
<view class="demo-left">
|
||||
<wd-tooltip v-model:show="show16" placement="right-end" :content="content" @open="onShow" @close="onHide" @change="handleChange16">
|
||||
<wd-tooltip v-model="show16" placement="right-end" :content="content" @open="onShow" @close="onHide" @change="handleChange16">
|
||||
<wd-button :round="false">事件</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
</demo-block>
|
||||
<demo-block title="禁用">
|
||||
<view class="demo-left">
|
||||
<wd-tooltip v-model:show="show17" placement="right-end" content="禁用" disabled @change="handleChange17">
|
||||
<wd-tooltip v-model="show17" placement="right-end" content="禁用" disabled @change="handleChange17">
|
||||
<wd-button :round="false">禁用</wd-button>
|
||||
</wd-tooltip>
|
||||
</view>
|
||||
|
||||
@ -51,8 +51,7 @@
|
||||
</demo-block>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const action: string = 'https://ftf.jd.com/api/uploadImg'
|
||||
|
||||
@ -40,6 +40,11 @@
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field']
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
@ -100,6 +100,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field']
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getCurrentInstance, provide, watch } from 'vue'
|
||||
@ -46,7 +51,7 @@ const resetChildren = debounce(function (values) {
|
||||
children &&
|
||||
children.forEach((child) => {
|
||||
// value 对应的节点直接选中
|
||||
const isChecked = values.indexOf(child.value) > -1
|
||||
const isChecked = values.indexOf(child.modelValue) > -1
|
||||
child.$.exposed.setChecked(isChecked)
|
||||
})
|
||||
}, 50)
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
@ -47,7 +48,7 @@ interface Props {
|
||||
customLabelClass?: string
|
||||
customShapeClass?: string
|
||||
customClass?: string
|
||||
value: string | number | boolean
|
||||
modelValue: string | number | boolean
|
||||
shape: checkShape
|
||||
checkedColor: string
|
||||
disabled: boolean | null
|
||||
@ -55,7 +56,6 @@ interface Props {
|
||||
falseValue: string | number | boolean
|
||||
size: string
|
||||
maxWidth: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -77,7 +77,7 @@ const parent = inject<any>('checkGroup')
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue === null || newValue === undefined) {
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
@ -162,24 +162,24 @@ const innerSize = computed(() => {
|
||||
|
||||
onBeforeMount(() => {
|
||||
// eslint-disable-next-line quotes
|
||||
if (props.value === null) throw Error("checkbox's value must be set")
|
||||
if (props.modelValue === null) throw Error("checkbox's value must be set")
|
||||
inited.value = true
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 如果没有父组件，设置 isChecked
|
||||
if (!parent) {
|
||||
isChecked.value = props.value === props.trueValue
|
||||
isChecked.value = props.modelValue === props.trueValue
|
||||
isFirst.value = true
|
||||
isLast.value = true
|
||||
}
|
||||
if (parent) {
|
||||
parent.$.exposed.setChild && parent.$.exposed.setChild(proxy)
|
||||
isChecked.value = props.value === parent.modelValue
|
||||
isChecked.value = props.modelValue === parent.modelValue
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['change', 'update:value'])
|
||||
const emit = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
/**
|
||||
* @description 检测checkbox绑定的value是否和其它checkbox的value冲突
|
||||
@ -190,8 +190,8 @@ function checkName() {
|
||||
parent &&
|
||||
parent.$.exposed.children &&
|
||||
parent.$.exposed.children.forEach((child) => {
|
||||
if (child.$.uid !== proxy.$.uid && child.value === props.value) {
|
||||
throw Error(`The checkbox's bound value: ${props.value} has been used`)
|
||||
if (child.$.uid !== proxy.$.uid && child.value === props.modelValue) {
|
||||
throw Error(`The checkbox's bound value: ${props.modelValue} has been used`)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -205,10 +205,10 @@ function toggle() {
|
||||
emit('change', {
|
||||
value: !isChecked.value
|
||||
})
|
||||
parent.$.exposed.changeSelectState(props.value)
|
||||
parent.$.exposed.changeSelectState(props.modelValue)
|
||||
} else {
|
||||
const newVal = props.value === props.trueValue ? props.falseValue : props.trueValue
|
||||
emit('update:value', newVal)
|
||||
const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
|
||||
emit('update:modelValue', newVal)
|
||||
emit('change', {
|
||||
value: newVal
|
||||
})
|
||||
|
||||
@ -79,6 +79,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -18,6 +18,11 @@
|
||||
></wd-picker-view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field']
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getCurrentInstance, onBeforeMount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
@ -128,6 +128,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view :class="rootClass" :style="customStyle">
|
||||
<view :class="rootClass" :style="customStyle" name="test">
|
||||
<view v-if="label || useLabelSlot" :class="labelClass" :style="labelStyle">
|
||||
<view v-if="prefixIcon || usePrefixSlot" class="wd-input__prefix">
|
||||
<wd-icon v-if="prefixIcon && !usePrefixSlot" custom-class="wd-input__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
|
||||
@ -126,6 +126,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -68,6 +68,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-transition :show="show" name="fade" :duration="200">
|
||||
<wd-transition :show="modelValue" name="fade" :duration="200">
|
||||
<view class="wd-popover__pos" :style="popover.popStyle.value">
|
||||
<view :class="`wd-popover__container ${customPop}`">
|
||||
<view
|
||||
@ -94,7 +94,7 @@ interface Props {
|
||||
useContentSlot: boolean
|
||||
disabled: boolean
|
||||
showClose: boolean
|
||||
show: boolean
|
||||
modelValue: boolean
|
||||
mode: PopoverMode
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -107,12 +107,12 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
useContentSlot: false,
|
||||
disabled: false,
|
||||
showClose: false,
|
||||
show: false,
|
||||
modelValue: false,
|
||||
mode: 'normal'
|
||||
})
|
||||
|
||||
const selector: string = 'popover'
|
||||
const emit = defineEmits(['update:show', 'menuclick', 'change', 'open', 'close'])
|
||||
const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
@ -133,7 +133,7 @@ watch(
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
popover.control(props.placement, props.offset)
|
||||
@ -151,7 +151,7 @@ onMounted(() => {
|
||||
|
||||
onBeforeMount(() => {
|
||||
pushToQueue(proxy)
|
||||
popover.showStyle.value = props.show ? 'opacity: 1;' : 'opacity: 0;'
|
||||
popover.showStyle.value = props.modelValue ? 'opacity: 1;' : 'opacity: 0;'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -161,7 +161,7 @@ onBeforeUnmount(() => {
|
||||
const popover = usePopover()
|
||||
|
||||
function menuClick(index: number) {
|
||||
emit('update:show', false)
|
||||
emit('update:modelValue', false)
|
||||
emit('menuclick', {
|
||||
item: props.content[index],
|
||||
index
|
||||
@ -170,15 +170,15 @@ function menuClick(index: number) {
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
emit('update:show', !props.show)
|
||||
emit('update:modelValue', !props.modelValue)
|
||||
}
|
||||
|
||||
function open() {
|
||||
emit('update:show', true)
|
||||
emit('update:modelValue', true)
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('update:show', false)
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field']
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { getCurrentInstance, provide, watch } from 'vue'
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
:max="max"
|
||||
@change="handleChange"
|
||||
>
|
||||
<wd-checkbox v-for="item in filterColumns" :key="item[valueKey]" :value="item[valueKey]" :disabled="item.disabled">
|
||||
<wd-checkbox v-for="item in filterColumns" :key="item[valueKey]" :modelValue="item[valueKey]" :disabled="item.disabled">
|
||||
<block v-if="filterable && filterVal">
|
||||
<block v-for="text in item[labelKey]" :key="text.label">
|
||||
<text v-if="text.type === 'active'" class="wd-select-picker__text-active">{{ text.label }}</text>
|
||||
@ -87,6 +87,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
@ -392,6 +393,11 @@ function formatFilterColumns(columns, filterVal) {
|
||||
filterColumns.value = formatFilterColumns
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
close,
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
@ -3,6 +3,12 @@
|
||||
<view class="wd-switch__circle" :style="circleStyle"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field']
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onBeforeMount } from 'vue'
|
||||
import { getType, objToStyle } from '../common/util'
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-12 18:40:58
|
||||
* @LastEditTime: 2023-07-10 23:54:38
|
||||
* @LastEditTime: 2023-08-02 13:30:29
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-tooltip\wd-tooltip.vue
|
||||
@ -15,7 +15,7 @@
|
||||
<view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-transition :show="show" name="fade">
|
||||
<wd-transition :show="modelValue" name="fade">
|
||||
<view class="wd-tooltip__pos" :style="popover.popStyle.value">
|
||||
<view class="wd-tooltip__container custom-pop">
|
||||
<view v-if="visibleArrow" :class="`wd-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`" :style="popover.arrowStyle.value"></view>
|
||||
@ -64,7 +64,7 @@ interface Props {
|
||||
useContentSlot: boolean
|
||||
disabled: boolean
|
||||
showClose: boolean
|
||||
show: boolean
|
||||
modelValue: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
customClass: '',
|
||||
@ -76,13 +76,13 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
useContentSlot: false,
|
||||
disabled: false,
|
||||
showClose: false,
|
||||
show: false
|
||||
modelValue: false
|
||||
})
|
||||
|
||||
const popover = usePopover()
|
||||
|
||||
const selector: string = 'tooltip'
|
||||
const emit = defineEmits(['update:show', 'menuclick', 'change', 'open', 'close'])
|
||||
const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
@ -97,7 +97,7 @@ watch(
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
popover.control(props.placement, props.offset)
|
||||
@ -115,7 +115,7 @@ onMounted(() => {
|
||||
|
||||
onBeforeMount(() => {
|
||||
pushToQueue(proxy)
|
||||
popover.showStyle.value = props.show ? 'opacity: 1;' : 'opacity: 0;'
|
||||
popover.showStyle.value = props.modelValue ? 'opacity: 1;' : 'opacity: 0;'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -124,15 +124,15 @@ onBeforeUnmount(() => {
|
||||
|
||||
function toggle(event) {
|
||||
if (props.disabled) return
|
||||
emit('update:show', !props.show)
|
||||
emit('update:modelValue', !props.modelValue)
|
||||
}
|
||||
|
||||
function open() {
|
||||
emit('update:show', true)
|
||||
emit('update:modelValue', true)
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('update:show', false)
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
behaviors: ['uni://form-field'],
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user