feat(switch): 添加disabled 状态

jd-opensource · Aug 15, 2018 · 54d55bd · 54d55bd
1 parent 993d88d
commit 54d55bd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/src/components/switch/index.js b/src/components/switch/index.js
@@ -9,32 +9,41 @@ import './index.scss'
  * @prop title {String} 选项名
  * @prop color {String} 背景颜色 default:#6190e8
  * @prop checked {Boolean} 是否显示开启 default:false
+ * @prop disabled {Boolean} 是否禁用 default:false
  * @prop onChange {Function} 监听函数，数值改变时触发
  */
 class AtSwitch extends Taro.Component {
   handleChange (e) {
     this.props.onChange(e.detail.value)
   }
   render () {
-    const { border, title, checked, color } = this.props
+    const { disabled, border, title, checked, color } = this.props
     let rootStyle = ''
     if (!border) {
       rootStyle = 'border: none;'
     }
+    const containerCls = ['at-switch__container']
+    if (disabled) {
+      containerCls.push('at-switch--disabled')
+    }
     return <View className='at-switch' style={rootStyle}>
       <View className='at-switch__title'>{title}</View>
-      {
-        checked
-          ? <Switch checked color={color} onChange={this.handleChange.bind(this)} />
-          : <Switch color={color} onChange={this.handleChange.bind(this)} />
-      }
+      <View className={containerCls}>
+        <View className='at-switch__mask'></View>
+        {
+          checked
+            ? <Switch className='at-switch__switch' checked color={color} onChange={this.handleChange.bind(this)} />
+            : <Switch className='at-switch__switch' color={color} onChange={this.handleChange.bind(this)} />
+        }
+      </View>
     </View>
   }
 }
 AtSwitch.defaultProps = {
   title: '',
   color: '#6190e8',
   border: true,
+  disabled: false,
   checked: false,
   onChange: () => {}
 }
@@ -43,6 +52,7 @@ AtSwitch.propTypes = {
   color: PropTypes.string,
   checked: PropTypes.bool,
   border: PropTypes.bool,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func
 }
 export default AtSwitch
diff --git a/src/components/switch/index.scss b/src/components/switch/index.scss
@@ -14,9 +14,30 @@
     font-size: $font-size-base;
   }
 
-  &__switch {
+  &__container {
+    position: relative;
     flex: 2;
     text-align: right;
     background-color: $color-bg;
   }
+
+  &__mask {
+    position: absolute;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+  }
+
+  &--disabled {
+    .at-switch__switch {
+      opacity: $opacity-disabled;
+    }
+
+    .at-switch__mask {
+      display: block;
+    }
+  }
 }
diff --git a/src/pages/form/switch/index.js b/src/pages/form/switch/index.js
@@ -49,6 +49,7 @@ export default class Index extends Taro.Component {
             <View className='panel__content no-padding'>
               <View className='example-item'>
                 <AtForm>
+                  <AtSwitch title='不可点击' checked disabled />
                   <AtSwitch title='不可点击' border={false} disabled />
                 </AtForm>
               </View>