mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
docs: ✏️ 文档修复至rate组件
This commit is contained in:
xuqingkai
parent
5b5670aa58
commit
0209ab0390
@ -7,24 +7,19 @@ Picker 组件为 popup 和 pickerView 的组合。
|
||||
|
||||
## 基本用法
|
||||
|
||||
`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`value` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `bind:confirm` 事件，获取选中值，传出一个 evnet 对象， `event.detail = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
|
||||
`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
|
||||
|
||||
```html
|
||||
<wd-picker columns="{{columns1}}" label="单列选项" value="{{value}}" bind:confirm="handleConfirm" />
|
||||
<wd-picker :columns="columns" label="单列选项" v-model="value" @confirm="handleConfirm" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
|
||||
value: ''
|
||||
},
|
||||
handleConfirm (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
|
||||
const value = ref('选项1')
|
||||
|
||||
function handleConfirm({ value }) {
|
||||
value.value = value
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
当 `columns` 选项为对象时，其数据结构为：
|
||||
@ -40,15 +35,13 @@ Page({
|
||||
设置 `disabled` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker columns="{{columns}}" label="禁用" value="{{value}}" disabled />
|
||||
<wd-picker :columns="columns" label="禁用" v-model="value" disabled />
|
||||
```
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
|
||||
value: '选项3'
|
||||
}
|
||||
})
|
||||
const value = ref('选项3')
|
||||
|
||||
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
|
||||
|
||||
```
|
||||
|
||||
## 只读
|
||||
@ -56,7 +49,7 @@ Page({
|
||||
设置 `readonly` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker columns="{{columns}}" label="只读" value="{{value}}" readonly />
|
||||
<wd-picker :columns="columns" label="只读" v-model="value" readonly />
|
||||
```
|
||||
|
||||
## 文案标题
|
||||
@ -64,14 +57,14 @@ Page({
|
||||
设置 `title` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker label="标题" columns="{{columns7}}" title="文案标题"/>
|
||||
<wd-picker label="标题" :columns="columns" title="文案标题"/>
|
||||
```
|
||||
## 加载中
|
||||
|
||||
设置 `loading` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker-view columns="{{columns}}" loading />
|
||||
<wd-picker-view :columns="columns" loading />
|
||||
```
|
||||
|
||||
## 多列
|
||||
@ -79,18 +72,15 @@ Page({
|
||||
`columns` 属性设置为二维数组，`value` 为数组。
|
||||
|
||||
```html
|
||||
<wd-picker columns="{{columns}}" label="多列" value="{{value}}" />
|
||||
<wd-picker :columns="columns" label="多列" v-model="value" />
|
||||
```
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: ['中南大学', '软件工程'],
|
||||
columns: [
|
||||
const value = ref(['中南大学', '软件工程'])
|
||||
|
||||
const columns = ref([
|
||||
['中山大学', '中南大学', '华南理工大学'],
|
||||
['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
|
||||
],
|
||||
}
|
||||
})
|
||||
])
|
||||
```
|
||||
|
||||
## 多级联动
|
||||
@ -101,11 +91,11 @@ Page({
|
||||
|
||||
```html
|
||||
<wd-picker
|
||||
columns="{{columns}}"
|
||||
:columns="columns"
|
||||
label="多列联动"
|
||||
value="{{value}}"
|
||||
column-change="{{onChangeDistrict}}"
|
||||
display-format="{{displayFormat}}"
|
||||
v-model="value"
|
||||
:column-change="onChangeDistrict"
|
||||
:display-format="displayFormat"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -121,34 +111,30 @@ const district = {
|
||||
'440400': [{ label: '香洲区', value: '440402' }, { label: '斗门区', value: '440403' }, { label: '金湾区', value: '440404' }],
|
||||
'440500': [{ label: '龙湖区', value: '440507' }, { label: '金平区', value: '440511' }]
|
||||
}
|
||||
Page({
|
||||
data: {
|
||||
value: ['110000', '110100', '110102'],
|
||||
columns: [
|
||||
district[0],
|
||||
district[district[0][0].value],
|
||||
district[district[district[0][0].value][0].value]
|
||||
],
|
||||
|
||||
onChangeDistrict (pickerView, value, columnIndex, resolve) {
|
||||
const value = ref(['110000', '110100', '110102'])
|
||||
|
||||
const columns = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
|
||||
|
||||
const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
|
||||
const item = value[columnIndex]
|
||||
if (columnIndex === 0) {
|
||||
pickerView.setColumnData(1, district[item.value])
|
||||
pickerView.setColumnData(2, district[district[item.value][0].value])
|
||||
return
|
||||
} else if (columnIndex === 1) {
|
||||
pickerView.setColumnData(2, district[item.value])
|
||||
}
|
||||
resolve()
|
||||
},
|
||||
}
|
||||
|
||||
displayFormat (items) {
|
||||
return items.map(item => {
|
||||
const displayFormat = (items) => {
|
||||
return items
|
||||
.map((item) => {
|
||||
return item.label
|
||||
}).join('-')
|
||||
}
|
||||
}
|
||||
})
|
||||
.join('-')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## 选择器大小
|
||||
@ -156,7 +142,7 @@ Page({
|
||||
通过设置 `size` 修改选择器大小，将 `size` 设置为 'large' 时字号为 16px。
|
||||
|
||||
```html
|
||||
<wd-picker label="单列选项" size="large" value="{{value}}" columns="{{columns}}" />
|
||||
<wd-picker label="单列选项" size="large" v-model="value" :columns="columns" />
|
||||
```
|
||||
|
||||
## 必填属性
|
||||
@ -164,7 +150,7 @@ Page({
|
||||
设置 `required` 属性，展示必填样式。
|
||||
|
||||
```html
|
||||
<wd-picker label="必填属性" error columns="{{columns}}" value="{{value}}" required/>
|
||||
<wd-picker label="必填属性" error :columns="columns" v-model="value" required/>
|
||||
```
|
||||
|
||||
## 错误状态
|
||||
@ -172,7 +158,7 @@ Page({
|
||||
设置 `error` 属性，选择器的值显示为红色。
|
||||
|
||||
```html
|
||||
<wd-picker label="单列选项" error columns="{{columns}}" value="{{value}}"/>
|
||||
<wd-picker label="单列选项" error :columns="columns" v-model="value"/>
|
||||
```
|
||||
|
||||
## 值靠右展示
|
||||
@ -180,7 +166,7 @@ Page({
|
||||
设置 `align-right` 属性，选择器的值靠右展示。
|
||||
|
||||
```html
|
||||
<wd-picker label="单列选项" align-right columns="{{columns}}" value="{{value}}"/>
|
||||
<wd-picker label="单列选项" align-right :columns="columns" v-model="value"/>
|
||||
```
|
||||
|
||||
## 确定前校验
|
||||
@ -188,37 +174,48 @@ Page({
|
||||
设置 `before-confirm` 函数，在用户点击`确定`按钮时，会执行 `before-confirm` 函数，并传入 `value` 、 `resolve` 和 `picker` 参数，可以对 `value` 进行校验，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会关闭 `picker`弹窗。可以通过 `picker` 参数直接设置 `loading`、`columns` 等属性。
|
||||
|
||||
```html
|
||||
<wd-picker label="before-confirm" columns="{{columns}}" value="{{value}}" before-confirm="{{beforeConfirm}}" bind:confirm="handleConfirm" />
|
||||
<wd-toast />
|
||||
|
||||
<wd-picker label="before-confirm" :columns="columns" v-model="value" :before-confirm="beforeConfirm" @confirm="handleConfirm" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
|
||||
value: '',
|
||||
beforeConfirm: function (value, resolve, picker) {
|
||||
picker.setData({
|
||||
loading: true
|
||||
})
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const beforeConfirm = (value, resolve, picker) => {
|
||||
picker.setLoading(true)
|
||||
setTimeout(() => {
|
||||
picker.setData({
|
||||
loading: false
|
||||
})
|
||||
picker.setLoading(false)
|
||||
if (['选项2', '选项3'].indexOf(value) > -1) {
|
||||
resolve(false)
|
||||
Toast.error('选项校验不通过，请重新选择')
|
||||
toast.error('选项校验不通过，请重新选择')
|
||||
} else {
|
||||
resolve(true)
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
handleConfirm (event) {
|
||||
this.setData({
|
||||
value: event.detail.detail
|
||||
})
|
||||
|
||||
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
|
||||
const value = ref('')
|
||||
|
||||
const beforeConfirm = (value, resolve, picker) => {
|
||||
picker.setLoading(true)
|
||||
setTimeout(() => {
|
||||
picker.setLoading(false)
|
||||
if (['选项2', '选项3'].indexOf(value) > -1) {
|
||||
resolve(false)
|
||||
toast.error('选项校验不通过，请重新选择')
|
||||
} else {
|
||||
resolve(true)
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function handleConfirm({ value }) {
|
||||
value.value = value
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 唤起项插槽
|
||||
@ -226,7 +223,7 @@ Page({
|
||||
开启 `use-default-slot` ，设置默认插槽修改唤起picker组件的形式。
|
||||
|
||||
```html
|
||||
<wd-picker columns="{{columns}}" value="{{value}}" use-default-slot>
|
||||
<wd-picker :columns="columns" v-model="value" use-default-slot>
|
||||
<wd-button>插槽唤起</wd-button>
|
||||
</wd-picker>
|
||||
```
|
||||
@ -235,7 +232,7 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| value | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
|
||||
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
|
||||
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
|
||||
@ -261,17 +258,17 @@ Page({
|
||||
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
|
||||
| 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 |
|
||||
| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 |
|
||||
| z-index | 弹窗层级 | number | - | 15 | - |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
|
||||
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| bind:confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
|
||||
| bind:cancel | 点击左侧按钮触发 | - | - |
|
||||
| bind:open | 打开选择器弹出层时触发 | - | - |
|
||||
| confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
|
||||
| cancel | 点击左侧按钮触发 | - | - |
|
||||
| open | 打开选择器弹出层时触发 | - | - |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -7,18 +7,17 @@
|
||||
单列选择器，给 `columns` 传入一个数值数组，设置 `value` 绑定值。选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染，`value` 获取的值为 `value` 属性的值，如果 `value` 属性不存在，则取 `label` 的值。
|
||||
|
||||
```html
|
||||
<wd-picker-view columns="{{columns}}" value="{{value}}" bind:change="onChange" />
|
||||
<wd-picker-view :columns="columns" v-model="value" @change="onChange" />
|
||||
```
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
|
||||
value: ''
|
||||
},
|
||||
onChange (picker, value, index) {
|
||||
Toast(`当前选中项: ${value}, 下标: ${index}`)
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
const toast = useToast()
|
||||
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
|
||||
const value3 = ref<string>('')
|
||||
function onChange({picker, value, index}) {
|
||||
toast.show(`当前选中项: ${value}, 下标: ${index}`)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
当 `columns` 选项为对象时，其数据结构为：
|
||||
@ -34,15 +33,11 @@ Page({
|
||||
选项可以为对象，设置 `disabled` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker-view columns="{{columns}}" value="{{value}}" disabled />
|
||||
<wd-picker-view :columns="columns" v-model="value" disabled />
|
||||
```
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
|
||||
value: '选项3'
|
||||
}
|
||||
})
|
||||
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
|
||||
const value = ref('选项3')
|
||||
```
|
||||
|
||||
## 加载中
|
||||
@ -50,35 +45,31 @@ Page({
|
||||
设置 `loading` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker-view columns="{{columns}}" loading />
|
||||
<wd-picker-view :columns="columns" loading />
|
||||
```
|
||||
## 多列
|
||||
|
||||
`columns` 属性设置为二维数组，`value` 为数组。
|
||||
|
||||
```html
|
||||
<wd-picker-view columns="{{columns}}" value="{{value}}" />
|
||||
<wd-picker-view :columns="columns" v-model="value" />
|
||||
```
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: ['中南大学', '软件工程'],
|
||||
columns: [
|
||||
const value = ref(['中南大学', '软件工程'])
|
||||
|
||||
const columns = ref([
|
||||
['中山大学', '中南大学', '华南理工大学'],
|
||||
['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
|
||||
],
|
||||
}
|
||||
})
|
||||
])
|
||||
|
||||
```
|
||||
|
||||
## 多级联动
|
||||
|
||||
传入 `column-change` 属性，其类型为 `function`，接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源，当修改完成后需要执行 `resolve()` 告知组件修改完成以继续执行，如果 `column-change` 包含异步操作，也可以使组件按照异步顺序进行执行。
|
||||
|
||||
> resolve 参数为 1.4.0 添加，每次修改完后都需要调用 resolve() 通知组件。
|
||||
|
||||
```html
|
||||
<wd-picker-view columns="{{columns}}" value="{{value}}" column-change="{{onChangeDistrict}}" />
|
||||
<wd-picker-view :columns="columns" v-model="value" :column-change="onChangeDistrict" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
@ -93,16 +84,12 @@ const district = {
|
||||
'440400': [{ label: '香洲区', value: '440402' }, { label: '斗门区', value: '440403' }, { label: '金湾区', value: '440404' }],
|
||||
'440500': [{ label: '龙湖区', value: '440507' }, { label: '金平区', value: '440511' }]
|
||||
}
|
||||
Page({
|
||||
data: {
|
||||
value: ['110000', '110100', '110102'],
|
||||
columns: [
|
||||
district[0],
|
||||
district[district[0][0].value],
|
||||
district[district[district[0][0].value][0].value]
|
||||
],
|
||||
|
||||
onChangeDistrict (pickerView, value, columnIndex, resolve) {
|
||||
const value = ref(['110000', '110100', '110102'])
|
||||
const columns = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
|
||||
|
||||
|
||||
const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
|
||||
const item = value[columnIndex]
|
||||
if (columnIndex === 0) {
|
||||
pickerView.setColumnData(1, district[item.value])
|
||||
@ -112,8 +99,6 @@ Page({
|
||||
}
|
||||
resolve()
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
@ -121,7 +106,7 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| value | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
|
||||
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
|
||||
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
|
||||
@ -144,9 +129,9 @@ Page({
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|------|--------|
|
||||
| bind:change | 选项值修改时触发 | event.detail = { value, picker, index }, 单列: picker实例, 选中项值, 选中项下标; 多列: picker实例, 所有列选中项值, 当前列的下标 | - |
|
||||
| bind:pickstart | 当滚动选择开始时候触发事件 | - | - |
|
||||
| bind:pickend | 当滚动选择结束时候触发事件 | - | - |
|
||||
| change | 选项值修改时触发 | event = { value, picker, index }, 单列: picker实例, 选中项值, 选中项下标; 多列: picker实例, 所有列选中项值, 当前列的下标 | - |
|
||||
| pickstart | 当滚动选择开始时候触发事件 | - | - |
|
||||
| pickend | 当滚动选择结束时候触发事件 | - | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
|
||||
@ -4,39 +4,34 @@
|
||||
|
||||
常用于展示提示信息。
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
Popover 的属性与 [Tooltip](/#/components/tooltip) 很类似，因此对于重复属性，请参考 [Tooltip](/#/components/tooltip) 的文档，在此文档中不做详尽解释。
|
||||
|
||||
因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 popover ，建议引入组件库的 clickoutside 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
|
||||
因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 popover ，建议引入组件库的 clickOut 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
|
||||
|
||||
:::warning
|
||||
如果存在用户手动点击 popover 以外某个地方如按钮弹出 popover 的场景，则需要在点击的元素（在这里上按钮）加上 catchtap 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 popover 关闭了。
|
||||
如果存在用户手动点击 popover 以外某个地方如按钮弹出 popover 的场景，则需要在点击的元素（在这里上按钮）加上 click 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 popover 关闭了。
|
||||
:::
|
||||
|
||||
```html
|
||||
<view catchtap="clickoutside">
|
||||
<wd-popover show="{{show}}" content="这是一段信息。" bind:change="handleChange">
|
||||
<view @click="clickoutside">
|
||||
<wd-popover v-model:show="show" content="这是一段信息。" @change="handleChange">
|
||||
<wd-button>点击展示</wd-button>
|
||||
</wd-popover>
|
||||
</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
|
||||
})
|
||||
function clickoutside() {
|
||||
clickOut.closeOutside()
|
||||
}
|
||||
const show = ref<boolean>(false)
|
||||
function handleChange1({ show }) {
|
||||
console.log(show)
|
||||
}
|
||||
```
|
||||
|
||||
## 模式 mode
|
||||
@ -44,6 +39,7 @@ Page({
|
||||
使用 `mode` 属性控制当前文字提示的展示模式。`mode` 可选参数为 `normal` / `menu`：
|
||||
|
||||
- **normal**（普通文字模式）:
|
||||
|
||||
- 当 `mode` 处于默认状态，`content` 属性传入要显示的 `String` 字符串。
|
||||
|
||||
- **menu**（列表模式）:
|
||||
@ -53,23 +49,26 @@ Page({
|
||||
列表模式下 `content` 数组内对象的数据结构：
|
||||
|
||||
| 键名 | 说明 | 类型 | 是否必填 | 最低版本 |
|
||||
|-----|------|-----|---------|--------|
|
||||
| ------------------------------------- | ------ | ------ | -------- | -------- |
|
||||
| content | 选项名 | string | 是 | - |
|
||||
| iconClass（不设置该属性时只展示标题） | 选项值 | string | 否 | - |
|
||||
|
||||
**注意：iconClass 属性值为组件库内部的 icon 图标名。**
|
||||
|
||||
```html
|
||||
<wd-popover show="{{show}}" mode="menu" content="{{ menu }}" bind:menu-click="link" bind:change="handleChange">
|
||||
<wd-popover v-model:show="show" mode="menu" :content="menu" @menu-click="link" @change="handleChange">
|
||||
<wd-button>列表</wd-button>
|
||||
</wd-popover>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
show: false,
|
||||
menu: [
|
||||
import { clickOut, useToast } from '@/uni_modules/wot-design-uni'
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const show = ref<boolean>(false)
|
||||
|
||||
const menu = ref<Array<Record<string, any>>>([
|
||||
{
|
||||
iconClass: 'read',
|
||||
content: '全部标记已读'
|
||||
@ -86,16 +85,11 @@ Page({
|
||||
iconClass: 'subscribe',
|
||||
content: '消息异常检测'
|
||||
}
|
||||
]
|
||||
},
|
||||
link (param) {
|
||||
const data = param.detail.item
|
||||
Toast('选择了' + data.content)
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({ show: event.detail.show })
|
||||
])
|
||||
|
||||
function link(e) {
|
||||
toast.show('选择了' + e.item.content)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 嵌套信息
|
||||
@ -104,15 +98,13 @@ Page({
|
||||
|
||||
```html
|
||||
<wd-popover use-content-slot>
|
||||
<view class="pop-content" slot="content">
|
||||
这是一段自定义样式的内容。
|
||||
</view>
|
||||
<wd-button>点击展示</wd-button>
|
||||
<template #content>
|
||||
<view class="pop-content">这是一段自定义样式的内容。</view>
|
||||
</template>
|
||||
<wd-button data-id="pop2">点击展示</wd-button>
|
||||
</wd-popover>
|
||||
```
|
||||
|
||||
小程序中组件插槽内部样式不生效，因此需要在外手动设置样式，在content插槽使用过程中，插槽最外层样式需要添加 `position: relative;z-index: 500;border-radius: 4px;` 保证位置不受影响，其余样式可随意添加。
|
||||
|
||||
```scss
|
||||
.pop-content {
|
||||
/* 必填 开始 */
|
||||
@ -126,13 +118,12 @@ Page({
|
||||
padding: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Popover Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| ------------- | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
|
||||
| value | 手动状态是否可见 | boolean | - | false | - |
|
||||
| content | 显示的内容，也可以通过 `slot#content` 传入 | string/array（当模式为菜单模式时，content 属性格式为 Array） | - | - | - |
|
||||
| mode | 当前显示的模式，决定内容的展现形式 | string | normal（普通模式）/ menu（菜单模式） | normal | - |
|
||||
@ -144,29 +135,29 @@ Page({
|
||||
## Slot
|
||||
|
||||
| name | 说明 | 最低版本 |
|
||||
|------|-----|---------|
|
||||
| ------- | ------------------------ | -------- |
|
||||
| content | 多行内容或用户自定义样式 | - |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | 最低版本 |
|
||||
|---------|-----| --------|--------|
|
||||
| bind:open | 显示时触发 | - | - |
|
||||
| bind:close | 隐藏时触发 | - | - |
|
||||
| bind:change | pop显隐值变化时触发 | - | - |
|
||||
| bind:menuclick | menu 模式下点击某一选项触发 | `{ item, index }` | - |
|
||||
| -------------- | --------------------------- | ----------------- | -------- |
|
||||
| open | 显示时触发 | - | - |
|
||||
| close | 隐藏时触发 | - | - |
|
||||
| change | pop 显隐值变化时触发 | - | - |
|
||||
| menuclick | menu 模式下点击某一选项触发 | `{ item, index }` | - |
|
||||
|
||||
## Methods
|
||||
|
||||
| 方法名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| -------- | ---------------- | ---- | -------- |
|
||||
| open | 打开文字提示弹框 | - | - |
|
||||
| close | 关闭文字提示弹框 | - | - |
|
||||
|
||||
## Popover 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| ------------ | ------------ | -------- |
|
||||
| custom-class | 根结点样式 | - |
|
||||
| custom-arrow | 尖角样式 | - |
|
||||
| custom-pop | 文字提示样式 | - |
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
通过 `show` 属性设置显示隐藏，监听 `bind:close` 事件修改 `show`。
|
||||
`v-model` 为绑定值，表示是否展示弹出层。
|
||||
|
||||
```html
|
||||
<wd-popup show="{{ show }}" custom-style="padding: 30px 40px;" bind:close="handleClose">内容</wd-popup>
|
||||
<wd-popup v-model="show" custom-style="padding: 30px 40px;" @close="handleClose">内容</wd-popup>
|
||||
```
|
||||
|
||||
## 弹出位置
|
||||
@ -16,7 +16,7 @@
|
||||
设置 `position`，默认为 'center'，可选值 'top', 'right', 'bottom', 'left'。
|
||||
|
||||
```html
|
||||
<wd-popup show="{{ show }}" position="top" custom-style="height: 200px;" bind:close="handleClose"></wd-popup>
|
||||
<wd-popup v-model="show" position="top" custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||
```
|
||||
|
||||
## 关闭按钮
|
||||
@ -24,14 +24,14 @@
|
||||
设置 `closable` 属性。
|
||||
|
||||
```html
|
||||
<wd-popup show="{{ show }}" position="bottom" closable custom-style="height: 200px;" bind:close="handleClose"></wd-popup>
|
||||
<wd-popup v-model="show" position="bottom" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|-----|------|-------|-------|---------|
|
||||
| show | 弹出层是否显示 | boolean | - | - | - |
|
||||
| v-model | 弹出层是否显示 | boolean | - | - | - |
|
||||
| position | 弹出位置 | string | center / top / right / bottom / left | center | - |
|
||||
| closable | 关闭按钮 | boolean | - | false | - |
|
||||
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
|
||||
@ -42,20 +42,20 @@
|
||||
| modal-style | 自定义modal蒙层样式 | string | - | - | - |
|
||||
| hide-when-close | 是否当关闭时将弹出层隐藏（display: none) | boolean | - | true | - |
|
||||
| lazy-render | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | false | 2.3.0 |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | false | - |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| bind:close | 弹出层关闭时触发 | - | - |
|
||||
| bind:clickmodal | 点击遮罩时触发 | - | - |
|
||||
| bind:beforeenter | 进入前触发 | - | - |
|
||||
| bind:enter | 进入时触发 | - | - |
|
||||
| bind:afterenter | 进入后触发 | - | - |
|
||||
| bind:beforeleave | 离开前触发 | - | - |
|
||||
| bind:leave | 离开时触发 | - | - |
|
||||
| bind:afterleave | 离开后触发| - | - |
|
||||
| close | 弹出层关闭时触发 | - | - |
|
||||
| clickmodal | 点击遮罩时触发 | - | - |
|
||||
| beforeenter | 进入前触发 | - | - |
|
||||
| enter | 进入时触发 | - | - |
|
||||
| afterenter | 进入后触发 | - | - |
|
||||
| beforeleave | 离开前触发 | - | - |
|
||||
| leave | 离开时触发 | - | - |
|
||||
| afterleave | 离开后触发| - | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
|
||||
@ -3,12 +3,16 @@
|
||||
# Progress 进度条
|
||||
|
||||
|
||||
用于展示操作的当前进度。
|
||||
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
设置百分比 `percentage`。
|
||||
|
||||
```html
|
||||
<wd-progress percentage="30" />
|
||||
<wd-progress :percentage="30" />
|
||||
```
|
||||
|
||||
## 隐藏进度文字
|
||||
@ -16,7 +20,7 @@
|
||||
设置 `hide-text` 隐藏进度文字。
|
||||
|
||||
```html
|
||||
<wd-progress percentage="60" hide-text>
|
||||
<wd-progress :percentage="60" hide-text>
|
||||
```
|
||||
|
||||
## 设置状态
|
||||
@ -24,8 +28,8 @@
|
||||
设置 `status`，告知用户当前状态和预期。
|
||||
|
||||
```html
|
||||
<wd-progress percentage="100" hide-text status="success" />
|
||||
<wd-progress percentage="70" hide-text status="danger" />
|
||||
<wd-progress :percentage="100" hide-text status="success" />
|
||||
<wd-progress :percentage="70" hide-text status="danger" />
|
||||
```
|
||||
|
||||
## 修改颜色
|
||||
@ -33,25 +37,23 @@
|
||||
设置 `color` 修改进度条颜色。
|
||||
|
||||
```html
|
||||
<wd-progress percentage="80" color="#00c740">
|
||||
<wd-progress :percentage="80" color="#00c740">
|
||||
```
|
||||
|
||||
`color` 也可以设置为数组或者函数。数组如果只传入颜色，则自动计算每个颜色的进度边界。函数需要返回一个颜色值。
|
||||
|
||||
```html
|
||||
<wd-progress percentage="100" color="{{[ '#00c740', '#ffb300', '#e2231a', '#0083ff' ]}}" />
|
||||
<wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />
|
||||
```
|
||||
|
||||
数组也可以设置为以下格式：
|
||||
|
||||
```html
|
||||
<wd-progress percentage="{{percentage}}" color="{{colorObject}}"/>
|
||||
<wd-progress :percentage="percentage" :color="colorObject"/>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
colorObject: [
|
||||
const colorObject = ref<any>([
|
||||
{
|
||||
color: 'yellow',
|
||||
percentage: 30
|
||||
@ -68,10 +70,8 @@ Page({
|
||||
color: 'black',
|
||||
percentage: 90
|
||||
}
|
||||
],
|
||||
percentage: 100
|
||||
}
|
||||
})
|
||||
])
|
||||
const percentage = ref<number>(100)
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
@ -10,24 +10,19 @@
|
||||
|
||||
```html
|
||||
<demo-block title="基本用法">
|
||||
<wd-radio-group value="{{value}}" bind:change="change">
|
||||
<wd-radio value="{{1}}">单选框1</wd-radio>
|
||||
<wd-radio value="{{2}}">单选框2</wd-radio>
|
||||
<wd-radio-group v-model="value" @change="change">
|
||||
<wd-radio :value="1">单选框1</wd-radio>
|
||||
<wd-radio :value="2">单选框2</wd-radio>
|
||||
</wd-radio-group>
|
||||
<view>当前选中的值为:{{value}}</view>
|
||||
</demo-block>
|
||||
```
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: 1
|
||||
},
|
||||
change (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
const value = ref<number>(1)
|
||||
|
||||
function change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 修改图标形状
|
||||
@ -36,23 +31,18 @@ Page({
|
||||
|
||||
```html
|
||||
<!-- button 按钮式单选 -->
|
||||
<wd-radio-group value="{{value}}" shape="button" bind:change="change">
|
||||
<wd-radio value="{{1}}">沃特</wd-radio>
|
||||
<wd-radio value="{{2}}">商家后台</wd-radio>
|
||||
<wd-radio-group v-model="value" shape="button" @change="change">
|
||||
<wd-radio :value="1">沃特</wd-radio>
|
||||
<wd-radio :value="2">商家后台</wd-radio>
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: 1
|
||||
},
|
||||
change (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
const value = ref<number>(1)
|
||||
|
||||
function change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
> <div style="color: #FA4350;font-weight: 500;">注意：</div>
|
||||
@ -60,24 +50,19 @@ Page({
|
||||
|
||||
```html
|
||||
<!-- dot 点状单选 -->
|
||||
<wd-radio-group value="{{value}}" shape="dot" bind:change="change">
|
||||
<wd-radio value="{{1}}">沃特</wd-radio>
|
||||
<wd-radio value="{{2}}">商家后台</wd-radio>
|
||||
<wd-radio-group v-model="value" shape="dot" @change="change">
|
||||
<wd-radio :value="1">沃特</wd-radio>
|
||||
<wd-radio :value="2">商家后台</wd-radio>
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: 1
|
||||
},
|
||||
change (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
const value = ref<number>(1)
|
||||
|
||||
function change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 表单模式
|
||||
@ -87,7 +72,7 @@ Page({
|
||||
开启表单模式时，如果同时设置 `shape` 为 `button` 开启表单复选按钮组模式。
|
||||
|
||||
```html
|
||||
<wd-radio-group value="1" cell>
|
||||
<wd-radio-group modelValue="1" cell>
|
||||
<wd-radio value="1">选项一</wd-radio>
|
||||
<wd-radio value="2">选项二</wd-radio>
|
||||
<wd-radio value="3">选项三</wd-radio>
|
||||
@ -103,7 +88,7 @@ Page({
|
||||
设置 `inline` 属性，使单选框在同一行展示。
|
||||
|
||||
```html
|
||||
<wd-radio-group value="1" inline>
|
||||
<wd-radio-group modelValue="1" inline>
|
||||
<wd-radio value="1">单选框1</wd-radio>
|
||||
<wd-radio value="2">单选框2</wd-radio>
|
||||
</wd-radio-group>
|
||||
@ -114,7 +99,7 @@ Page({
|
||||
设置 `checked-color` 属性。
|
||||
|
||||
```html
|
||||
<wd-radio-group value="1" checked-color="#fa4350">
|
||||
<wd-radio-group modelValue="1" checked-color="#fa4350">
|
||||
<wd-radio value="1">沃特</wd-radio>
|
||||
<wd-radio value="2">商家后台</wd-radio>
|
||||
</wd-radio-group>
|
||||
@ -125,7 +110,7 @@ Page({
|
||||
可以在 `radio-group` 上面设置 `disabled`，禁用所有单选框，也可以在单个单选框上面设置 `disabled` 属性，禁用某个单选框。
|
||||
|
||||
```html
|
||||
<wd-radio-group value="1" disabled>
|
||||
<wd-radio-group modelValue="1" disabled>
|
||||
<wd-radio value="1">沃特</wd-radio>
|
||||
<wd-radio value="2">商家后台</wd-radio>
|
||||
</wd-radio-group>
|
||||
@ -136,7 +121,7 @@ Page({
|
||||
设置 `size` 属性，可选 `large`。
|
||||
|
||||
```html
|
||||
<wd-radio-group value="1" size="large">
|
||||
<wd-radio-group modelValue="1" size="large">
|
||||
<wd-radio value="1">沃特</wd-radio>
|
||||
<wd-radio value="2">商家后台</wd-radio>
|
||||
</wd-radio-group>
|
||||
@ -147,9 +132,9 @@ Page({
|
||||
radio设置的props优先级比radioGroup上设置的props优先级更高
|
||||
|
||||
```html
|
||||
<wd-radio-group value="1" shape="button" disabled checked-color="#f00">
|
||||
<wd-radio value="1" disabled="{{false}}" checked-color="#000">商家后台</wd-radio>
|
||||
<wd-radio value="2" disabled="{{false}}">沃特</wd-radio>
|
||||
<wd-radio-group modelValue="1" shape="button" disabled checked-color="#f00">
|
||||
<wd-radio value="1" :disabled="false" checked-color="#000">商家后台</wd-radio>
|
||||
<wd-radio value="2" :disabled="false">沃特</wd-radio>
|
||||
<wd-radio value="3">商家智能</wd-radio>
|
||||
</wd-radio-group>
|
||||
```
|
||||
@ -172,7 +157,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| bind:change | 绑定值变化时触发 | `{ value }` | - |
|
||||
| change | 绑定值变化时触发 | `{ value }` | - |
|
||||
|
||||
## Radio Attributes
|
||||
|
||||
|
||||
@ -8,20 +8,16 @@
|
||||
设置`value`分数，设置`num`总分数，默认为5分，监听 `change` 事件获取新值。
|
||||
|
||||
```html
|
||||
<wd-rate value="{{value}}" bind:change="handleChange" />
|
||||
<wd-rate v-model="value" bind:change="handleChange" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
Page({
|
||||
data: {
|
||||
value: 1
|
||||
},
|
||||
handleChange (event) {
|
||||
this.setData({
|
||||
value: event.detail.value
|
||||
})
|
||||
|
||||
const value = ref<number>(1)
|
||||
|
||||
function changeValue({ value }) {
|
||||
console.log(value)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 只读
|
||||
@ -29,7 +25,7 @@ Page({
|
||||
设置 `readonly` 属性。
|
||||
|
||||
```html
|
||||
<wd-rate value="{{3}}" readonly />
|
||||
<wd-rate v-model="value" readonly />
|
||||
```
|
||||
|
||||
## 禁用
|
||||
@ -45,8 +41,8 @@ Page({
|
||||
可以通过 `color` 属性修改未选中的颜色，`active-color` 修改选中的颜色。
|
||||
|
||||
```html
|
||||
<wd-rate value="{{3}}" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" />
|
||||
<wd-rate value="{{4}}" active-color="{{['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']}}" />
|
||||
<wd-rate v-model="value" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" />
|
||||
<wd-rate v-model="value" :active-color="['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']" />
|
||||
```
|
||||
|
||||
## 修改icon
|
||||
@ -54,7 +50,7 @@ Page({
|
||||
可以通过 `icon` 属性修改未选中的图标，`active-icon` 修改选中的图标。
|
||||
|
||||
```html
|
||||
<wd-rate value="{{3}}" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
|
||||
<wd-rate v-model="value" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
|
||||
```
|
||||
|
||||
## 修改大小、间隔
|
||||
@ -62,7 +58,7 @@ Page({
|
||||
可以通过 `size` 属性修改图标的大小，`space` 修改图标之间的间隔。
|
||||
|
||||
```html
|
||||
<wd-rate value="{{3}}" size="30px" space="10px"/>
|
||||
<wd-rate v-model="value" size="30px" space="10px"/>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
@ -15,12 +15,12 @@ hero:
|
||||
- theme: brand
|
||||
text: 快速上手
|
||||
link: /guide/quickUse
|
||||
- theme: alt
|
||||
text: 组件列表
|
||||
link: /component/button
|
||||
- theme: alt
|
||||
text: 捐赠作者
|
||||
link: /reward/reward
|
||||
- theme: alt
|
||||
text: 查看源码
|
||||
link: https://github.com/Moonofweisheng/wot-design-uni
|
||||
|
||||
features:
|
||||
- icon: 🚀
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<wd-cell-group border>
|
||||
<wd-picker label="单列选项" :columns="columns0" />
|
||||
<wd-picker label="禁用" disabled v-model="value1" :columns="columns1" />
|
||||
<wd-picker label="只读" readonly v v-model="value2" :columns="columns2" />
|
||||
<wd-picker label="只读" readonly v-model="value2" :columns="columns2" />
|
||||
<wd-picker label="loading" loading :columns="columns3" />
|
||||
<wd-picker label="多列" v-model="value4" :columns="columns4" />
|
||||
<wd-picker label="多级联动" v-model="value5" :columns="columns5" :column-change="onChangeDistrict" />
|
||||
|
||||
@ -12,19 +12,19 @@
|
||||
|
||||
<demo-block custom-class="pop" title="嵌套信息">
|
||||
<view class="center list">
|
||||
<wd-popover id="pop2" v-model:show="show2" use-content-slot @change="handleChange2">
|
||||
<wd-popover v-model:show="show2" use-content-slot @change="handleChange2">
|
||||
<template #content>
|
||||
<view class="pop-content">这是一段自定义样式的内容。</view>
|
||||
</template>
|
||||
<wd-button data-id="pop2">点击展示</wd-button>
|
||||
<wd-button>点击展示</wd-button>
|
||||
</wd-popover>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<demo-block custom-class="pop" title="列表展示">
|
||||
<view class="center list">
|
||||
<wd-popover id="pop3" v-model:show="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
|
||||
<wd-button data-id="pop3">列表</wd-button>
|
||||
<wd-popover v-model:show="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
|
||||
<wd-button>列表</wd-button>
|
||||
</wd-popover>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-07-29 17:03:39
|
||||
* @LastEditTime: 2023-08-01 23:46:20
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\pages\rate\Index.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<template>
|
||||
<demo-block title="基本用法">
|
||||
<wd-rate v-model="value1" @change="changeValue1" />
|
||||
|
||||
@ -356,7 +356,7 @@ function handleChange(index: number) {
|
||||
// 延迟一下，避免组件刚渲染时调用者的事件未初始化好
|
||||
setTimeout(() => {
|
||||
emit('change', {
|
||||
proxy,
|
||||
picker: proxy.$.exposed,
|
||||
value,
|
||||
index
|
||||
})
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
export default {
|
||||
// 选择器左侧文案
|
||||
label: String,
|
||||
// 选择器占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
value: '请选择'
|
||||
},
|
||||
// 禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
// 只读
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
loadingColor: {
|
||||
type: String,
|
||||
value: '#4D80F0'
|
||||
},
|
||||
/* popup */
|
||||
// 弹出层标题
|
||||
title: String,
|
||||
// 取消按钮文案
|
||||
cancelButtonText: {
|
||||
type: String,
|
||||
value: '取消'
|
||||
},
|
||||
// 确认按钮文案
|
||||
confirmButtonText: {
|
||||
type: String,
|
||||
value: '完成'
|
||||
},
|
||||
// 是否必填
|
||||
required: Boolean,
|
||||
size: String,
|
||||
labelWidth: String,
|
||||
useDefaultSlot: Boolean,
|
||||
useLabelSlot: Boolean,
|
||||
error: Boolean,
|
||||
alignRight: Boolean,
|
||||
beforeConfirm: null,
|
||||
closeOnClickModal: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
ellipsis: Boolean
|
||||
}
|
||||
@ -1,12 +1,3 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-12 18:40:58
|
||||
* @LastEditTime: 2023-07-20 17:20:13
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-picker\wd-picker.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<template>
|
||||
<view
|
||||
:class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''} ${cell.border.value ? 'is-border' : ''} ${
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user