taro-ui-vue3/lib/switch/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {Switch, View} from "@tarojs/components";
import {useModelValue} from "../composables/model";
const AtSwitch = defineComponent({
  name: "AtSwitch",
  props: {
    title: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#6190e8"
    },
    checked: Boolean,
    disabled: Boolean,
    border: Boolean,
    onChange: Function
  },
  setup(props, {attrs, emit}) {
    const modelChecked = useModelValue(props, emit, "checked");
    const rootClasses = computed(() => ({
      "at-switch": true,
      "at-switch--without-border": !Boolean(props.border)
    }));
    const containerClasses = computed(() => ({
      "at-switch__container": true,
      "at-switch--disabled": props.disabled
    }));
    function handleChange(event) {
      const {value, checked} = event.detail;
      const state = typeof value === "undefined" ? checked : value;
      if (attrs["onUpdate:checked"]) {
        modelChecked.value = state;
      } else {
        props.onChange && props.onChange(state);
      }
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value
    }), {
      default: () => [
        h(View, {
          class: "at-switch__title"
        }, {default: () => props.title}),
        h(View, {
          class: containerClasses.value
        }, {
          default: () => [
            h(View, {class: "at-switch__mask"}),
            h(Switch, {
              class: "at-switch__switch",
              checked: modelChecked.value,
              color: props.color,
              onChange: handleChange
            })
          ]
        })
      ]
    });
  }
});
var switch_default = AtSwitch;
export {
  switch_default as default
};