shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/cusForm/src/BorderRadius.vue

<template>
  <div>
    <RadioGroup v-model:value="radius.type">
      <RadioButton value="all">整体</RadioButton>
      <RadioButton value="custom">单个</RadioButton>
    </RadioGroup>

    <div class="all" v-if="radius.type === 'all'">
      <InputNumber v-model:value="radius.value as number" />
      <Select v-model:value="radius.unit" :options="unitOptions" />
    </div>

    <div class="custom" v-else>
      <InputNumber v-model:value="radius.topLeft" >
        <template #addonBefore><RadiusUpleftOutlined/></template>
      </InputNumber>
      <InputNumber v-model:value="radius.topRight" >
        <template #addonBefore><RadiusUprightOutlined/></template>
      </InputNumber>
      <InputNumber v-model:value="radius.bottomLeft" >
        <template #addonBefore><RadiusBottomleftOutlined/></template>
      </InputNumber>
      <InputNumber v-model:value="radius.bottomRight" >
        <template #addonBefore><RadiusBottomrightOutlined/></template>
      </InputNumber>
      <Select v-model:value="radius.unit" :options="unitOptions" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, watch } from "vue";
import { RadioGroup, RadioButton, InputNumber, Select } from "ant-design-vue";
import {
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
} from "@ant-design/icons-vue";

type BorderRadius = {
  type: "all" | "custom";
  value:
    | number
    | {
        topLeft: number;
        topRight: number;
        bottomLeft: number;
        bottomRight: number;
      };
  unit: "px" | "%";
};
export default defineComponent({
  name: "FmBorderRadius",
  components: {
    RadioGroup,
    RadioButton,
    InputNumber,
    Select,
    RadiusUpleftOutlined,
    RadiusUprightOutlined,
    RadiusBottomleftOutlined,
    RadiusBottomrightOutlined,
  },
  props: {
    value: {
      type: Object as PropType<BorderRadius>,
      default: () => ({}),
    },
  },
  emits: ["update:value"],
  setup(props, { emit }) {

    const radius = reactive({
      type: props.value.type || "all",
      value: props.value.type === "all" ? props.value.value : 0,
      unit: props.value.unit || "px",
      topLeft:
        typeof props.value.value === "object" ? props.value.value?.topLeft : 0,
      topRight:
        typeof props.value.value === "object" ? props.value.value?.topRight : 0,
      bottomLeft:
        typeof props.value.value === "object"
          ? props.value.value?.bottomLeft
          : 0,
      bottomRight:
        typeof props.value.value === "object"
          ? props.value.value?.bottomRight
          : 0,
    });

    watch(
      () => radius,
      (value) => {
        emit("update:value", {
          type: value.type,
          value:
            value.type === "all"
              ? value.value
              : {
                  topLeft: value.topLeft,
                  topRight: value.topRight,
                  bottomLeft: value.bottomLeft,
                  bottomRight: value.bottomRight,
                },
          unit: value.unit,
        });
      },
      {
        deep: true
      }
    )

    return {
      radius,
      unitOptions: [
        { label: "px", value: "px" },
        { label: "%", value: "%" },
      ],
    };
  },
});
</script>

<style lang="less" scoped>
.all, .custom {
  margin-top: 10px;
}
.all {
  display: flex;
  gap: 10px;
  .ant-input-number {
    width: 256px;
  }
}
.custom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>