CheckGradesDialog 查看成绩弹窗

引入

import PressCheckGradesDialog from '@tencent/press-next/press-check-grades-dialog/press-check-grades-dialog';

export default {
  components: {
    PressCheckGradesDialog,
  }
}

代码演示

基础用法

 <PressCheckGradesDialog
  :show="dialog.show"
  :grade-list="dialog.gradeList"
  @clickClose="() => dialog.show = false"
/>

<script lang="ts" setup>
import { ref } from 'vue';

const dialog = ref({
  show: true,
  gradeList: [
    {
      title: '第一副',
      contents: ['自由A的战队 (8)'],
    }, {
      title: '第二副',
      contents: ['自由A的战队 (8)'],
    }, {
      title: '第三副',
      contents: ['自由A的战队 (8)'],
    }, {
      title: '第四副',
      contents: ['自由A的战队 (8)'],
    }, {
      title: '第五副',
      contents: ['自由A的战队 (8)'],
    }, {
      title: '级数',
      contents: ['自由A的战队 (8)', '自由A的战队 (8)'],
    }, {
      title: '级差分',
      contents: ['自由A的战队 (8)', '自由A的战队 (8)'],
    }, {
      title: '级差',
      contents: ['自由A的战队 (8)', '自由A的战队 (8)'],
    },
  ],
});
</script>

API

Props

interface Props {
  show: boolean, // 是否展示
  gradeList: Array<any>, // 成绩列表
}

const props = withDefaults(defineProps<Props>(), {
  show: true,
  gradeList: () => [],
});

Events

const emit = defineEmits<(e: 'clickClose') => void>();