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

<template>
  <div class="font-style">
    <Button size="small" @click="handleShowColorPicker">
      <span class="cus-btn"
        ><FontColorsOutlined />
        <div class="color-block" :style="{ background: color }"></div>
        <ElColorPicker
          ref="colorPckerRef"
          style="width: 0; height: 0; opacity: 0"
          v-model:value="color"
          @change="handleColorChange"
        >
        </ElColorPicker>
      </span>
    </Button>

    <Button size="small" @click="handleBold">
      <span class="cus-btn" :class="{ 'active-btn': bold }"
        ><BoldOutlined 
      /></span>
    </Button>

    <Button size="small"  @click="handleItalic">
      <span class="cus-btn" :class="{ 'active-btn': italic }"
        ><ItalicOutlined
      /></span>
    </Button>

    <InputNumber
      size="small"
      :value="size"
      :min="12"
      :step="1"
      :precision="0"
      style="width: 80px;"
      @change="handleValueChange"
    >
      <template #addonAfter>px</template>
    </InputNumber>
  </div>
</template>

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

const props = defineProps<{
  value: {
    size: number;
    bold: boolean;
    italic: boolean;
    color: string;
  };
}>();
const emit = defineEmits(["update:value"]);

const bold = ref(props.value?.bold);
const italic = ref(props.value?.italic);
const size = ref(props.value?.size);
const color = ref(props.value?.color);
const colorPckerRef = ref<InstanceType<typeof ElColorPicker>>();

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

const handleBold = () => {
  bold.value = !bold.value;
  handleUpdate();
};
const handleItalic = () => {
  italic.value = !italic.value;
  handleUpdate();
};
const handleColorChange = (val: string) => {
  color.value = val;
  handleUpdate();
};
const handleValueChange = (val: number) => {
  size.value = val;
  handleUpdate();
};
const handleShowColorPicker = () => {
  colorPckerRef.value?.show();
};
</script>

<style lang="less" scoped>
.font-style {
  display: flex;
  justify-content: space-between;
}
.active-btn {
  color: #1890ff;
}
.color-block {
  width: 1em;
  height: 2px;
  position: absolute;
  left: 4px;
  bottom: 4px;
  border: solid 1px #666;
}
:deep(.ant-btn) {
  margin-right: 2px;
  padding: 0 4px;
}
:deep(.el-color-picker__trigger) {
  display: none;
}
</style>