fe-manage/src/components/student/ChangeLevelModal.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-12-20 17:00:37
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-20 17:59:40
 * @FilePath: /fe-manage/src/components/student/ChangeLevelModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal
    style="padding: 0"
    :closable="sh"
    :visible="visiblene"
    :footer="null"
    centered="true"
    wrapClassName="changeModal"
  >
    <div class="con">
      <div class="header">
        <div class="inhe">
          <div class="mod"></div>
          <div class="tz">调整关卡</div>
          <div class="mg" @click="closeChangeModal"></div>
        </div>
      </div>
      <div class="mid">
        <div class="inher">
          <!-- <div class="cur">当前关卡：关卡2</div> -->
          <div class="select">
            <a-select
              v-model:value="curLevel"
              style="width: 100%"
              placeholder="请选择关卡"
              :options="projectNameList4"
              @change="selectProjectName4"
              allowClear
              showSearch
            ></a-select>
          </div>
          <div class="btn">
            <button
              class="sameb btn1"
              @click="closeChangeModal"
              style="cursor: pointer"
            >
              取消
            </button>
            <button
              class="sameb btn2"
              @click="changelevel"
              style="cursor: pointer"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: "ChangeLevelModal",
  props: {
    visiblene: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const closeChangeModal = () => {
      ctx.emit("update:visiblene", false);
    };
    const changelevel = () => {
      console.log("点击调整关卡");
    };
    //获取关卡列表

    return {
      closeChangeModal,
      changelevel,
    };
  },
};
</script>