Skip to content

Commit 4a50f2d

Browse files
MoonofweishengMoonofweisheng
committed
feat: ✨ 结合Cell组件重构Picker相关组件的触发器
1 parent 569a46b commit 4a50f2d

51 files changed

Lines changed: 1497 additions & 1520 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
},
6060
],
6161
"i18n-ally.extract.parsers.html": {
62-
"attributes": ["text", "title", "alt", "placeholder", "label", "aria-label", "cancel-text", "close-text", "left-text", "right-text"],
62+
"attributes": ["text", "title", "alt", "placeholder", "label", "aria-label", "cancel-text", "close-text", "left-text", "right-text", "value"],
6363
"ignoredTags": ["script", "style"],
6464
"vBind": true,
6565
"inlineText": true

‎docs/component/calendar.md‎

Lines changed: 44 additions & 43 deletions
Large diffs are not rendered by default.

‎docs/component/cell.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,14 @@ function handleSliderChange({ value }) {
161161
<wd-cell title="标题文字" label="这里是文字描述这里是文字描述这里是文字描述" title-width="200px" value="内容" />
162162
```
163163

164+
## 内容省略
165+
166+
设置 `ellipsis` 属性，右侧内容超出时会以省略号显示。
167+
168+
```html
169+
<wd-cell title="标题文字" value="这是一段很长很长很长很长很长很长的内容" ellipsis />
170+
```
171+
164172
## 自定义内容
165173

166174
`cell` 提供了 `icon`、`title`、`label`和默认 value 的插槽。
@@ -253,6 +261,8 @@ function handleSwitchChange({ value }) {
253261
| center | 是否垂直居中，默认顶部居中 | boolean | - | false | - |
254262
| required | 表单属性，必填 | boolean | - | false | - |
255263
| vertical | 表单属性，上下结构 | boolean | - | false | - |
264+
| ellipsis | 内容省略，右侧内容超出时会以省略号显示 | boolean | - | false | $LOWEST_VERSION$ |
265+
| use-title-slot | 是否启用title插槽，默认启用，用来解决插槽传递时v-slot和v-if冲突问题 | boolean | - | true | $LOWEST_VERSION$ |
256266
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
257267
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
258268
| border | 是否展示边框线，优先级高于`cell-group`的`border` | boolean | - | - | - |

‎docs/component/datetime-picker.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ const displayFormatTabLabel = (items) => {
318318
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
319319
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
320320
| use-second | 是否显示秒选择，仅在 time 和 datetime 类型下生效 | boolean | - | false | 1.10.0 |
321+
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
321322
| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
322323

323324
### FormItemRule 数据结构
@@ -336,6 +337,7 @@ const displayFormatTabLabel = (items) => {
336337
| confirm | 点击右侧按钮触发 | `{ value }`, value 为当前选中日期的时间戳，'time' 类型则为字符串 | - |
337338
| cancel | 点击左侧按钮触发 | - | - |
338339
| toggle | 在区域选择模式下，tab标签切换时触发 | 切换到当前picker选中的值 | - |
340+
| clear | 点击清空按钮触发 | - | $LOWEST_VERSION$ |
339341

340342
## Methods
341343

‎docs/component/picker.md‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -238,41 +238,41 @@ function handleConfirm({ value }) {
238238

239239
## Attributes
240240

241-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
242-
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ | ------- | ---------------- |
243-
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
244-
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
245-
| loading | 加载中 | boolean | - | false | - |
246-
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
247-
| columns-height | picker内部滚筒高 | number | - | 231 | - |
248-
| value-key | 选项对象中，value对应的 key | string | - | value | - |
249-
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
250-
| title | 弹出层标题 | string | - | - | - |
251-
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
252-
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
253-
| label | 选择器左侧文案 | string | - | - | - |
254-
| placeholder | 选择器占位符 | string | - | 请选择 | - |
255-
| disabled | 禁用 | boolean | - | false | - |
256-
| readonly | 只读 | boolean | - | false | - |
257-
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
258-
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
259-
| size | 设置选择器大小 | string | large | - | - |
260-
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
261-
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
262-
| required | 表单属性，必填 | boolean | - | false | - |
263-
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
264-
| use-label-slot | label 使用插槽 | boolean | - | false | - |
265-
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
266-
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
267-
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
268-
| z-index | 弹窗层级 | number | - | 15 | - |
269-
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
270-
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
271-
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
272-
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
273-
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
274-
| clearable | 显示清空按钮 | boolean | - | false | 1.3.13 |
275-
| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
241+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
242+
|------|------|------|--------|--------|----------|
243+
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string/number/boolean/array | - | - | - |
244+
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
245+
| loading | 加载中 | boolean | - | false | - |
246+
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
247+
| columns-height | picker内部滚筒高 | number | - | 231 | - |
248+
| value-key | 选项对象中，value对应的 key | string | - | value | - |
249+
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
250+
| title | 弹出层标题 | string | - | - | - |
251+
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
252+
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
253+
| label | 选择器左侧文案 | string | - | - | - |
254+
| placeholder | 选择器占位符 | string | - | 请选择 | - |
255+
| disabled | 禁用 | boolean | - | false | - |
256+
| readonly | 只读 | boolean | - | false | - |
257+
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
258+
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源 | function | - | - | - |
259+
| size | 设置选择器大小 | string | large | - | - |
260+
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
261+
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
262+
| required | 表单属性，必填 | boolean | - | false | - |
263+
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
264+
| use-label-slot | label 使用插槽 | boolean | - | false | - |
265+
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
266+
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
267+
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
268+
| z-index | 弹窗层级 | number | - | 15 | - |
269+
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
270+
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
271+
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
272+
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
273+
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持 | boolean | - | false | 1.2.25 |
274+
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
275+
| root-portal | 是否从页面中脱离出来，用于解决各种 fixed 失效问题 | boolean | - | false | $LOWEST_VERSION$ |
276276

277277
### FormItemRule 数据结构
278278

@@ -290,7 +290,7 @@ function handleConfirm({ value }) {
290290
| confirm | 点击右侧按钮触发 | { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
291291
| cancel | 点击左侧按钮触发 | - | - |
292292
| open | 打开选择器弹出层时触发 | - | - |
293-
| clear | 点击清空按钮时触发 | - | 1.3.13 |
293+
| clear | 点击清空按钮时触发 | - | $LOWEST_VERSION$ |
294294

295295
## Methods
296296

0 commit comments

Comments
 (0)