@tarojs/components 3.4.0-beta.2 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/taro-components.cjs.js +1 -1
- package/dist/cjs/taro-input-core.cjs.entry.js +26 -18
- package/dist/cjs/taro-pull-to-refresh.cjs.entry.js +12 -3
- package/dist/cjs/taro-scroll-view-core.cjs.entry.js +3 -3
- package/dist/cjs/taro-tabbar.cjs.entry.js +3 -2
- package/dist/cjs/taro-textarea-core.cjs.entry.js +3 -3
- package/dist/collection/components/input/input.js +41 -24
- package/dist/collection/components/pull-to-refresh/pull-to-refresh.js +11 -2
- package/dist/collection/components/pull-to-refresh/style/index.css +1 -0
- package/dist/collection/components/scroll-view/scroll-view.js +3 -3
- package/dist/collection/components/tabbar/style/index.css +1 -1
- package/dist/collection/components/tabbar/tabbar.js +2 -1
- package/dist/collection/components/textarea/textarea.js +3 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/taro-components.js +1 -1
- package/dist/esm/taro-input-core.entry.js +26 -18
- package/dist/esm/taro-pull-to-refresh.entry.js +12 -3
- package/dist/esm/taro-scroll-view-core.entry.js +3 -3
- package/dist/esm/taro-tabbar.entry.js +3 -2
- package/dist/esm/taro-textarea-core.entry.js +3 -3
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/taro-components.js +1 -1
- package/dist/esm-es5/taro-input-core.entry.js +1 -1
- package/dist/esm-es5/taro-pull-to-refresh.entry.js +1 -1
- package/dist/esm-es5/taro-scroll-view-core.entry.js +1 -1
- package/dist/esm-es5/taro-tabbar.entry.js +1 -1
- package/dist/esm-es5/taro-textarea-core.entry.js +1 -1
- package/dist/taro-components/p-19c46f62.system.entry.js +1 -0
- package/dist/taro-components/p-2b0d5c90.system.entry.js +1 -0
- package/dist/taro-components/{p-627a5064.system.entry.js → p-2dc57c71.system.entry.js} +1 -1
- package/dist/taro-components/p-33ee636a.system.js +1 -1
- package/dist/taro-components/p-4e54216b.entry.js +1 -0
- package/dist/taro-components/{p-12ae0a33.entry.js → p-63ff7fa7.entry.js} +1 -1
- package/dist/taro-components/p-71e14298.entry.js +1 -0
- package/dist/taro-components/p-8486c251.system.entry.js +1 -0
- package/dist/taro-components/{p-dd34408a.entry.js → p-a345ba40.entry.js} +1 -1
- package/dist/taro-components/{p-6965567d.entry.js → p-cc818a13.entry.js} +1 -1
- package/dist/taro-components/{p-13c1404f.system.entry.js → p-fd0d1168.system.entry.js} +1 -1
- package/dist/taro-components/taro-components.css +1 -1
- package/dist/taro-components/taro-components.esm.js +1 -1
- package/dist/types/components/input/input.d.ts +3 -3
- package/dist/types/components/textarea/textarea.d.ts +1 -1
- package/dist/types/components.d.ts +1 -0
- package/dist-h5/vue/components/picker.js +2 -1
- package/package.json +3 -3
- package/types/Ad.d.ts +22 -10
- package/types/Audio.d.ts +25 -5
- package/types/Button.d.ts +96 -23
- package/types/Camera.d.ts +11 -11
- package/types/Canvas.d.ts +14 -1
- package/types/Checkbox.d.ts +65 -1
- package/types/CoverImage.d.ts +48 -6
- package/types/CoverView.d.ts +51 -8
- package/types/Editor.d.ts +57 -0
- package/types/Form.d.ts +33 -2
- package/types/FunctionalPageNavigator.d.ts +4 -4
- package/types/Icon.d.ts +17 -1
- package/types/Image.d.ts +24 -4
- package/types/Input.d.ts +66 -5
- package/types/KeyboardAccessory.d.ts +2 -1
- package/types/Label.d.ts +18 -4
- package/types/LivePlayer.d.ts +15 -9
- package/types/LivePusher.d.ts +21 -15
- package/types/Map.d.ts +59 -5
- package/types/MatchMedia.d.ts +24 -5
- package/types/MovableArea.d.ts +9 -3
- package/types/MovableView.d.ts +20 -6
- package/types/Navigator.d.ts +7 -7
- package/types/OfficialAccount.d.ts +4 -10
- package/types/OpenData.d.ts +11 -5
- package/types/PageContainer.d.ts +8 -2
- package/types/Picker.d.ts +64 -1
- package/types/PickerView.d.ts +66 -2
- package/types/PickerViewColumn.d.ts +1 -1
- package/types/Progress.d.ts +12 -1
- package/types/Radio.d.ts +77 -1
- package/types/RichText.d.ts +33 -1
- package/types/ScrollView.d.ts +91 -9
- package/types/ShareElement.d.ts +1 -1
- package/types/Slider.d.ts +14 -1
- package/types/Swiper.d.ts +26 -1
- package/types/SwiperItem.d.ts +28 -3
- package/types/Switch.d.ts +21 -3
- package/types/Text.d.ts +38 -1
- package/types/Textarea.d.ts +17 -1
- package/types/Video.d.ts +50 -30
- package/types/View.d.ts +33 -1
- package/types/VoipRoom.d.ts +10 -11
- package/types/WebView.d.ts +7 -1
- package/types/common.d.ts +1 -1
- package/dist/taro-components/p-04818461.system.entry.js +0 -1
- package/dist/taro-components/p-12638ebc.system.entry.js +0 -1
- package/dist/taro-components/p-56618f09.entry.js +0 -1
- package/dist/taro-components/p-66237ac0.entry.js +0 -1
- package/dist/taro-components/p-665e8461.system.entry.js +0 -1
package/types/Checkbox.d.ts
CHANGED
|
@@ -29,12 +29,17 @@ interface CheckboxProps extends StandardProps {
|
|
|
29
29
|
* @supported h5, rn
|
|
30
30
|
*/
|
|
31
31
|
onChange?: CommonEventFunction<{ value: string[] }>
|
|
32
|
+
|
|
33
|
+
/** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
|
|
34
|
+
* @supported h5
|
|
35
|
+
*/
|
|
36
|
+
nativeProps?: Record<string, unknown>
|
|
32
37
|
}
|
|
33
38
|
|
|
34
39
|
/** 多选项目
|
|
35
40
|
* @classification forms
|
|
36
41
|
* @supported weapp, h5, rn
|
|
37
|
-
* @
|
|
42
|
+
* @example_react
|
|
38
43
|
* ```tsx
|
|
39
44
|
* export default class PageCheckbox extends Component {
|
|
40
45
|
* state = {
|
|
@@ -94,6 +99,65 @@ interface CheckboxProps extends StandardProps {
|
|
|
94
99
|
* }
|
|
95
100
|
* }
|
|
96
101
|
* ```
|
|
102
|
+
* @example_vue
|
|
103
|
+
* ```html
|
|
104
|
+
* <template>
|
|
105
|
+
* <view class="container">
|
|
106
|
+
* <view class="page-section">
|
|
107
|
+
* <text>默认样式</text>
|
|
108
|
+
* <checkbox value="选中" :checked="true">选中</checkbox>
|
|
109
|
+
* <checkbox style="margin-left: 20rpx;" value="未选中">未选中</checkbox>
|
|
110
|
+
* </view>
|
|
111
|
+
* <view class="page-section">
|
|
112
|
+
* <text>推荐展示样式(Taro 团队成员):</text>
|
|
113
|
+
* <label v-for="item in list" class="checkbox-list__label">
|
|
114
|
+
* <checkbox class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</checkbox>
|
|
115
|
+
* </label>
|
|
116
|
+
* </view>
|
|
117
|
+
* </view>
|
|
118
|
+
* </template>
|
|
119
|
+
*
|
|
120
|
+
* <script>
|
|
121
|
+
* export default {
|
|
122
|
+
* data() {
|
|
123
|
+
* return {
|
|
124
|
+
* list: [
|
|
125
|
+
* {
|
|
126
|
+
* value: '美国',
|
|
127
|
+
* text: '美国',
|
|
128
|
+
* checked: false
|
|
129
|
+
* },
|
|
130
|
+
* {
|
|
131
|
+
* value: '中国',
|
|
132
|
+
* text: '中国',
|
|
133
|
+
* checked: true
|
|
134
|
+
* },
|
|
135
|
+
* {
|
|
136
|
+
* value: '巴西',
|
|
137
|
+
* text: '巴西',
|
|
138
|
+
* checked: false
|
|
139
|
+
* },
|
|
140
|
+
* {
|
|
141
|
+
* value: '日本',
|
|
142
|
+
* text: '日本',
|
|
143
|
+
* checked: false
|
|
144
|
+
* },
|
|
145
|
+
* {
|
|
146
|
+
* value: '英国',
|
|
147
|
+
* text: '英国',
|
|
148
|
+
* checked: false
|
|
149
|
+
* },
|
|
150
|
+
* {
|
|
151
|
+
* value: '法国',
|
|
152
|
+
* text: '法国',
|
|
153
|
+
* checked: false
|
|
154
|
+
* }
|
|
155
|
+
* ]
|
|
156
|
+
* }
|
|
157
|
+
* }
|
|
158
|
+
* }
|
|
159
|
+
* </script>
|
|
160
|
+
* ```
|
|
97
161
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
|
|
98
162
|
*/
|
|
99
163
|
declare const Checkbox: ComponentType<CheckboxProps>
|
package/types/CoverImage.d.ts
CHANGED
|
@@ -3,32 +3,34 @@ import { StandardProps, CommonEventFunction } from './common'
|
|
|
3
3
|
|
|
4
4
|
interface CoverImageProps extends StandardProps {
|
|
5
5
|
/** 图标路径,支持临时路径、网络地址、云文件ID。暂不支持base64格式。
|
|
6
|
-
* @supported weapp
|
|
6
|
+
* @supported weapp, h5
|
|
7
7
|
*/
|
|
8
8
|
src: string
|
|
9
9
|
|
|
10
10
|
/** 图片加载成功时触发
|
|
11
|
-
* @supported weapp
|
|
11
|
+
* @supported weapp, h5
|
|
12
12
|
*/
|
|
13
13
|
onLoad?: CommonEventFunction
|
|
14
14
|
|
|
15
15
|
/** 图片加载失败时触发
|
|
16
|
-
* @supported weapp
|
|
16
|
+
* @supported weapp, h5
|
|
17
17
|
*/
|
|
18
18
|
onError?: CommonEventFunction
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
|
|
22
22
|
* @classification viewContainer
|
|
23
|
-
* @supported weapp, swan, alipay
|
|
24
|
-
* @
|
|
23
|
+
* @supported weapp, swan, alipay, h5
|
|
24
|
+
* @example_react
|
|
25
25
|
* ```tsx
|
|
26
|
+
* // js
|
|
26
27
|
* class App extends Components {
|
|
27
28
|
* render () {
|
|
28
29
|
* return (
|
|
30
|
+
* <View className='container'>
|
|
29
31
|
* <Video id='myVideo' src='src'>
|
|
30
32
|
* <CoverView className='controls'>
|
|
31
|
-
* <CoverView className='play' onClick=
|
|
33
|
+
* <CoverView className='play' onClick='play'>
|
|
32
34
|
* <CoverImage className='img' src='src' />
|
|
33
35
|
* </CoverView>
|
|
34
36
|
* </CoverView>
|
|
@@ -36,6 +38,46 @@ interface CoverImageProps extends StandardProps {
|
|
|
36
38
|
* )
|
|
37
39
|
* }
|
|
38
40
|
* }
|
|
41
|
+
* // css
|
|
42
|
+
* .container {
|
|
43
|
+
* position: relative;
|
|
44
|
+
* }
|
|
45
|
+
* .controls {
|
|
46
|
+
* position: absolute;
|
|
47
|
+
* top: 50%;
|
|
48
|
+
* left: 50%;
|
|
49
|
+
* width: 300px;
|
|
50
|
+
* height: 225px;
|
|
51
|
+
* transform: translate(-50%, -50%);
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
54
|
+
* @example_vue
|
|
55
|
+
* ```html
|
|
56
|
+
* <template>
|
|
57
|
+
* <view class="container">
|
|
58
|
+
* <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
|
|
59
|
+
* </video>
|
|
60
|
+
* <cover-view class='controls'>
|
|
61
|
+
* <cover-view class='play' `@tap='play'>
|
|
62
|
+
* <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
|
|
63
|
+
* </cover-view>
|
|
64
|
+
* </cover-view>
|
|
65
|
+
* </view>
|
|
66
|
+
* </template>
|
|
67
|
+
*
|
|
68
|
+
* <style>
|
|
69
|
+
* .container {
|
|
70
|
+
* position: relative;
|
|
71
|
+
* }
|
|
72
|
+
* .controls {
|
|
73
|
+
* position: absolute;
|
|
74
|
+
* top: 50%;
|
|
75
|
+
* left: 50%;
|
|
76
|
+
* width: 300px;
|
|
77
|
+
* height: 225px;
|
|
78
|
+
* transform: translate(-50%, -50%);
|
|
79
|
+
* }
|
|
80
|
+
* </style>
|
|
39
81
|
* ```
|
|
40
82
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
|
|
41
83
|
*/
|
package/types/CoverView.d.ts
CHANGED
|
@@ -21,22 +21,65 @@ interface CoverViewProps extends ViewProps {
|
|
|
21
21
|
|
|
22
22
|
/** 覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。
|
|
23
23
|
* @classification viewContainer
|
|
24
|
-
* @supported weapp, swan, alipay
|
|
25
|
-
* @
|
|
24
|
+
* @supported weapp, swan, alipay, h5
|
|
25
|
+
* @example_react
|
|
26
26
|
* ```tsx
|
|
27
|
+
* // js
|
|
27
28
|
* class App extends Components {
|
|
28
29
|
* render () {
|
|
29
30
|
* return (
|
|
30
|
-
* <
|
|
31
|
-
* <
|
|
32
|
-
* <CoverView className='
|
|
33
|
-
* <
|
|
31
|
+
* <View className='container'>
|
|
32
|
+
* <Video id='myVideo' src='src'>
|
|
33
|
+
* <CoverView className='controls'>
|
|
34
|
+
* <CoverView className='play' onClick='play'>
|
|
35
|
+
* <CoverImage className='img' src='src' />
|
|
36
|
+
* </CoverView>
|
|
34
37
|
* </CoverView>
|
|
35
|
-
* </
|
|
36
|
-
* </
|
|
38
|
+
* </Video>
|
|
39
|
+
* </View>
|
|
37
40
|
* )
|
|
38
41
|
* }
|
|
39
42
|
* }
|
|
43
|
+
* // css
|
|
44
|
+
* .container {
|
|
45
|
+
* position: relative;
|
|
46
|
+
* }
|
|
47
|
+
* .controls {
|
|
48
|
+
* position: absolute;
|
|
49
|
+
* top: 50%;
|
|
50
|
+
* left: 50%;
|
|
51
|
+
* width: 300px;
|
|
52
|
+
* height: 225px;
|
|
53
|
+
* transform: translate(-50%, -50%);
|
|
54
|
+
* }
|
|
55
|
+
* ```
|
|
56
|
+
* @example_vue
|
|
57
|
+
* ```html
|
|
58
|
+
* <template>
|
|
59
|
+
* <view class="container">
|
|
60
|
+
* <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
|
|
61
|
+
* </video>
|
|
62
|
+
* <cover-view class='controls'>
|
|
63
|
+
* <cover-view class='play' `@tap='play'>
|
|
64
|
+
* <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
|
|
65
|
+
* </cover-view>
|
|
66
|
+
* </cover-view>
|
|
67
|
+
* </view>
|
|
68
|
+
* </template>
|
|
69
|
+
*
|
|
70
|
+
* <style>
|
|
71
|
+
* .container {
|
|
72
|
+
* position: relative;
|
|
73
|
+
* }
|
|
74
|
+
* .controls {
|
|
75
|
+
* position: absolute;
|
|
76
|
+
* top: 50%;
|
|
77
|
+
* left: 50%;
|
|
78
|
+
* width: 300px;
|
|
79
|
+
* height: 225px;
|
|
80
|
+
* transform: translate(-50%, -50%);
|
|
81
|
+
* }
|
|
82
|
+
* </style>
|
|
40
83
|
* ```
|
|
41
84
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
|
|
42
85
|
*/
|
package/types/Editor.d.ts
CHANGED
|
@@ -79,6 +79,63 @@ declare namespace EditorProps {
|
|
|
79
79
|
* *编辑器内支持部分 HTML 标签和内联样式,不支持 **class** 和 **id***
|
|
80
80
|
* @classification forms
|
|
81
81
|
* @supported weapp
|
|
82
|
+
* @example_react
|
|
83
|
+
* ```tsx
|
|
84
|
+
* class App extends Components {
|
|
85
|
+
* state = {
|
|
86
|
+
* placeholder: '来,输入隔壁的名字试试...'
|
|
87
|
+
* }
|
|
88
|
+
*
|
|
89
|
+
* editorReady = e => {
|
|
90
|
+
* Taro.createSelectorQuery().select('#editor').context((res) => {
|
|
91
|
+
* this.editorCtx = res.context
|
|
92
|
+
* }).exec()
|
|
93
|
+
* }
|
|
94
|
+
*
|
|
95
|
+
* undo = e => {
|
|
96
|
+
* this.editorCtx.undo()
|
|
97
|
+
* }
|
|
98
|
+
*
|
|
99
|
+
* render () {
|
|
100
|
+
* return (
|
|
101
|
+
* <View>
|
|
102
|
+
* <Editor id='editor' className='editor' placeholder={this.state.placeholder} onReady={this.editorReady}></Editor>
|
|
103
|
+
* <Button type='warn' onClick={this.undo}>撤销</Button>
|
|
104
|
+
* </View>
|
|
105
|
+
* )
|
|
106
|
+
* }
|
|
107
|
+
* }
|
|
108
|
+
* ```
|
|
109
|
+
* @example_vue
|
|
110
|
+
* ```html
|
|
111
|
+
* <template>
|
|
112
|
+
* <view class="container">
|
|
113
|
+
* <editor id="editor" class="editor" :placeholder="placeholder" `@ready="editorReady"></editor>
|
|
114
|
+
* <button type="warn" `@tap="undo">撤销</button>
|
|
115
|
+
* </view>
|
|
116
|
+
* </template>
|
|
117
|
+
*
|
|
118
|
+
* <script>
|
|
119
|
+
* import Taro from '@tarojs/taro'
|
|
120
|
+
* export default {
|
|
121
|
+
* data() {
|
|
122
|
+
* return {
|
|
123
|
+
* placeholder: '来,输入隔壁的名字试试...'
|
|
124
|
+
* }
|
|
125
|
+
* },
|
|
126
|
+
* methods: {
|
|
127
|
+
* editorReady() {
|
|
128
|
+
* Taro.createSelectorQuery().select('#editor').context((res) => {
|
|
129
|
+
* this.editorCtx = res.context
|
|
130
|
+
* }).exec()
|
|
131
|
+
* },
|
|
132
|
+
* undo() {
|
|
133
|
+
* this.editorCtx.undo()
|
|
134
|
+
* }
|
|
135
|
+
* }
|
|
136
|
+
* }
|
|
137
|
+
* </script>
|
|
138
|
+
* ```
|
|
82
139
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
|
|
83
140
|
*/
|
|
84
141
|
declare const Editor: ComponentType<EditorProps>
|
package/types/Form.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ interface FormProps extends StandardProps {
|
|
|
20
20
|
|
|
21
21
|
/** 携带 form 中的数据触发 submit 事件
|
|
22
22
|
* event.detail = { value : {'name': 'value'} , formId: '' }
|
|
23
|
-
* @supported weapp
|
|
23
|
+
* @supported weapp, rn
|
|
24
24
|
*/
|
|
25
25
|
onSubmit?: CommonEventFunction<FormProps.onSubmitEventDetail>
|
|
26
26
|
|
|
@@ -50,7 +50,7 @@ declare namespace FormProps {
|
|
|
50
50
|
* 当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
|
|
51
51
|
* @classification forms
|
|
52
52
|
* @supported weapp, h5, rn
|
|
53
|
-
* @
|
|
53
|
+
* @example_react
|
|
54
54
|
* ```tsx
|
|
55
55
|
* class App extends Component {
|
|
56
56
|
*
|
|
@@ -73,6 +73,37 @@ declare namespace FormProps {
|
|
|
73
73
|
* }
|
|
74
74
|
* }
|
|
75
75
|
* ```
|
|
76
|
+
* @example_vue
|
|
77
|
+
* ```html
|
|
78
|
+
* <template>
|
|
79
|
+
* <form `@submit="formSubmit" `@reset="formReset" >
|
|
80
|
+
* <view class="taro-example-body">
|
|
81
|
+
* <switch name="switch" class="form-switch"></Switch>
|
|
82
|
+
* </view>
|
|
83
|
+
* <view class="taro-example-btns">
|
|
84
|
+
* <button form-type="submit">Submit</button>
|
|
85
|
+
* <button type="default" form-type="reset">Reset</button>
|
|
86
|
+
* </view>
|
|
87
|
+
* </form>
|
|
88
|
+
* </template>
|
|
89
|
+
*
|
|
90
|
+
* <script>
|
|
91
|
+
* export default {
|
|
92
|
+
* data() {
|
|
93
|
+
* return {}
|
|
94
|
+
* },
|
|
95
|
+
* methods: {
|
|
96
|
+
* formSubmit (e) {
|
|
97
|
+
* console.log(e)
|
|
98
|
+
* },
|
|
99
|
+
*
|
|
100
|
+
* formReset (e) {
|
|
101
|
+
* console.log(e)
|
|
102
|
+
* }
|
|
103
|
+
* }
|
|
104
|
+
* }
|
|
105
|
+
* </script>
|
|
106
|
+
* ```
|
|
76
107
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/form.html
|
|
77
108
|
*/
|
|
78
109
|
declare const Form: ComponentType<FormProps>
|
|
@@ -6,12 +6,12 @@ interface FunctionalPageNavigatorProps extends StandardProps {
|
|
|
6
6
|
* @default "release"
|
|
7
7
|
* @supported weapp
|
|
8
8
|
*/
|
|
9
|
-
version?: keyof FunctionalPageNavigatorProps.
|
|
9
|
+
version?: keyof FunctionalPageNavigatorProps.Version
|
|
10
10
|
|
|
11
11
|
/** 要跳转到的功能页
|
|
12
12
|
* @supported weapp
|
|
13
13
|
*/
|
|
14
|
-
name?: keyof FunctionalPageNavigatorProps.
|
|
14
|
+
name?: keyof FunctionalPageNavigatorProps.Name
|
|
15
15
|
|
|
16
16
|
/** 功能页参数,参数格式与具体功能页相关
|
|
17
17
|
* @supported weapp
|
|
@@ -36,7 +36,7 @@ interface FunctionalPageNavigatorProps extends StandardProps {
|
|
|
36
36
|
|
|
37
37
|
declare namespace FunctionalPageNavigatorProps {
|
|
38
38
|
/** version 的合法值 */
|
|
39
|
-
interface
|
|
39
|
+
interface Version {
|
|
40
40
|
/** 开发版 */
|
|
41
41
|
develop
|
|
42
42
|
/** 体验版 */
|
|
@@ -45,7 +45,7 @@ declare namespace FunctionalPageNavigatorProps {
|
|
|
45
45
|
release
|
|
46
46
|
}
|
|
47
47
|
/** name 的合法值 */
|
|
48
|
-
interface
|
|
48
|
+
interface Name {
|
|
49
49
|
/** [用户信息功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/user-info.html) */
|
|
50
50
|
loginAndGetUserInfo
|
|
51
51
|
/** [支付功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html) */
|
package/types/Icon.d.ts
CHANGED
|
@@ -50,7 +50,7 @@ declare namespace IconProps {
|
|
|
50
50
|
/** 图标。组件属性的长度单位默认为 px
|
|
51
51
|
* @classification base
|
|
52
52
|
* @supported weapp, swan, alipay, tt, h5, rn
|
|
53
|
-
* @
|
|
53
|
+
* @example_react
|
|
54
54
|
* ```tsx
|
|
55
55
|
* export default class PageView extends Component {
|
|
56
56
|
* constructor() {
|
|
@@ -76,6 +76,22 @@ declare namespace IconProps {
|
|
|
76
76
|
* }
|
|
77
77
|
* }
|
|
78
78
|
* ```
|
|
79
|
+
* @example_vue
|
|
80
|
+
* <template>
|
|
81
|
+
* <view class="components-page">
|
|
82
|
+
* <icon size="60" type="success" />
|
|
83
|
+
* <icon size="60" type="info" />
|
|
84
|
+
* <icon size="60" type="warn" color="#ccc" />
|
|
85
|
+
* <icon size="60" type="warn" />
|
|
86
|
+
* <icon size="60" type="waiting" />
|
|
87
|
+
* <icon size="20" type="success_no_circle" />
|
|
88
|
+
* <icon size="20" type="warn" />
|
|
89
|
+
* <icon size="20" type="success" />
|
|
90
|
+
* <icon size="20" type="download" />
|
|
91
|
+
* <icon size="20" type="clear" color="red" />
|
|
92
|
+
* <icon size="20" type="search" />
|
|
93
|
+
* </view>
|
|
94
|
+
* </template>
|
|
79
95
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
|
|
80
96
|
*/
|
|
81
97
|
declare const Icon: ComponentType<IconProps>
|
package/types/Image.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ interface ImageProps extends StandardProps {
|
|
|
12
12
|
* @supported weapp, h5, rn, swan, alipay, tt
|
|
13
13
|
* @rn 部分支持 scaleToFill, aspectFit, aspectFill, widthFix
|
|
14
14
|
*/
|
|
15
|
-
mode?: keyof ImageProps.
|
|
15
|
+
mode?: keyof ImageProps.Mode
|
|
16
16
|
|
|
17
17
|
/** 默认不解析 webP 格式,只支持网络资源
|
|
18
18
|
* @default false
|
|
@@ -28,7 +28,7 @@ interface ImageProps extends StandardProps {
|
|
|
28
28
|
|
|
29
29
|
/** 图片懒加载。只针对 page 与 scroll-view 下的 image 有效
|
|
30
30
|
* @default false
|
|
31
|
-
* @supported weapp, swan, alipay, tt
|
|
31
|
+
* @supported weapp, swan, alipay, tt, h5
|
|
32
32
|
*/
|
|
33
33
|
lazyLoad?: boolean
|
|
34
34
|
|
|
@@ -53,11 +53,16 @@ interface ImageProps extends StandardProps {
|
|
|
53
53
|
* @supported h5
|
|
54
54
|
*/
|
|
55
55
|
imgProps?: ImgHTMLAttributes<HTMLImageElement>
|
|
56
|
+
|
|
57
|
+
/** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
|
|
58
|
+
* @supported h5
|
|
59
|
+
*/
|
|
60
|
+
nativeProps?: Record<string, unknown>
|
|
56
61
|
}
|
|
57
62
|
|
|
58
63
|
declare namespace ImageProps {
|
|
59
64
|
/** mode 的合法值 */
|
|
60
|
-
interface
|
|
65
|
+
interface Mode {
|
|
61
66
|
/** 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 */
|
|
62
67
|
scaleToFill
|
|
63
68
|
/** 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 */
|
|
@@ -104,7 +109,7 @@ declare namespace ImageProps {
|
|
|
104
109
|
* **Note:** 为实现小程序的 `mode` 特性,在 H5 组件中使用一个 `div` 容器来对内部的 `img` 进行展示区域的裁剪,因此请勿使用元素选择器来重置 `img` 的样式!
|
|
105
110
|
* @classification media
|
|
106
111
|
* @supported weapp, h5, rn, swan, alipay, tt
|
|
107
|
-
* @
|
|
112
|
+
* @example_react
|
|
108
113
|
* ```tsx
|
|
109
114
|
* export default class PageView extends Component {
|
|
110
115
|
* constructor() {
|
|
@@ -127,6 +132,21 @@ declare namespace ImageProps {
|
|
|
127
132
|
* }
|
|
128
133
|
* }
|
|
129
134
|
* ```
|
|
135
|
+
* @example_vue
|
|
136
|
+
* ```html
|
|
137
|
+
* <template>
|
|
138
|
+
* <view class="components-page">
|
|
139
|
+
* <image
|
|
140
|
+
* style="width: 300px;height: 100px;background: #fff;"
|
|
141
|
+
* src="nerv_logo.png"
|
|
142
|
+
* />
|
|
143
|
+
* <image
|
|
144
|
+
* style="width: 300px;height: 100px;background: #fff;"
|
|
145
|
+
* src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67"
|
|
146
|
+
* />
|
|
147
|
+
* </view>
|
|
148
|
+
* </template>
|
|
149
|
+
* ```
|
|
130
150
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/image.html
|
|
131
151
|
*/
|
|
132
152
|
declare const Image: ComponentType<ImageProps>
|
package/types/Input.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ interface InputProps extends StandardProps, FormItemProps {
|
|
|
12
12
|
* @supported weapp, h5, rn
|
|
13
13
|
* @rn 部分支持
|
|
14
14
|
*/
|
|
15
|
-
type?: 'text' | 'number' | 'idcard' | 'digit'
|
|
15
|
+
type?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'nickname'
|
|
16
16
|
|
|
17
17
|
/** 是否是密码类型
|
|
18
18
|
* @supported weapp, h5, rn
|
|
@@ -63,7 +63,6 @@ interface InputProps extends StandardProps, FormItemProps {
|
|
|
63
63
|
*/
|
|
64
64
|
focus?: boolean
|
|
65
65
|
|
|
66
|
-
|
|
67
66
|
/** 设置键盘右下角按钮的文字
|
|
68
67
|
* @default done
|
|
69
68
|
* @supported weapp, rn
|
|
@@ -112,6 +111,41 @@ interface InputProps extends StandardProps, FormItemProps {
|
|
|
112
111
|
*/
|
|
113
112
|
alwaysEmbed?: boolean
|
|
114
113
|
|
|
114
|
+
/**
|
|
115
|
+
* 安全键盘加密公钥的路径,只支持包内路径
|
|
116
|
+
* @supported weapp
|
|
117
|
+
*/
|
|
118
|
+
safePasswordCertPath?: string
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* 安全键盘输入密码长度
|
|
122
|
+
* @supported weapp
|
|
123
|
+
*/
|
|
124
|
+
safePasswordLength?: number
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* 安全键盘加密时间戳
|
|
128
|
+
* @supported weapp
|
|
129
|
+
*/
|
|
130
|
+
safePasswordTimeStamp?: number
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* 安全键盘加密盐值
|
|
134
|
+
* @supported weapp
|
|
135
|
+
*/
|
|
136
|
+
safePasswordNonce?: string
|
|
137
|
+
/**
|
|
138
|
+
* 安全键盘计算hash盐值,若指定custom-hash 则无效
|
|
139
|
+
* @supported weapp
|
|
140
|
+
*/
|
|
141
|
+
safePasswordSalt?: string
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* 安全键盘计算hash的算法表达式,如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))`
|
|
145
|
+
* @supported weapp
|
|
146
|
+
*/
|
|
147
|
+
safePasswordCustomHash?: string
|
|
148
|
+
|
|
115
149
|
/**
|
|
116
150
|
* 当 type 为 number, digit, idcard 数字键盘是否随机排列
|
|
117
151
|
* @default false
|
|
@@ -147,7 +181,7 @@ interface InputProps extends StandardProps, FormItemProps {
|
|
|
147
181
|
*
|
|
148
182
|
* event.detail = {value: value}
|
|
149
183
|
* @supported weapp, rn
|
|
150
|
-
* @h5 借用[Form 组件](form
|
|
184
|
+
* @h5 借用[Form 组件](./form)的`onSubmit`事件来替代
|
|
151
185
|
*/
|
|
152
186
|
onConfirm?: CommonEventFunction<InputProps.inputValueEventDetail>
|
|
153
187
|
|
|
@@ -157,9 +191,15 @@ interface InputProps extends StandardProps, FormItemProps {
|
|
|
157
191
|
* @supported weapp
|
|
158
192
|
*/
|
|
159
193
|
onKeyboardHeightChange?: CommonEventFunction<InputProps.onKeyboardHeightChangeEventDetail>
|
|
194
|
+
|
|
195
|
+
/** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
|
|
196
|
+
* @supported h5
|
|
197
|
+
*/
|
|
198
|
+
nativeProps?: Record<string, unknown>
|
|
160
199
|
}
|
|
161
200
|
|
|
162
201
|
declare namespace InputProps {
|
|
202
|
+
/** > 注意:React-Native 端 `inputEventDetail` 仅实现参数 `value`,若需实时获取光标位置则可通过 [`onSelectionChange`](https://reactnative.dev/docs/textinput#onselectionchange) 实现。 */
|
|
163
203
|
interface inputEventDetail {
|
|
164
204
|
/** 输入值 */
|
|
165
205
|
value: string
|
|
@@ -190,7 +230,7 @@ declare namespace InputProps {
|
|
|
190
230
|
/** 输入框。该组件是原生组件,使用时请注意相关限制
|
|
191
231
|
* @classification forms
|
|
192
232
|
* @supported weapp, h5, rn
|
|
193
|
-
* @
|
|
233
|
+
* @example_react
|
|
194
234
|
* ```tsx
|
|
195
235
|
* class App extends Component {
|
|
196
236
|
*
|
|
@@ -204,7 +244,7 @@ declare namespace InputProps {
|
|
|
204
244
|
* <Text>数字输入的 input</Text>
|
|
205
245
|
* <Input type='number' placeholder='这是一个数字输入框'/>
|
|
206
246
|
* <Text>密码输入的 input</Text>
|
|
207
|
-
* <Input type='
|
|
247
|
+
* <Input type='password' password placeholder='这是一个密码输入框'/>
|
|
208
248
|
* <Text>带小数点的 input</Text>
|
|
209
249
|
* <Input type='digit' placeholder='带小数点的数字键盘'/>
|
|
210
250
|
* <Text>身份证输入的 input</Text>
|
|
@@ -216,6 +256,27 @@ declare namespace InputProps {
|
|
|
216
256
|
* }
|
|
217
257
|
* }
|
|
218
258
|
* ```
|
|
259
|
+
* @example_vue
|
|
260
|
+
* ```html
|
|
261
|
+
* <template>
|
|
262
|
+
* <view class="example-body">
|
|
263
|
+
* <text>可以自动聚焦的 input</text>
|
|
264
|
+
* <input type="text" placeholder="将会获取焦点" :focus="true" />
|
|
265
|
+
* <text>控制最大输入长度的 input</text>
|
|
266
|
+
* <input type="text" placeholder="最大输入长度为 10" maxlength="10"/>
|
|
267
|
+
* <text>数字输入的 input</text>
|
|
268
|
+
* <input type="number" placeholder="这是一个数字输入框"/>
|
|
269
|
+
* <text>密码输入的 input</text>
|
|
270
|
+
* <input type="password" :password="true" placeholder="这是一个密码输入框"/>
|
|
271
|
+
* <text>带小数点的 input</text>
|
|
272
|
+
* <input type="digit" placeholder="带小数点的数字键盘"/>
|
|
273
|
+
* <text>身份证输入的 input</text>
|
|
274
|
+
* <input type="idcard" placeholder="身份证输入键盘"/>
|
|
275
|
+
* <text>控制占位符颜色的 input</text>
|
|
276
|
+
* <input type="text" placeholder="占位符字体是红色的" placeholder-style="color:red;"/>
|
|
277
|
+
* </view>
|
|
278
|
+
* </template>
|
|
279
|
+
* ```
|
|
219
280
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/input.html
|
|
220
281
|
*/
|
|
221
282
|
declare const Input: ComponentType<InputProps>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentType } from 'react'
|
|
2
|
-
import { StandardProps
|
|
2
|
+
import { StandardProps } from './common'
|
|
3
3
|
|
|
4
|
+
/** @ignore */
|
|
4
5
|
type KeyboardAccessoryProps = StandardProps
|
|
5
6
|
|
|
6
7
|
/** 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
|
package/types/Label.d.ts
CHANGED
|
@@ -3,8 +3,7 @@ import { StandardProps } from './common'
|
|
|
3
3
|
|
|
4
4
|
interface LabelProps extends StandardProps {
|
|
5
5
|
|
|
6
|
-
/** 绑定控件的 id
|
|
7
|
-
*/
|
|
6
|
+
/** 绑定控件的 id */
|
|
8
7
|
for?: string
|
|
9
8
|
}
|
|
10
9
|
|
|
@@ -12,8 +11,8 @@ interface LabelProps extends StandardProps {
|
|
|
12
11
|
*
|
|
13
12
|
* 使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有:button, checkbox, radio, switch。
|
|
14
13
|
* @classification forms
|
|
15
|
-
* @supported weapp, swan, alipay, tt, h5
|
|
16
|
-
* @
|
|
14
|
+
* @supported weapp, swan, alipay, tt, h5, rn
|
|
15
|
+
* @example_react
|
|
17
16
|
* ```tsx
|
|
18
17
|
* class App extends Components {
|
|
19
18
|
*
|
|
@@ -33,6 +32,21 @@ interface LabelProps extends StandardProps {
|
|
|
33
32
|
* }
|
|
34
33
|
* }
|
|
35
34
|
* ```
|
|
35
|
+
* @example_vue
|
|
36
|
+
* ```html
|
|
37
|
+
* <template>
|
|
38
|
+
* <radio-group>
|
|
39
|
+
* <label class="example-body__label" for="1" key="1">
|
|
40
|
+
* <radio id="1" value="USA" />
|
|
41
|
+
* USA
|
|
42
|
+
* </label>
|
|
43
|
+
* <label class="example-body__label" for="2" key="2">
|
|
44
|
+
* <radio id="2" value="CHN" :checked="true" />
|
|
45
|
+
* CHN
|
|
46
|
+
* </label>
|
|
47
|
+
* </radio-group>
|
|
48
|
+
* </template>
|
|
49
|
+
* ```
|
|
36
50
|
* @see https://developers.weixin.qq.com/miniprogram/dev/component/label.html
|
|
37
51
|
*/
|
|
38
52
|
declare const Label: ComponentType<LabelProps>
|