feat(base): 按钮样式

jd-opensource · Jul 19, 2018 · af0158d · af0158d
1 parent 9a8da97
commit af0158d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -1,5 +1,6 @@
 import Taro from "@tarojs/taro"
 import { View } from "@tarojs/components"
+import { AtIcon } from "../icon/index"
 
 import './index.scss'
 
@@ -24,8 +25,8 @@ export default class AtButton extends Taro.Component {
   }
 
   onClick(e) {
-    if (!this.props.disabled) {
-      this.props.onClick && this.props.onClick(e)
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(e)
     }
   }
 
@@ -43,12 +44,16 @@ export default class AtButton extends Taro.Component {
     let disabledClass = disabled? 'at-button--disabled': ''
     let typeClass = TYPE_CLASS[type]? `at-button--${type}`: ''
     let activeClass = active? 'at-button--active': ''
+    // let loadingClass = loading? 'at-button--loading': ''
+    // let iconClass = loading? 'at-button--icon': ''
 
     rootClassName.push(`at-button--${sizeClass}`, disabledClass, typeClass, activeClass)
     rootClassName = rootClassName.filter(str => str != '')
-    // console.log(this.props, this.state)
+    console.log('loading====', loading)
     return (
       <View className={rootClassName} onClick={this.onClick.bind(this)}>
+        {loading && <AtIcon value="arrow-left"></AtIcon>}
+        {icon && <AtIcon value={icon}></AtIcon>}
         {this.props.children}
       </View>
     )

diff --git a/src/components/icon/index.js b/src/components/icon/index.js
@@ -9,7 +9,7 @@ export default class AtIcon extends Taro.Component {
   }
 
   render() {
-    let { value, size = 24, color = '#000'} = this.props
+    let { value = '', size = 24, color = '#000'} = this.props
 
     const rootStyle = {
       // width: `${+size}px`,
@@ -19,7 +19,7 @@ export default class AtIcon extends Taro.Component {
     }
 
     let rootClassName = ['at-icon', `at-icon-${value}`]
-
+      console.log('value====',value)
     return (
       <View className={rootClassName} style={rootStyle}></View>
     )

diff --git a/src/pages/view/button/index.js b/src/pages/view/button/index.js
@@ -13,10 +13,7 @@ export default class ButtonPage extends Taro.Component {
   constructor() {
     super(...arguments)
     this.state = {
-      // icons: [
-      //   'arrow-left',
-      //   'arrow-down-left',
-      // ]
+
     }
   }
 
@@ -32,7 +29,10 @@ export default class ButtonPage extends Taro.Component {
           <AtButton type="primary" onClick={this.onButtonClick.bind(this)}>页面主操作</AtButton>
         </View>
         <View className='example'>
-          <AtButton type="primary" onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+          <AtButton type="primary" loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="primary" icon="arrow-left" onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
         </View>
         <View className='example'>
           <AtButton type="primary" active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>