feat(slider): 新增 Slider 组件

src/components/slider/index.js

@@ -0,0 +1,97 @@
+import Taro from '@tarojs/taro'
+import { View, Slider } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import AtComponent from '../../common/component'
+import './index.scss'
+
+export default class AtSlider extends AtComponent {
+  constructor () {
+    super(...arguments)
+    const { value } = this.props
+    this.setState({ value })
+  }
+
+  static defaultProps = {
+    customStyle: '',
+    className: '',
+    min: 0,
+    max: 100,
+    step: 1,
+    value: 0,
+    disabled: false,
+    activeColor: '#6190e8',
+    backgroundColor: '#e9e9e9',
+    blockSize: 28,
+    blockColor: '#ffffff',
+    showValue: false,
+    onChange: () => {},
+    onChanging: () => {}
+  }
+
+  static propTypes = {
+    customStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]),
+    className: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.string
+    ]),
+    min: PropTypes.number,
+    max: PropTypes.number,
+    step: PropTypes.number,
+    value: PropTypes.number,
+    disabled: PropTypes.bool,
+    activeColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    blockSize: PropTypes.number,
+    blockColor: PropTypes.string,
+    showValue: PropTypes.bool,
+    onChange: PropTypes.func,
+    onChanging: PropTypes.func
+  }
+
+  handleChanging (e) {
+    const { value } = e.detail
+    this.setState({ value })
+    this.props.onChanging(e.detail.value)
+  }
+
+  render () {
+    const {
+      customStyle,
+      className,
+      min,
+      max,
+      step,
+      value,
+      disabled,
+      activeColor,
+      backgroundColor,
+      blockSize,
+      blockColor,
+      showValue
+    } = this.props
+
+    return (
+      <View
+        className={
+          classNames({
+            'at-slider': true,
+            'at-slider--disabled': disabled
+          }, className)
+        }
+        style={customStyle}
+      >
+        <View className='at-slider__inner'>
+          <Slider min={min} max={max} step={step} value={value} disabled={disabled} activeColor={activeColor} backgroundColor={backgroundColor} blockSize={blockSize} blockColor={blockColor} onChanging={this.handleChanging.bind(this)}></Slider>
+        </View>
+        {
+          showValue && <View className='at-slider__text'>{value}</View>
+        }
+      </View>
+    )
+  }
+}

src/components/slider/index.scss

@@ -0,0 +1,23 @@
+@import "../../style/mixins/index.scss";
+@import '../../style/theme/default.scss';
+
+.at-slider {
+  display: flex;
+  align-items: center;
+
+  &__inner {
+    flex: 1;
+  }
+
+  &__text {
+    width: 80px;
+    color: $color-grey-2;
+    font-size: $font-size-base;
+  }
+
+  &--disabled {
+    .at-slider__inner {
+      opacity: $opacity-disabled;
+    }
+  }
+}

src/pages/form/slider/index.js

@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro'
-import { View, Slider } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import DocsHeader from '../../components/doc-header'
+import AtSlider from '../../../components/slider/index'
 import './index.scss'
 
 export default class PageSlider extends Taro.Component {
@@ -25,7 +26,7 @@ export default class PageSlider extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='example-item__desc'>step=1</View>
-                <Slider activeColor={sliderColor} step={1} value={50}></Slider>
+                <AtSlider activeColor={sliderColor} step={1} value={50}></AtSlider>
               </View>
             </View>
           </View>
@@ -36,7 +37,7 @@ export default class PageSlider extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='example-item__desc'>step=1</View>
-                <Slider activeColor={sliderColor} step={1} value={50} showValue></Slider>
+                <AtSlider activeColor={sliderColor} step={1} value={50} showValue></AtSlider>
               </View>
             </View>
           </View>
@@ -47,7 +48,7 @@ export default class PageSlider extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='example-item__desc'>step=1, min=50, max=200</View>
-                <Slider activeColor={sliderColor} step={1} value={100} min={50} max={200} showValue></Slider>
+                <AtSlider activeColor={sliderColor} step={1} value={100} min={50} max={200} showValue></AtSlider>
               </View>
             </View>
           </View>
@@ -58,7 +59,7 @@ export default class PageSlider extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='example-item__desc'>step=1, blockSize=24</View>
-                <Slider step={1} value={50} activeColor='#4285F4' backgroundColor='#BDBDBD' blockColor='#4285F4' blockSize={24}></Slider>
+                <AtSlider step={1} value={50} activeColor='#4285F4' backgroundColor='#BDBDBD' blockColor='#4285F4' blockSize={24}></AtSlider>
               </View>
             </View>
           </View>
@@ -69,7 +70,7 @@ export default class PageSlider extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='example-item__desc'>step=1, blockSize=24</View>
-                <Slider activeColor={sliderColor} step={1} value={50} disabled></Slider>
+                <AtSlider activeColor={sliderColor} step={1} value={50} showValue disabled></AtSlider>
               </View>
             </View>
           </View>