shalu-dashboard-ui/components/cusForm/src/FontStyle.vue

<template>
  <div class="font-style">
    <span class="cus-btn" :class="{ 'active-btn': bold }"
      ><BoldOutlined @click="handleBold"
    /></span>
    <span class="cus-btn" :class="{ 'active-btn': italic }"
      ><ItalicOutlined @click="handleItalic"
    /></span>
    <!-- <span class="cus-btn" :class="{ 'active-btn': underline }"
      ><UnderlineOutlined @click="handleUnderline"
    /></span> -->
    <InputNumber
      size="small"
      :value="size"
      :min="12"
      :step="1"
      :precision="0"
      style="width: 80px"
      @change="handleChange"
    >
      <template #addonAfter>px</template>
    </InputNumber>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue";
import {
  BoldOutlined,
  ItalicOutlined,
  // UnderlineOutlined,
} from "@ant-design/icons-vue";
import { InputNumber } from "ant-design-vue";

const props = defineProps<{
  value: {
    size: number;
    bold: boolean;
    italic: boolean;
    // underline: boolean;
  };
}>();

const emit = defineEmits(["update:value"]);

const bold = ref(props.value?.bold);
const italic = ref(props.value?.italic);
// const underline = ref(props.value?.underline);
const size = ref(props.value?.size);

const handleUpdate = () => {
  emit("update:value", {
    size: size.value,
    bold: bold.value,
    italic: italic.value,
    // underline: underline.value,
  });
};

const handleBold = () => {
  bold.value = !bold.value;
  handleUpdate();
};
const handleItalic = () => {
  italic.value = !italic.value;
  handleUpdate();
};
// const handleUnderline = () => {
//   underline.value = !underline.value;
//   handleUpdate();
// };
const handleChange = (val: number) => {
  size.value = val;
  handleUpdate();
};
</script>

<style lang="less" scoped>
.font-style {
  display: flex;
  justify-content: space-between;
}
.active-btn {
  color: #1890ff;
}
</style>