training-wx/src/views/components/Question/Title.vue

<template>
  <div class="question-title">
    <span>{{`第${this.serialNo+1}题:`}}</span>
    <span>{{title}}</span>
    <span>({{ formatType(qType) }})</span>
  </div>
</template>

<script>
export default {
  name: 'QuestionTitle',
  props: {
    serialNo: {
      type: Number,
      required: true
    },
    qType: String,
    title: String
  },
  computed: {
    content() {
      return ` 第${this.serailNo}题: ${this.title} `
    }
  },
  methods: {
    formatType(typ) {
      switch (typ) {
        case 'radio':
          return '单选'
        case 'checkBox':
          return '多选'
        case 'textarea':
          return '简答题'
        default:
          return '未知题型'
      }
    }
  }
}
</script>


<style lang="less" scoped>
.question-title {
  margin: 1em 0;
  font-weight: 700;
  text-align-last: left;
  letter-spacing: 2px;
}
</style>