feat: add switch slider

src/app.config.ts

@@ -1,11 +1,9 @@
 export default {
-  pages: [
-    'pages/index/index'
-  ],
+  pages: ['pages/index/index'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
-  }
+    navigationBarTextStyle: 'black',
+  },
 }

src/components/index.ts

@@ -9,21 +9,25 @@ import TabBar from './tab-bar/index'
 import SegmentedControl from './segmented-control/index'
 import AtTabs from './tabs/index'
 import AtTabsPane from './tabs-pane/index'
-import AtPagination  from './pagination/index'
-import AtIndexes  from './indexes/index'
+import AtPagination from './pagination/index'
+import AtIndexes from './indexes/index'
+import AtSwitch from './switch/index'
+import AtSlider from './slider/index'
 
-export { 
-  Grid, 
-  List, 
-  ListItem, 
-  Card, 
-  FloatLayout, 
-  Accordion, 
-  NavBar, 
-  TabBar, 
-  SegmentedControl, 
-  AtTabs, 
-  AtTabsPane, 
+export {
+  Grid,
+  List,
+  ListItem,
+  Card,
+  FloatLayout,
+  Accordion,
+  NavBar,
+  TabBar,
+  SegmentedControl,
+  AtTabs,
+  AtTabsPane,
   AtPagination,
-  AtIndexes 
+  AtIndexes,
+  AtSwitch,
+  AtSlider,
 }

src/components/slider/index.tsx

@@ -0,0 +1,143 @@
+import Vue, { VNode } from 'vue'
+import classNames from 'classnames'
+import { CommonEvent } from '@tarojs/components/types/common'
+import mixins from '../mixins'
+
+function clampNumber(value: number, lower: number, upper: number): number {
+  return Math.max(lower, Math.min(upper, value))
+}
+
+const AtSlider = Vue.extend({
+  name: 'AtSlider',
+  mixins: [mixins],
+  props: {
+    customStyle: {
+      type: [Object, String],
+      default: () => {},
+    },
+    className: {
+      type: [Object, String],
+      default: () => {},
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    activeColor: {
+      type: String,
+      default: '#6190e8',
+    },
+    backgroundColor: {
+      type: String,
+      default: '#e9e9e9',
+    },
+    blockSize: {
+      type: Number,
+      default: 28,
+    },
+    blockColor: {
+      type: String,
+      default: '#ffffff',
+    },
+    showValue: {
+      type: Boolean,
+      default: false,
+    },
+    onChange: {
+      type: Function,
+      default: () => () => {},
+    },
+    onChanging: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  data() {
+    const { value, min, max } = this
+    return {
+      state: {
+        _value: clampNumber(value, min, max),
+      },
+    }
+  },
+  methods: {
+    clampNumber,
+    handleChanging(e: CommonEvent): void {
+      const { _value } = this.state
+      const { value }: { value: number } = e.detail
+
+      if (value !== _value) {
+        this.setState({ _value: value })
+      }
+      this.onChanging && this.onChanging(value)
+    },
+    handleChange(e: CommonEvent): void {
+      const { value } = e.detail
+
+      this.setState({ _value: value })
+      this.onChange && this.onChange(value)
+    },
+  },
+  render(): VNode {
+    const { _value } = this.state
+    const {
+      customStyle,
+      className,
+      min,
+      max,
+      step,
+      disabled,
+      activeColor,
+      backgroundColor,
+      blockSize,
+      blockColor,
+      showValue,
+    } = this
+
+    return (
+      <view
+        class={classNames(
+          {
+            'at-slider': true,
+            'at-slider--disabled': disabled,
+          },
+          className
+        )}
+        style={customStyle}>
+        <view class="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)}
+            onChange={this.handleChange.bind(this)}></slider>
+        </view>
+        {showValue && <view clas="at-slider__text">{`${_value}`}</view>}
+      </view>
+    )
+  },
+})
+
+export default AtSlider

src/components/switch/index.tsx

@@ -0,0 +1,79 @@
+import Vue, { VNode } from 'vue'
+import classNames from 'classnames'
+import { CommonEvent } from '@tarojs/components/types/common'
+
+const AtSwitch = Vue.extend({
+  name: 'AtSwitch',
+  props: {
+    customStyle: {
+      type: [Object, String],
+      default: () => {},
+    },
+    className: {
+      type: [Object, String],
+      default: () => {},
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '#6190e8',
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    onChange: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  methods: {
+    handleChange(event: CommonEvent): void {
+      const { value, checked } = event.detail
+      const state = typeof value === 'undefined' ? checked : value
+      this.onChange && this.onChange(state)
+    },
+  },
+  render(): VNode {
+    const { customStyle, className, disabled, border, title, checked, color } = this
+
+    const rootCls = classNames(
+      'at-switch',
+      {
+        'at-switch--without-border': !border,
+      },
+      className
+    )
+    const containerCls = classNames('at-switch__container', {
+      'at-switch--disabled': disabled,
+    })
+
+    return (
+      <view class={rootCls} style={customStyle}>
+        <view class="at-switch__title">{title}</view>
+        <view class={containerCls}>
+          <view class="at-switch__mask"></view>
+          <switch
+            class="at-switch__switch"
+            checked={checked}
+            color={color}
+            onChange={this.handleChange}
+          />
+        </view>
+      </view>
+    )
+  },
+})
+
+export default AtSwitch

src/pages/index/demo.vue

@@ -0,0 +1,7 @@
+;<template>
+  <view>
+    <text>demo</text>
+    <slider />
+    <switch />
+  </view>
+</template>

src/pages/index/index.vue

@@ -2,6 +2,11 @@
   <view 
     class="index"
   >
+    <AtSlider :value="50" />
+    <AtSwitch
+      :border="false"
+      title="已关闭"
+    />
     <view style="height:100vh">
       <AtIndexes
         :list="list"

src/pages/index/indexMixins.ts

@@ -36,6 +36,8 @@ import {
   AtTabsPane,
   AtPagination,
   AtIndexes,
+  AtSwitch,
+  AtSlider,
 } from '../../components/index'
 
 export default {
@@ -77,6 +79,8 @@ export default {
     AtPagination,
     AtIndexes,
     Demo,
+    AtSwitch,
+    AtSlider,
   },
   data() {
     return {