feat: add SegmentedControl

Author: pengshanglong

src/components/index.ts

@@ -6,5 +6,6 @@ import FloatLayout from './float-layout/index'
 import Accordion from './accordion/index'
 import NavBar from './nav-bar/index'
 import TabBar from './tab-bar/index'
+import SegmentedControl from './segmented-control/index'
 
-export { Grid, List, ListItem, Card, FloatLayout, Accordion, NavBar, TabBar }
+export { Grid, List, ListItem, Card, FloatLayout, Accordion, NavBar, TabBar, SegmentedControl }

src/components/segmented-control/index.jsx

@@ -0,0 +1,106 @@
+import classNames from 'classnames'
+import { pxTransform } from '../../utils/common'
+
+export default {
+  name: 'SegmentedControl',
+  props: {
+    customStyle: {
+      type: [Object, String],
+      default: '',
+    },
+    className: {
+      type: [Array, String],
+      default: '',
+    },
+    current: {
+      type: Number,
+      default: 0,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    selectedColor: {
+      type: String,
+      default: '',
+    },
+    values: {
+      type: Array,
+      default: () => [],
+    },
+    onClick: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  methods: {
+    /**
+     *
+     * @param {number} index
+     * @param {event} event
+     */
+    handleClick(index, event) {
+      if (this.disabled) return
+      this.onClick(index, event)
+    },
+  },
+  render() {
+    const {
+      customStyle,
+      className,
+      disabled,
+      values,
+      selectedColor,
+      current,
+      color,
+      fontSize,
+    } = this
+
+    const rootStyle = {
+      borderColor: selectedColor,
+    }
+    const itemStyle = {
+      color: selectedColor,
+      fontSize: pxTransform(fontSize),
+      borderColor: selectedColor,
+      backgroundColor: color,
+    }
+    const selectedItemStyle = {
+      color,
+      fontSize: pxTransform(fontSize),
+      borderColor: selectedColor,
+      backgroundColor: selectedColor,
+    }
+    const rootCls = classNames(
+      'at-segmented-control',
+      {
+        'at-segmented-control--disabled': disabled,
+      },
+      className
+    )
+
+    return (
+      <view class={rootCls} style={this.$mergeStyle(rootStyle, customStyle)}>
+        {values.map((value, i) => (
+          <view
+            class={classNames('at-segmented-control__item', {
+              'at-segmented-control__item--active': current === i,
+            })}
+            style={current === i ? selectedItemStyle : itemStyle}
+            key={value}
+            onTap={this.handleClick.bind(this, i)}>
+            {value}
+          </view>
+        ))}
+      </view>
+    )
+  },
+}

src/pages/index/index.vue

@@ -2,6 +2,13 @@
   <view 
     class="index"
   >
+    <SegmentedControl
+      :on-click="segmentedClick"
+      selected-color="#FF4949"
+      font-size="30"
+      :current="segmentedIndex"
+      :values="segmentedList"
+    />
     <TabBar
       :tab-list="tabList"
       :on-click="onTabClick"

src/pages/index/indexMixins.ts

@@ -30,6 +30,7 @@ import {
   Accordion,
   NavBar,
   TabBar,
+  SegmentedControl,
 } from '../../components/index'
 
 export default {
@@ -65,6 +66,7 @@ export default {
     Accordion,
     NavBar,
     TabBar,
+    SegmentedControl,
   },
   data() {
     return {
@@ -124,6 +126,8 @@ export default {
         { title: '拍照', iconType: 'camera' },
         { title: '文件夹', iconType: 'folder', text: '100', max: 99 },
       ],
+      segmentedIndex: 0,
+      segmentedList: ['标签页1', '标签页2', '标签页3'],
     }
   },
   methods: {
@@ -148,5 +152,8 @@ export default {
     onTabClick(i, e) {
       this.tabIndex = i
     },
+    segmentedClick(i, e) {
+      this.segmentedIndex = i
+    },
   },
 }

src/utils/common.ts

@@ -132,6 +132,11 @@ function handleTouchScroll(flag: any): void {
   }
 }
 
+function pxTransform(size: number): string {
+  if (!size) return ''
+  return Taro.pxTransform(size)
+}
+
 export {
   getEnvs,
   delayGetScrollOffset,
@@ -140,4 +145,5 @@ export {
   uuid,
   isTest,
   handleTouchScroll,
+  pxTransform,
 }