From b85a026499399cd7baef4cf4d563c404e7ab7912 Mon Sep 17 00:00:00 2001 From: cos2004 Date: Thu, 18 Oct 2018 20:39:30 +0800 Subject: [PATCH] =?UTF-8?q?fix(taro-ui):=20=E4=BF=AE=E5=A4=8D=E8=8B=A5?= =?UTF-8?q?=E5=B9=B2issue=E9=97=AE=E9=A2=98,=20close=20#83=20#54=20#53?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- @types/button.d.ts | 2 ++ docs/markdown/button.md | 8 ++++-- src/components/avatar/index.js | 17 +++++------ src/components/badge/index.js | 3 +- src/components/button/index.js | 31 +++++++++++++------- src/components/button/index.scss | 6 ++++ src/components/drawer/index.js | 14 +++++---- src/components/noticebar/index.js | 46 +++++++++++++++++++++--------- src/components/pagination/index.js | 10 +++++-- src/components/tag/index.js | 19 ++++++------ src/components/timeline/index.js | 8 +++++- src/pages/basic/button/index.js | 35 +++++++++++++++++++++-- 12 files changed, 142 insertions(+), 57 deletions(-) diff --git a/@types/button.d.ts b/@types/button.d.ts index bdc3973b9..3bc5ac6f1 100644 --- a/@types/button.d.ts +++ b/@types/button.d.ts @@ -10,6 +10,8 @@ export interface AtButtonProps extends AtComponent{ circle?: boolean + full?: boolean + loading?: boolean disabled?: boolean diff --git a/docs/markdown/button.md b/docs/markdown/button.md index 5dafec604..5b08f5124 100644 --- a/docs/markdown/button.md +++ b/docs/markdown/button.md @@ -48,9 +48,10 @@ import { AtButton } from 'taro-ui' | √ | √ | type | 按钮的类型 | String | `primary`, `secondary` | - | | √ | √ | size | 按钮的大小 | String | `normal`, `small` | `normal` | | √ | √ | circle | 设置按钮圆角 | Boolean | - | false | +| √ | √ | full | 是否通栏样式（即按钮宽度为屏幕宽度时的样式） | Boolean | - | false | | √ | √ | loading | 设置按钮的载入状态 | Boolean | - | false | -| √ | √ | disabled | 设置按钮为禁用态（不可点击） | Boolean | - | false | -| √ | - | formType | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | `submit`, `reset` | - | +| √ | √ | disabled[1] | 设置按钮为禁用态（不可点击） | Boolean | - | false | +| √ | - | formType[2] | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | `submit`, `reset` | - | | √ | - | openType | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | `contact`, `share`, `getUserInfo`, `getPhoneNumber`, `launchApp`, `openSetting`, `feedback`, `getRealnameAuthInfo` | - | | √ | - | lang | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | en | | √ | - | sessionFrom | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - | @@ -60,7 +61,8 @@ import { AtButton } from 'taro-ui' | √ | - | showMessageCard | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | Boolean | - | false | | √ | - | appParameter | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - | -> 注意：由于微信 button 的部分样式属性和 AtButton 有冲突，所以暂未被 AtButton 支持。支持的属性以上表为准 +> 注1：由于微信 button 的部分样式属性和 AtButton 有冲突，所以暂未被 AtButton 支持。支持的属性以上表为准 +> 注2：formType 为 submit、reset 都可以触发 Form 或 AtForm 的 submit、reset 事件，但是由于微信的限制，只能取到 event.detail 的部分值，比如 formid，不能取到 value。而 reset 也不会使 AtForm 里的 AtInput 等重置 ## Button 事件 diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js index 6274039b7..c2ca9324d 100644 --- a/src/components/avatar/index.js +++ b/src/components/avatar/index.js @@ -1,6 +1,7 @@ import Taro from '@tarojs/taro' import { View, Image, Text, OpenData } from '@tarojs/components' import PropTypes from 'prop-types' +import classNames from 'classnames' import AtComponent from '../../common/component' @@ -16,7 +17,7 @@ export default class AtAvatar extends AtComponent { constructor () { super(...arguments) this.state = { - + isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP, } } @@ -32,18 +33,18 @@ export default class AtAvatar extends AtComponent { openData, customStyle, } = this.props - let rootClassName = ['at-avatar'] - const sizeClass = SIZE_CLASS[size] || '' - const circleClass = circle ? 'at-avatar--circle' : '' + const rootClassName = ['at-avatar'] - rootClassName.push(`at-avatar--${sizeClass}`, circleClass) - rootClassName = rootClassName.filter(str => str !== '') + const classObject = { + [`at-avatar--${SIZE_CLASS[size]}`]: SIZE_CLASS[size], + 'at-avatar--circle': circle, + } let letter = '' if (text) letter = text[0] let elem - if (openData && openData.type === 'userAvatarUrl' && Taro.getEnv() === Taro.ENV_TYPE.WEAPP) { + if (openData && openData.type === 'userAvatarUrl' && this.state.isWEAPP) { elem = () } else if (image) { elem = () @@ -52,7 +53,7 @@ export default class AtAvatar extends AtComponent { } return ( {elem} ) diff --git a/src/components/badge/index.js b/src/components/badge/index.js index 4abc5a6ef..23828da8e 100644 --- a/src/components/badge/index.js +++ b/src/components/badge/index.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import Taro from '@tarojs/taro' import { View } from '@tarojs/components' import isNaN from 'lodash/isNaN' +import classNames from 'classnames' import AtComponent from '../../common/component' import './index.scss' @@ -35,7 +36,7 @@ export default class AtBadge extends AtComponent { return ( {this.props.children} diff --git a/src/components/button/index.js b/src/components/button/index.js index c02e47bea..7da2925d3 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -2,6 +2,7 @@ import Taro from '@tarojs/taro' import { View, Button, Form } from '@tarojs/components' import PropTypes from 'prop-types' +import classNames from 'classnames' import AtLoading from '../loading/index' import AtComponent from '../../common/component' @@ -58,11 +59,19 @@ export default class AtButton extends AtComponent { }) } + onReset () { + this.$scope.triggerEvent('reset', arguments[0].detail, { + bubbles: true, + composed: true, + }) + } + render () { const { size = 'normal', type = '', circle, + full, loading, disabled, customStyle, @@ -80,14 +89,14 @@ export default class AtButton extends AtComponent { const { isWEAPP, } = this.state - let rootClassName = ['at-button'] - const sizeClass = SIZE_CLASS[size] || '' - const disabledClass = disabled ? 'at-button--disabled' : '' - const typeClass = TYPE_CLASS[type] ? `at-button--${type}` : '' - const circleClass = circle ? 'at-button--circle' : '' - - rootClassName.push(`at-button--${sizeClass}`, typeClass, circleClass, disabledClass) - rootClassName = rootClassName.filter(str => str !== '') + const rootClassName = ['at-button'] + const classObject = { + [`at-button--${SIZE_CLASS[size]}`]: SIZE_CLASS[size], + 'at-button--disabled': disabled, + [`at-button--${type}`]: TYPE_CLASS[type], + 'at-button--circle': circle, + 'at-button--full': full, + } const loadingColor = type === 'primary' ? '#fff' : '#6190E8' const loadingSize = size === 'small' ? '16' : '18' let component @@ -97,11 +106,11 @@ export default class AtButton extends AtComponent { } return ( - {isWEAPP && !disabled &&