teachcloud-print-web/card/components/common/CardNameEdit.vue

<template>
  <div class="card-name-edit">
    <div class="style-edit mb-2">
      <el-button
        size="small"
        :type="isBold ? 'primary' : 'default'"
        @click="boldChange"
        >B</el-button
      >
      <size-select
        v-model="modalForm.nameFontSize"
        :predefine="PREDEFINE_OPTIONS"
        class="ml-2 escape"
        @change="emitChange"
      >
      </size-select>
    </div>
    <el-input
      v-model="modalForm.topicName"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 5 }"
      resize="none"
      placeholder="请输入题目名称"
      clearable
      :style="styles"
      @input="emitChange"
    ></el-input>
  </div>
</template>

<script>
import { objAssign } from "../../plugins/utils";
import SizeSelect from "./SizeSelect.vue";

const initModalForm = {
  topicName: "",
  nameFontSize: "14px",
  nameFontWeight: 400,
};

export default {
  name: "CardNameEdit",
  components: { SizeSelect },
  props: {
    value: {
      type: Object,
      default() {
        return {
          topicName: "",
          nameFontSize: "14px",
          nameFontWeight: 400,
        };
      },
    },
  },
  data() {
    return {
      modalForm: { ...initModalForm },
      PREDEFINE_OPTIONS: [
        {
          value: "14px",
          label: "小",
        },
        {
          value: "18px",
          label: "中",
        },
        {
          value: "21px",
          label: "大",
        },
      ],
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.initData(val);
      },
    },
  },
  computed: {
    isBold() {
      return this.modalForm.nameFontWeight === 700;
    },
    styles() {
      return {
        fontWeight: this.modalForm.nameFontWeight,
        fontSize: this.modalForm.nameFontSize,
      };
    },
  },
  methods: {
    initData() {
      this.modalForm = objAssign(initModalForm, this.value);
    },
    boldChange() {
      this.modalForm.nameFontWeight = this.isBold ? 400 : 700;
      this.emitChange();
    },
    emitChange() {
      const val = objAssign(this.value, this.modalForm);
      this.$emit("input", val);
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="scss">
.card-name-edit textarea {
  font-weight: inherit;
}
</style>