taro-ui-vue3/lib/segmented-control/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {View} from "@tarojs/components";
import {pxTransform} from "../utils/common";
const AtSegmentedControl = defineComponent({
  name: "AtSegmentedControl",
  props: {
    current: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: "#fff"
    },
    selectedColor: {
      type: String,
      default: "#6190E8"
    },
    fontSize: {
      type: [Number, String],
      default: 28,
      validator: (prop) => {
        return typeof parseInt(`${prop}`) === "number";
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    values: {
      type: Array,
      default: []
    },
    onClick: {
      type: Function,
      default: () => (index, event) => {
      }
    }
  },
  setup(props, {attrs}) {
    const rootClass = computed(() => ({
      "at-segmented-control": true,
      "at-segmented-control--disabled": props.disabled
    }));
    const rootStyle = computed(() => ({
      borderColor: props.selectedColor
    }));
    const genItemClass = computed(() => (i) => ({
      "at-segmented-control__item": true,
      "at-segmented-control__item--active": props.current === i
    }));
    const itemStyle = computed(() => ({
      color: props.selectedColor,
      fontSize: pxTransform(parseInt(`${props.fontSize}`)),
      borderColor: props.selectedColor,
      backgroundColor: props.color
    }));
    const selectedItemStyle = computed(() => ({
      color: props.color,
      fontSize: pxTransform(parseInt(`${props.fontSize}`)),
      borderColor: props.selectedColor,
      backgroundColor: props.selectedColor
    }));
    function handleClick(index, event) {
      if (props.disabled)
        return;
      props.onClick(index, event);
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClass.value,
      style: rootStyle.value
    }), {
      default: () => props.values.map((value, i) => h(View, {
        key: value,
        class: genItemClass.value(i),
        style: props.current === i ? selectedItemStyle.value : itemStyle.value,
        onTap: handleClick.bind(this, i)
      }, {default: () => value}))
    });
  }
});
var segmented_control_default = AtSegmentedControl;
export {
  segmented_control_default as default
};