1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction } from './common'
|
3 | import { StyleProp, ViewStyle } from 'react-native'
|
4 | interface ButtonProps extends StandardProps {
|
5 | /** 按钮的大小
|
6 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
7 | * @default default
|
8 | */
|
9 | size?: keyof ButtonProps.Size
|
10 |
|
11 | /** 按钮的样式类型
|
12 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
13 | * @default default
|
14 | */
|
15 | type?: keyof ButtonProps.Type
|
16 |
|
17 | /** 按钮是否镂空,背景色透明
|
18 | * @supported weapp, alipay, swan, qq, jd, h5, rn
|
19 | * @default false
|
20 | */
|
21 | plain?: boolean
|
22 |
|
23 | /** 是否禁用
|
24 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
25 | * @default false
|
26 | */
|
27 | disabled?: boolean
|
28 |
|
29 | /** 名称前是否带 loading 图标
|
30 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
31 | * @default false
|
32 | */
|
33 | loading?: boolean
|
34 |
|
35 | /** 用于 `<form/>` 组件,点击分别会触发 `<form/>` 组件的 submit/reset 事件
|
36 | * @supported weapp, alipay, swan, tt, qq, jd
|
37 | */
|
38 | formType?: keyof ButtonProps.FormType
|
39 |
|
40 | /** 微信开放能力
|
41 | * @supported weapp, alipay, swan, tt, qq, jd
|
42 | */
|
43 | openType?: ButtonProps.OpenType
|
44 |
|
45 | /** 指定按下去的样式类。当 `hover-class="none"` 时,没有点击态效果
|
46 | * @default button-hover
|
47 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
48 | * @rn 支持 hoverStyle 属性,但框架未支持 hoverClass
|
49 | */
|
50 | hoverClass?: string
|
51 |
|
52 | /** 由于 RN 不支持 hoverClass,故 RN 端的 Button 组件实现了 `hoverStyle`属性,写法和 style 类似,只不过 `hoverStyle` 的样式是指定按下去的样式。
|
53 | * @default none
|
54 | * @supported rn
|
55 | */
|
56 | hoverStyle?: StyleProp<ViewStyle>
|
57 |
|
58 | /** 指定是否阻止本节点的祖先节点出现点击态
|
59 | * @default false
|
60 | * @supported weapp, alipay, swan, tt, qq, jd
|
61 | */
|
62 | hoverStopPropagation?: boolean
|
63 |
|
64 | /** 按住后多久出现点击态,单位毫秒
|
65 | * @default 20
|
66 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
67 | */
|
68 | hoverStartTime?: number
|
69 |
|
70 | /** 手指松开后点击态保留时间,单位毫秒
|
71 | * @default 70
|
72 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
73 | */
|
74 | hoverStayTime?: number
|
75 |
|
76 | /** 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。
|
77 | *
|
78 | * 生效时机: `open-type="getUserInfo"`
|
79 | * @supported weapp, qq, jd
|
80 | */
|
81 | lang?: keyof ButtonProps.Lang
|
82 |
|
83 | /** 会话来源
|
84 | *
|
85 | * 生效时机:`open-type="contact"`
|
86 | * @supported weapp
|
87 | */
|
88 | sessionFrom?: string
|
89 |
|
90 | /** 会话内消息卡片标题
|
91 | *
|
92 | * 生效时机:`open-type="contact"`
|
93 | * @default 当前标题
|
94 | * @supported weapp
|
95 | */
|
96 | sendMessageTitle?: string
|
97 |
|
98 | /** 会话内消息卡片点击跳转小程序路径
|
99 | *
|
100 | * 生效时机:`open-type="contact"`
|
101 | * @default 当前标题
|
102 | * @supported weapp
|
103 | */
|
104 | sendMessagePath?: string
|
105 |
|
106 | /** 会话内消息卡片图片
|
107 | *
|
108 | * 生效时机:`open-type="contact"`
|
109 | * @default 截图
|
110 | * @supported weapp
|
111 | */
|
112 | sendMessageImg?: string
|
113 |
|
114 | /** 打开 APP 时,向 APP 传递的参数
|
115 | *
|
116 | * 生效时机:`open-type="launchApp"`
|
117 | * @supported weapp, qq, jd
|
118 | */
|
119 | appParameter?: string
|
120 |
|
121 | /** 支付宝小程序 scope
|
122 | *
|
123 | * 生效时机:`open-type="getAuthorize"`
|
124 | * @supported alipay
|
125 | */
|
126 | scope?: 'userInfo' | 'phoneNumber'
|
127 |
|
128 | /** 显示会话内消息卡片
|
129 | *
|
130 | * 生效时机:`open-type="contact"`
|
131 | * @default false
|
132 | */
|
133 | showMessageCard?: boolean
|
134 |
|
135 | /** 生活号 id,必须是当前小程序同主体且已关联的生活号,open-type="lifestyle" 时有效。
|
136 | * @supported alipay, qq
|
137 | */
|
138 | publicId?: string
|
139 |
|
140 | /** 发送订阅类模板消息所用的模板库标题 ID ,可通过 getTemplateLibraryList 获取
|
141 | * 当参数类型为 Array 时,可传递 1~3 个模板库标题 ID
|
142 | * @supported swan
|
143 | */
|
144 | templateId?: string | Array<string>
|
145 |
|
146 | /** 发送订阅类模板消息时所使用的唯一标识符,内容由开发者自定义,用来标识订阅场景
|
147 | * 注意:同一用户在同一 subscribe-id 下的多次授权不累积下发权限,只能下发一条。若要订阅多条,需要不同 subscribe-id
|
148 | * @supported swan
|
149 | */
|
150 | subscribeId?: string
|
151 |
|
152 | /** 打开群资料卡时,传递的群号
|
153 | * @supported qq
|
154 | */
|
155 | groupId?: string
|
156 |
|
157 | /** 打开频道页面时,传递的频道号
|
158 | * @supported qq
|
159 | */
|
160 | guildId?: string
|
161 |
|
162 | /** 分享类型集合,请参考下面share-type有效值说明。share-type后续将不再维护,请更新为share-mode
|
163 | * @supported qq
|
164 | * @default 27
|
165 | */
|
166 | shareType?: string
|
167 |
|
168 | /** 分享类型集合,请参考下面share-mode有效值说明
|
169 | * @supported qq
|
170 | * @default ['qq', 'qzone']
|
171 | */
|
172 | shareMode?: string
|
173 |
|
174 | /** 无障碍访问,(属性)元素的额外描述
|
175 | * @supported qq
|
176 | */
|
177 | ariaLabel?: string
|
178 |
|
179 | /** 添加好友时,对方的 openid
|
180 | * @supported qq
|
181 | */
|
182 | openId?: string
|
183 |
|
184 | /** 发送对象的 FriendInfo
|
185 | * @supported qq
|
186 | */
|
187 | shareMessageFriendInfo?: string
|
188 |
|
189 | /** 转发标题,不传则默认使用当前小程序的昵称。 FriendInfo
|
190 | * @supported qq
|
191 | */
|
192 | shareMessageTitle?: string
|
193 |
|
194 | /** 转发显示图片的链接,可以是网络图片路径(仅 QQ CDN 域名路径)或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4FriendInfo
|
195 | * @supported qq
|
196 | */
|
197 | shareMessageImg?: string
|
198 |
|
199 | /** 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 Taro.getUserInfo 返回的一致
|
200 | *
|
201 | * 生效时机: `open-type="getUserInfo"`
|
202 | * @supported weapp, alipay, swan, qq, jd
|
203 | */
|
204 | onGetUserInfo?: CommonEventFunction<ButtonProps.onGetUserInfoEventDetail>
|
205 |
|
206 | /** 支付宝获取会员基础信息授权回调
|
207 | *
|
208 | * 生效时机:`open-type="getAuthorize"`
|
209 | * @supported alipay
|
210 | */
|
211 | onGetAuthorize?: CommonEventFunction
|
212 |
|
213 | /** 客服消息回调
|
214 | *
|
215 | * 生效时机:`open-type="contact"`
|
216 | * @supported weapp, swan, qq
|
217 | */
|
218 | onContact?: CommonEventFunction<ButtonProps.onContactEventDetail>
|
219 |
|
220 | /** 获取用户手机号回调
|
221 | *
|
222 | * 生效时机:`open-type="getphonenumber"`
|
223 | * @supported weapp, alipay, swan, tt, jd
|
224 | */
|
225 | onGetPhoneNumber?: CommonEventFunction<ButtonProps.onGetPhoneNumberEventDetail>
|
226 |
|
227 | /** 当使用开放能力时,发生错误的回调
|
228 | *
|
229 | * 生效时机:`open-type="launchApp"`
|
230 | * @supported weapp, alipay, qq, jd
|
231 | */
|
232 | onError?: CommonEventFunction
|
233 |
|
234 | /** 在打开授权设置页后回调
|
235 | *
|
236 | * 生效时机:`open-type="openSetting"`
|
237 | * @supported weapp, swan, qq, jd
|
238 | */
|
239 | onOpenSetting?: CommonEventFunction<ButtonProps.onOpenSettingEventDetail>
|
240 |
|
241 | /** 打开 APP 成功的回调
|
242 | *
|
243 | * 生效时机:`open-type="launchApp"`
|
244 | * @supported weapp, qq
|
245 | */
|
246 | onLaunchApp?: CommonEventFunction
|
247 |
|
248 | /** 获取用户头像回调
|
249 | *
|
250 | * 生效时机:`open-type="chooseAvatar"`
|
251 | * @supported weapp
|
252 | */
|
253 | onChooseAvatar?: CommonEventFunction
|
254 |
|
255 | /** 点击。
|
256 | * 说明: 每点击一次会触发一次事件,建议自行使用代码防止重复点击,可以使用 js 防抖和节流实现。
|
257 | * @supported alipay
|
258 | */
|
259 | onTap?: CommonEventFunction
|
260 |
|
261 | /** 当 open-type 为 lifestyle 时有效。
|
262 | * 当点击按钮时触发。
|
263 | * event.detail = { followStatus },followStatus 合法值有 1、2、3,其中 1 表示已关注。2 表示用户不允许关注。3 表示发生未知错误;
|
264 | * 已知问题:基础库 1.0,当用户在点击按钮前已关注生活号,event.detail.followStatus 的值为 true。
|
265 | * @supported alipay
|
266 | */
|
267 | onFollowLifestyle?: CommonEventFunction<{
|
268 | followStatus: 1 | 2 | 3 | true
|
269 | }>
|
270 |
|
271 | /** 用户点击该按钮时,调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址,从返回参数的 detail 中获取,和 swan.chooseAddress 一样的。和 open-type 搭配使用,使用时机:open-type="chooseAddress"
|
272 | * @supported swan
|
273 | */
|
274 | onChooseAddress?: CommonEventFunction
|
275 |
|
276 | /** 用户点击该按钮时,选择用户的发票抬头,和 swan.chooseInvoiceTitle 一样的。和 open-type 搭配使用,使用时机:open-type="chooseInvoiceTitle"
|
277 | * @supported swan
|
278 | */
|
279 | onChooseInvoiceTitle?: CommonEventFunction
|
280 |
|
281 | /** 登录回调,和 open-type 搭配使用,使用时机:open-type="login"。可以通过返回参数的 detail 判断是否登录成功,当 errMsg 为'login:ok'时即为成功。如想获取登录凭证请使用 swan.getLoginCode
|
282 | * @supported swan
|
283 | */
|
284 | onLogin?: CommonEventFunction
|
285 |
|
286 | /** 订阅消息授权回调,和 open-type 搭配使用,使用时机:open-type="subscribe"
|
287 | * @supported swan
|
288 | */
|
289 | onSubscribe?: CommonEventFunction
|
290 |
|
291 | /** 添加好友的回调
|
292 | * @supported qq
|
293 | */
|
294 | onAddFriend?: CommonEventFunction
|
295 |
|
296 | /** 添加群应用的回调。errCode 错误码:41004(当前用户非管理员或群主,无权操作),41005(超过可添加群应用的群数量)
|
297 | * @supported qq
|
298 | */
|
299 | onAddGroupApp?: CommonEventFunction
|
300 | }
|
301 | declare namespace ButtonProps {
|
302 | /** size 的合法值 */
|
303 | interface Size {
|
304 | /** 默认大小 */
|
305 | default
|
306 |
|
307 | /** 小尺寸 */
|
308 | mini
|
309 | }
|
310 |
|
311 | /** type 的合法值 */
|
312 | interface Type {
|
313 | /** 绿色 */
|
314 | primary
|
315 |
|
316 | /** 白色 */
|
317 | default
|
318 |
|
319 | /** 红色 */
|
320 | warn
|
321 | }
|
322 |
|
323 | /** form-type 的合法值 */
|
324 | interface FormType {
|
325 | /** 提交表单 */
|
326 | submit
|
327 |
|
328 | /** 重置表单 */
|
329 | reset
|
330 | }
|
331 |
|
332 | /** open-type 的合法值 */
|
333 | type OpenType = keyof openTypeKeys['weapp'] | keyof openTypeKeys['alipay'] | keyof openTypeKeys['qq']
|
334 |
|
335 | /** open-type 的合法值 */
|
336 | interface openTypeKeys {
|
337 | weapp: {
|
338 | /** 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从回调中获得具体信息
|
339 | * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
|
340 | */
|
341 | contact
|
342 |
|
343 | /** 触发用户转发,使用前建议先阅读使用指引
|
344 | * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
|
345 | */
|
346 | share
|
347 |
|
348 | /** 获取用户手机号,可以从回调中获取到用户信息
|
349 | * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
|
350 | */
|
351 | getPhoneNumber
|
352 |
|
353 | /** 获取用户信息,可以从回调中获取到用户信息 */
|
354 | getUserInfo
|
355 |
|
356 | /** 打开APP,可以通过 app-parameter 属性设定向APP传的参数
|
357 | * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
|
358 | */
|
359 | launchApp
|
360 |
|
361 | /** 打开授权设置页 */
|
362 | openSetting
|
363 |
|
364 | /** 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 */
|
365 | feedback
|
366 |
|
367 | /** 获取用户头像,可以从回调中获得具体信息 */
|
368 | chooseAvatar
|
369 | }
|
370 |
|
371 | /** 支付宝小程序专属的 open-type 合法值
|
372 | * @see https://opendocs.alipay.com/mini/component/button
|
373 | */
|
374 | alipay: {
|
375 | /** 触发 自定义分享 */
|
376 | share
|
377 |
|
378 | /** 支持小程序授权 */
|
379 | getAuthorize
|
380 |
|
381 | /** 分享到通讯录好友 */
|
382 | contactShare
|
383 |
|
384 | /** 关注生活号 */
|
385 | lifestyle
|
386 | }
|
387 |
|
388 | /** QQ 小程序专属的 open-type 合法值
|
389 | * @see https://q.qq.com/wiki/develop/miniprogram/component/form/button.html
|
390 | */
|
391 | qq: {
|
392 | /** 触发用户转发,使用前建议先阅读使用指引
|
393 | * @see https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_share.html#%E8%BD%AC%E5%8F%91-2
|
394 | */
|
395 | share
|
396 |
|
397 | /** 获取用户信息,可以从 onGetUserInfo 回调中获取到用户信息 */
|
398 | getUserInfo
|
399 |
|
400 | /** 打开APP,可以通过 app-parameter 属性设定向APP传的参数
|
401 | * @see https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_app.html
|
402 | */
|
403 | launchApp
|
404 |
|
405 | /** 打开授权设置页 */
|
406 | openSetting
|
407 |
|
408 | /** 呼起吐个槽反馈页面,开发者可以到官网查看反馈 */
|
409 | feedback
|
410 |
|
411 | /** 呼起群资料卡页面,可以通过 group-id 属性设定需要打开的群资料卡的群号,同时 app.json 中必须配置 groupIdList(数量不超过 10 个),表明可以打开群资料卡的群号 */
|
412 | openGroupProfile
|
413 |
|
414 | /** 添加好友,对方需要通过该小程序进行授权,允许被加好友后才能调用成功[用户授权](https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_userinfo.html#%E6%8E%88%E6%9D%83) */
|
415 | addFriend
|
416 |
|
417 | /** 添加彩签,点击后添加状态有用户提示,无回调 */
|
418 | addColorSign
|
419 |
|
420 | /** 打开公众号资料卡,可以通过 public-id 属性设定需要打开的公众号资料卡的号码,同时 app.json 中必须配置 publicIdList(目前只能配置 1 个),表明可以打开的公众号资料卡的号码 */
|
421 | openPublicProfile
|
422 |
|
423 | /** 添加群应用(只有管理员或群主有权操作,建议先调用 qq.getGroupInfo 获取当前用户是否为管理员,如果是管理员才显示该按钮),添加后给button绑定 onAddGroupApp 事件接收回调数据。 */
|
424 | addGroupApp
|
425 |
|
426 | /** 在自定义开放数据域组件中,向指定好友发起分享据 */
|
427 | shareMessageToFriend
|
428 | }
|
429 | }
|
430 |
|
431 | /** lang 的合法值 */
|
432 | interface Lang {
|
433 | /** 英文 */
|
434 | en
|
435 |
|
436 | /** 简体中文 */
|
437 | zh_CN
|
438 |
|
439 | /** 繁体中文 */
|
440 | zh_TW
|
441 | }
|
442 | interface onGetUserInfoEventDetail {
|
443 | userInfo: {
|
444 | /** 昵称 */
|
445 | nickName: string
|
446 |
|
447 | /** 头像 */
|
448 | avatarUrl: string
|
449 |
|
450 | /** 性别 */
|
451 | gender: keyof Gender
|
452 |
|
453 | /** 省份,如:`Yunnan` */
|
454 | province: string
|
455 |
|
456 | /** 城市,如:`Dalian` */
|
457 | city: string
|
458 |
|
459 | /** 国家,如:`China` */
|
460 | country: string
|
461 | }
|
462 |
|
463 | /** 不包括敏感信息的原始数据 `JSON` 字符串,用于计算签名 */
|
464 | rawData: string
|
465 |
|
466 | /** 使用 `sha1(rawData + sessionkey)` 得到字符串,用于校验用户信息 */
|
467 | signature: string
|
468 |
|
469 | /** 包括敏感数据在内的完整用户信息的加密数据 */
|
470 | encryptedData: string
|
471 |
|
472 | /** 加密算法的初始向量 */
|
473 | iv: string
|
474 |
|
475 | /* 用户信息的调用状态 */
|
476 | errMsg: string
|
477 |
|
478 | /** 敏感数据对应的云 ID,开通[云开发](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)的小程序才会返回,可通过云调用直接获取开放数据,详细见[云调用直接获取开放数据](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#method-cloud) */
|
479 | cloudID?: string
|
480 | }
|
481 |
|
482 | /** 性别的合法值 */
|
483 | interface Gender {
|
484 | /** 未知 */
|
485 | 0
|
486 |
|
487 | /** 男 */
|
488 | 1
|
489 |
|
490 | /** 女 */
|
491 | 2
|
492 | }
|
493 | interface onContactEventDetail {
|
494 | /* 小程序消息的调用状态 */
|
495 | errMsg: string
|
496 |
|
497 | /** 小程序消息指定的路径 */
|
498 | path: string
|
499 |
|
500 | /** 小程序消息指定的查询参数 */
|
501 | query: Record<string, any>
|
502 | }
|
503 | interface onGetPhoneNumberEventDetail {
|
504 | /* 获取用户手机号的调用状态 */
|
505 | errMsg: string
|
506 |
|
507 | /** 包括敏感数据在内的完整用户信息的加密数据 */
|
508 | encryptedData: string
|
509 |
|
510 | /** 加密算法的初始向量 */
|
511 | iv: string
|
512 |
|
513 | /** 动态令牌。可通过动态令牌换取用户手机号。
|
514 | * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
|
515 | */
|
516 | code?: string
|
517 | }
|
518 | interface onOpenSettingEventDetail {
|
519 | /* 打开授权设置页的调用状态 */
|
520 | errMsg: string
|
521 |
|
522 | /* 用户授权结果 */
|
523 | authSetting: Record<string, boolean>
|
524 | }
|
525 | }
|
526 |
|
527 | /** 按钮
|
528 | * @classification forms
|
529 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
|
530 | * @example_react
|
531 | * ```tsx
|
532 | * export default class PageButton extends Component {
|
533 | * state = {
|
534 | * btn: [
|
535 | * {
|
536 | * text: '页面主操作 Normal',
|
537 | * size: 'default',
|
538 | * type: 'primary'
|
539 | * },
|
540 | * {
|
541 | * text: '页面主操作 Loading',
|
542 | * size: 'default',
|
543 | * type: 'primary',
|
544 | * loading: true,
|
545 | * },
|
546 | * {
|
547 | * text: '页面主操作 Disabled',
|
548 | * size: 'default',
|
549 | * type: 'primary',
|
550 | * disabled: true,
|
551 | * },
|
552 | * {
|
553 | * text: '页面次要操作 Normal',
|
554 | * size: 'default',
|
555 | * type: 'default'
|
556 | * },
|
557 | * {
|
558 | * text: '页面次要操作 Disabled',
|
559 | * size: 'default',
|
560 | * type: 'default',
|
561 | * disabled: true,
|
562 | * },
|
563 | * {
|
564 | * text: '警告类操作 Normal',
|
565 | * size: 'default',
|
566 | * type: 'warn'
|
567 | * },
|
568 | * {
|
569 | * text: '警告类操作 Disabled',
|
570 | * size: 'default',
|
571 | * type: 'warn',
|
572 | * disabled: true,
|
573 | * }
|
574 | * ]
|
575 | * }
|
576 | * render () {
|
577 | * return (
|
578 | * <View className='container'>
|
579 | * {this.state.btn.map(item => {
|
580 | * return (
|
581 | * <Button
|
582 | * size={item.size ? item.size : ''}
|
583 | * type={item.type ? item.type : ''}
|
584 | * loading={item.loading ? item.loading : false}
|
585 | * disabled={item.disabled ? item.disabled : false}
|
586 | * >
|
587 | * {item.text}
|
588 | * </Button>
|
589 | * )
|
590 | * })}
|
591 | * <Button className='btn-max-w' plain type='primary'>按钮</Button>
|
592 | * <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
|
593 | * <Button className='btn-max-w' plain >按钮</Button>
|
594 | * <Button className='btn-max-w' plain disabled >按钮</Button>
|
595 | * <Button size='mini' type='primary'>按钮</Button>
|
596 | * <Button size='mini' >按钮</Button>
|
597 | * <Button size='mini' type='warn'>按钮</Button>
|
598 | * </View>
|
599 | * )
|
600 | * }
|
601 | * }
|
602 | * ```
|
603 | * @example_vue
|
604 | * ```html
|
605 | * <template>
|
606 | * <view class="container">
|
607 | * <button
|
608 | * v-for="item in btn"
|
609 | * :size="item.size ? item.size : ''"
|
610 | * :type="item.type ? item.type : ''"
|
611 | * :loading="item.loading ? item.loading : false"
|
612 | * :disabled="item.disabled ? item.disabled : false"
|
613 | * >
|
614 | * {{ item.text }}
|
615 | * </button>
|
616 | * <button class="btn-max-w" :plain="true" type="primary">按钮</button>
|
617 | * <button class="btn-max-w" :plain="true" type="primary" :disabled="true">不可点击的按钮</button>
|
618 | * <button class="btn-max-w" :plain="true">按钮</button>
|
619 | * <button class="btn-max-w" :plain="true" :disabled="true">按钮</button>
|
620 | * <button size="mini" type="primary">按钮</button>
|
621 | * <button size="mini" >按钮</button>
|
622 | * <button size="mini" type="warn">按钮</button>
|
623 | * </view>
|
624 | * </template>
|
625 | *
|
626 | * <script>
|
627 | * export default {
|
628 | * data() {
|
629 | * return {
|
630 | * btn: [
|
631 | * {
|
632 | * text: '页面主操作 Normal',
|
633 | * size: 'default',
|
634 | * type: 'primary'
|
635 | * },
|
636 | * {
|
637 | * text: '页面主操作 Loading',
|
638 | * size: 'default',
|
639 | * type: 'primary',
|
640 | * loading: true,
|
641 | * },
|
642 | * {
|
643 | * text: '页面主操作 Disabled',
|
644 | * size: 'default',
|
645 | * type: 'primary',
|
646 | * disabled: true,
|
647 | * },
|
648 | * {
|
649 | * text: '页面次要操作 Normal',
|
650 | * size: 'default',
|
651 | * type: 'default'
|
652 | * },
|
653 | * {
|
654 | * text: '页面次要操作 Disabled',
|
655 | * size: 'default',
|
656 | * type: 'default',
|
657 | * disabled: true,
|
658 | * },
|
659 | * {
|
660 | * text: '警告类操作 Normal',
|
661 | * size: 'default',
|
662 | * type: 'warn'
|
663 | * },
|
664 | * {
|
665 | * text: '警告类操作 Disabled',
|
666 | * size: 'default',
|
667 | * type: 'warn',
|
668 | * disabled: true,
|
669 | * }
|
670 | * ]
|
671 | * }
|
672 | * }
|
673 | * }
|
674 | * </script>
|
675 | * ```
|
676 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/button.html
|
677 | */
|
678 | declare const Button: ComponentType<ButtonProps>
|
679 | export { Button, ButtonProps }
|