union-question-web/src/components/selection/QuestionTypeSelect.vue

<template>
  <el-select
    v-model="selected"
    :clearable="clearable"
    :disabled="disabled"
    :placeholder="placeholder"
    @change="select"
  >
    <el-option
      v-for="item in QUESTION_TYPES"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    ></el-option>
  </el-select>
</template>

<script>
import { QUESTION_TYPES } from "@/constants/constants";

export default {
  name: "QuestionTypeSelect",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    disabled: { type: Boolean, default: false },
    placeholder: { type: String, default: "请选择题型" },
    clearable: { type: Boolean, default: true },
  },
  data() {
    return {
      QUESTION_TYPES,
      selected: "",
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.selected = val;
      },
    },
  },
  methods: {
    select() {
      this.$emit("input", this.selected);
      this.$emit("change", this.selected);
    },
  },
};
</script>