@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.
Files changed (96) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/taro-components.cjs.js +1 -1
  3. package/dist/cjs/taro-input-core.cjs.entry.js +26 -18
  4. package/dist/cjs/taro-pull-to-refresh.cjs.entry.js +12 -3
  5. package/dist/cjs/taro-scroll-view-core.cjs.entry.js +3 -3
  6. package/dist/cjs/taro-tabbar.cjs.entry.js +3 -2
  7. package/dist/cjs/taro-textarea-core.cjs.entry.js +3 -3
  8. package/dist/collection/components/input/input.js +41 -24
  9. package/dist/collection/components/pull-to-refresh/pull-to-refresh.js +11 -2
  10. package/dist/collection/components/pull-to-refresh/style/index.css +1 -0
  11. package/dist/collection/components/scroll-view/scroll-view.js +3 -3
  12. package/dist/collection/components/tabbar/style/index.css +1 -1
  13. package/dist/collection/components/tabbar/tabbar.js +2 -1
  14. package/dist/collection/components/textarea/textarea.js +3 -3
  15. package/dist/esm/loader.js +1 -1
  16. package/dist/esm/taro-components.js +1 -1
  17. package/dist/esm/taro-input-core.entry.js +26 -18
  18. package/dist/esm/taro-pull-to-refresh.entry.js +12 -3
  19. package/dist/esm/taro-scroll-view-core.entry.js +3 -3
  20. package/dist/esm/taro-tabbar.entry.js +3 -2
  21. package/dist/esm/taro-textarea-core.entry.js +3 -3
  22. package/dist/esm-es5/loader.js +1 -1
  23. package/dist/esm-es5/taro-components.js +1 -1
  24. package/dist/esm-es5/taro-input-core.entry.js +1 -1
  25. package/dist/esm-es5/taro-pull-to-refresh.entry.js +1 -1
  26. package/dist/esm-es5/taro-scroll-view-core.entry.js +1 -1
  27. package/dist/esm-es5/taro-tabbar.entry.js +1 -1
  28. package/dist/esm-es5/taro-textarea-core.entry.js +1 -1
  29. package/dist/taro-components/p-19c46f62.system.entry.js +1 -0
  30. package/dist/taro-components/p-2b0d5c90.system.entry.js +1 -0
  31. package/dist/taro-components/{p-627a5064.system.entry.js → p-2dc57c71.system.entry.js} +1 -1
  32. package/dist/taro-components/p-33ee636a.system.js +1 -1
  33. package/dist/taro-components/p-4e54216b.entry.js +1 -0
  34. package/dist/taro-components/{p-12ae0a33.entry.js → p-63ff7fa7.entry.js} +1 -1
  35. package/dist/taro-components/p-71e14298.entry.js +1 -0
  36. package/dist/taro-components/p-8486c251.system.entry.js +1 -0
  37. package/dist/taro-components/{p-dd34408a.entry.js → p-a345ba40.entry.js} +1 -1
  38. package/dist/taro-components/{p-6965567d.entry.js → p-cc818a13.entry.js} +1 -1
  39. package/dist/taro-components/{p-13c1404f.system.entry.js → p-fd0d1168.system.entry.js} +1 -1
  40. package/dist/taro-components/taro-components.css +1 -1
  41. package/dist/taro-components/taro-components.esm.js +1 -1
  42. package/dist/types/components/input/input.d.ts +3 -3
  43. package/dist/types/components/textarea/textarea.d.ts +1 -1
  44. package/dist/types/components.d.ts +1 -0
  45. package/dist-h5/vue/components/picker.js +2 -1
  46. package/package.json +3 -3
  47. package/types/Ad.d.ts +22 -10
  48. package/types/Audio.d.ts +25 -5
  49. package/types/Button.d.ts +96 -23
  50. package/types/Camera.d.ts +11 -11
  51. package/types/Canvas.d.ts +14 -1
  52. package/types/Checkbox.d.ts +65 -1
  53. package/types/CoverImage.d.ts +48 -6
  54. package/types/CoverView.d.ts +51 -8
  55. package/types/Editor.d.ts +57 -0
  56. package/types/Form.d.ts +33 -2
  57. package/types/FunctionalPageNavigator.d.ts +4 -4
  58. package/types/Icon.d.ts +17 -1
  59. package/types/Image.d.ts +24 -4
  60. package/types/Input.d.ts +66 -5
  61. package/types/KeyboardAccessory.d.ts +2 -1
  62. package/types/Label.d.ts +18 -4
  63. package/types/LivePlayer.d.ts +15 -9
  64. package/types/LivePusher.d.ts +21 -15
  65. package/types/Map.d.ts +59 -5
  66. package/types/MatchMedia.d.ts +24 -5
  67. package/types/MovableArea.d.ts +9 -3
  68. package/types/MovableView.d.ts +20 -6
  69. package/types/Navigator.d.ts +7 -7
  70. package/types/OfficialAccount.d.ts +4 -10
  71. package/types/OpenData.d.ts +11 -5
  72. package/types/PageContainer.d.ts +8 -2
  73. package/types/Picker.d.ts +64 -1
  74. package/types/PickerView.d.ts +66 -2
  75. package/types/PickerViewColumn.d.ts +1 -1
  76. package/types/Progress.d.ts +12 -1
  77. package/types/Radio.d.ts +77 -1
  78. package/types/RichText.d.ts +33 -1
  79. package/types/ScrollView.d.ts +91 -9
  80. package/types/ShareElement.d.ts +1 -1
  81. package/types/Slider.d.ts +14 -1
  82. package/types/Swiper.d.ts +26 -1
  83. package/types/SwiperItem.d.ts +28 -3
  84. package/types/Switch.d.ts +21 -3
  85. package/types/Text.d.ts +38 -1
  86. package/types/Textarea.d.ts +17 -1
  87. package/types/Video.d.ts +50 -30
  88. package/types/View.d.ts +33 -1
  89. package/types/VoipRoom.d.ts +10 -11
  90. package/types/WebView.d.ts +7 -1
  91. package/types/common.d.ts +1 -1
  92. package/dist/taro-components/p-04818461.system.entry.js +0 -1
  93. package/dist/taro-components/p-12638ebc.system.entry.js +0 -1
  94. package/dist/taro-components/p-56618f09.entry.js +0 -1
  95. package/dist/taro-components/p-66237ac0.entry.js +0 -1
  96. package/dist/taro-components/p-665e8461.system.entry.js +0 -1
@@ -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
- * @example
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>
@@ -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
- * @example
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={() => { TODO }}>
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
  */
@@ -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
- * @example
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
- * <Video id='myVideo' src='src'>
31
- * <CoverView className='controls'>
32
- * <CoverView className='play' onClick={() => { TODO }}>
33
- * <CoverImage className='img' src='src' />
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
- * </CoverView>
36
- * </Video>
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
- * @example
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.version
9
+ version?: keyof FunctionalPageNavigatorProps.Version
10
10
 
11
11
  /** 要跳转到的功能页
12
12
  * @supported weapp
13
13
  */
14
- name?: keyof FunctionalPageNavigatorProps.name
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 version {
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 name {
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
- * @example
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.mode
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 mode {
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
- * @example
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.html)的`onSubmit`事件来替代
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
- * @example
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='text' password placeholder='这是一个密码输入框'/>
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, CommonEventFunction } from './common'
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
- * @example
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>