feat(base): 更新按钮

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

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -11,6 +11,7 @@ const SIZE_CLASS = {
 
 const TYPE_CLASS = {
   primary: 'primary',
+  secondary: 'secondary',
 }
 
 
@@ -22,29 +23,33 @@ export default class AtButton extends Taro.Component {
     }
   }
 
-  onClick() {
-    console.log('ddasddas')
+  onClick(e) {
+    if (!this.props.disabled) {
+      this.props.onClick && this.props.onClick(e)
+    }
   }
 
   render(){
     let {
       size = 'normal',
-      type = 'primary',
+      type = '',
       icon = '',
+      active = false,
       loading = false,
       disabled = false,
     } = this.props
     let rootClassName = ['at-button']
     let sizeClass = SIZE_CLASS[size] || ''
     let disabledClass = disabled? 'at-button--disabled': ''
     let typeClass = TYPE_CLASS[type]? `at-button--${type}`: ''
+    let activeClass = active? 'at-button--active': ''
 
-    rootClassName.push(`at-button--${sizeClass}`, disabledClass, typeClass)
+    rootClassName.push(`at-button--${sizeClass}`, disabledClass, typeClass, activeClass)
     rootClassName = rootClassName.filter(str => str != '')
-console.log(this.props, this.state)
+    // console.log(this.props, this.state)
     return (
-      <View className={rootClassName} onClick={this.onClick}>
-        测试按钮
+      <View className={rootClassName} onClick={this.onClick.bind(this)}>
+        {this.props.children}
       </View>
     )
   }

diff --git a/src/components/button/index.scss b/src/components/button/index.scss
@@ -8,20 +8,24 @@
     font-size: 32px;
     margin: 0 auto;
 
-    border: 2px solid #6190E8;
+    border: 2px solid #ccc;
     background-color: #fff;
-    color: #6190E8;
+    color: #333;
     box-sizing: border-box;
     &--active {
-        opacity: .8;
+        opacity: .6;
     }
     &--disabled {
-        opacity: .5;
+        opacity: .3;
     }
     &--primary {
         background-color: rgba(92, 137, 228, 1);
         color: #fff;
-        border: none;
-
+        border: 2px solid rgba(92, 137, 228, 1);
+    }
+    &--secondary {
+        background-color: #fff;
+        color: rgba(92, 137, 228, 1);
+        border: 2px solid rgba(92, 137, 228, 1);
     }
 }
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
@@ -195,7 +195,10 @@ export default class Index extends Taro.Component {
                       return (
                         <View
                           key={index}
-
+                          onClick={this.goToComponent.bind(this, {
+                            id: item.id,
+                            name: child.name
+                          })}
                           className='list-component'>
                           <View className='list-component-info'>
                             {child.name.split('-').join('')} {child.title}

diff --git a/src/pages/view/button/index.js b/src/pages/view/button/index.js
@@ -20,24 +20,52 @@ export default class ButtonPage extends Taro.Component {
     }
   }
 
+  onButtonClick() {
+    alert('点击了！')
+  }
+
   render() {
     // let {icons} = this.state
     return (
       <View className='page'>
         <View className='example'>
-          <AtButton>测试按钮</AtButton>
+          <AtButton type="primary" onClick={this.onButtonClick.bind(this)}>页面主操作</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="primary" onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="primary" active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="primary" disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
         </View>
+
+
+        <View className='example'>
+          <AtButton type="secondary" onClick={this.onButtonClick.bind(this)}>页面次操作</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="secondary" onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="secondary" active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="secondary" disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+        </View>
+
         <View className='example'>
-          <AtButton>测试按钮</AtButton>
+          <AtButton onClick={this.onButtonClick.bind(this)}>页面次要操作</AtButton>
         </View>
         <View className='example'>
-          <AtButton disabled>测试按钮</AtButton>
+          <AtButton onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
         </View>
         <View className='example'>
-          <AtButton type="secondary">测试按钮</AtButton>
+          <AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
         </View>
         <View className='example'>
-          <AtButton type="secondary" disabled>测试按钮</AtButton>
+          <AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
         </View>
       </View>
     )