Skip to content

Commit 64a089e

Browse files
authored
docs(Upload): add FAQ (#3550)
1 parent df00965 commit 64a089e

File tree

4 files changed

+40
-34
lines changed

4 files changed

+40
-34
lines changed

src/color-picker/README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,22 @@ isComponent: true
3333

3434
{{ format }}
3535

36+
## FAQ
37+
38+
如果使用场景为 `scroll-view`,除了需要显示指定 `fixed` 属性为 `true`,还需要手动调用组件的 debouncedUpdateEleRect() 事件。
39+
40+
```html
41+
<scroll-view type="list" scroll-y bind:scroll="onScroll">
42+
<t-color-picker id="ColorPicker" fixed />
43+
</scroll-view>
44+
```
45+
46+
```js
47+
onScroll(e) {
48+
if (!this.colorPicker) this.colorPicker = this.selectComponent('#ColorPicker');
49+
this.colorPicker.debouncedUpdateEleRect(e);
50+
}
51+
```
3652

3753
## API
3854

@@ -64,19 +80,3 @@ change | `(value: string, context: { color: ColorObject; trigger: ColorPickerCha
6480
close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
6581
palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发,`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
6682

67-
## FAQ
68-
69-
如果使用场景为 `scroll-view`,除了需要显示指定 `fixed` 属性为 `true`,还需要手动调用组件的 debouncedUpdateEleRect() 事件。
70-
71-
```html
72-
<scroll-view type="list" scroll-y bind:scroll="onScroll">
73-
<t-color-picker id="ColorPicker" fixed />
74-
</scroll-view>
75-
```
76-
77-
```js
78-
onScroll(e) {
79-
if (!this.colorPicker) this.colorPicker = this.selectComponent('#ColorPicker');
80-
this.colorPicker.debouncedUpdateEleRect(e);
81-
}
82-
```

src/slider/README.md

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,19 @@ isComponent: true
6262

6363
{{ vertical }}
6464

65+
## FAQ
66+
67+
当 slider 外层使用 `hidden` 包裹,需要在 `hidden = false` 时,重新调用组件的 `init` 方法,才能正常渲染(在t-popup/t-dialog中同理)。如下:
68+
69+
```html
70+
<t-slider id="slider" />
71+
```
72+
73+
```js
74+
const $slider = this.selectComponent('#slider');
75+
76+
$slider.init();
77+
```
6578

6679
## API
6780

@@ -104,20 +117,6 @@ t-class-bar-active | 滑道激活态样式类
104117
t-class-bar-disabled | 滑道禁用态样式类
105118
t-class-cursor | 游标样式类
106119

107-
## FAQ
108-
109-
当 slider 外层使用 `hidden` 包裹,需要在 `hidden = false` 时,重新调用组件的 `init` 方法,才能正常渲染(在t-popup/t-dialog中同理)。如下:
110-
111-
```html
112-
<t-slider id="slider" />
113-
```
114-
115-
```js
116-
const $slider = this.selectComponent('#slider');
117-
118-
$slider.init();
119-
```
120-
121120
### CSS Variables
122121

123122
组件提供了下列 CSS 变量,可用于自定义样式。

src/swipe-cell/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ isComponent: true
4343

4444
{{ icon }}
4545

46+
## FAQ
47+
### `SwipeCell` 组件在真机上无法滑动?
48+
移除全局配置项: "componentFramework": "glass-easel",详情见: [issue 2524](https://github.com/Tencent/tdesign-miniprogram/issues/2524)。如需使用 `skyline render`,建议页面级粒度开启。
49+
4650
## API
4751

4852
### SwipeCell Props
@@ -63,7 +67,3 @@ right | Array / Slot | - | 右侧滑动操作项。有两种定义方式,一
6367
click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发(插槽写法组件不触发,业务侧自定义内容和事件)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
6468
dragend | \- | 滑动结束事件
6569
dragstart | \- | 滑动开始事件
66-
67-
## FAQ
68-
### `SwipeCell` 组件在真机上无法滑动?
69-
移除全局配置项: "componentFramework": "glass-easel",详情见: [issue 2524](https://github.com/Tencent/tdesign-miniprogram/issues/2524)。如需使用 `skyline render`,建议页面级粒度开启。

src/upload/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,13 @@ isComponent: true
5656

5757
{{ messageFile }}
5858

59+
## FAQ
60+
61+
### 为什么 `Upload` 外层使用 `display: flex` 时会造成组件样式混乱?
62+
63+
`Upload` 是基于 `TGrid` 宫格实现,当外层使用 `display: flex` ,子元素会默认加上 `flex-grow: 0`,造成 `Upload` 组件整体宽度不足。可以通过给组件根节点加上 `flex-grow: 1` 处理。
64+
65+
5966
## API
6067

6168
### Upload Props

0 commit comments

Comments
 (0)