<template> <el-dialog class="topic-select-dialog" :visible.sync="modalIsShow" title="试题选择" top="10vh" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body @open="visibleChange" > <div class="topic-select-list"> <el-button v-for="(item, index) in topics" :key="index" :type="curTopic.type === item.type ? 'primary' : ''" @click="selectTopic(item)" ><i class="el-icon-plus"></i>{{ item.name }}</el-button > </div> <div slot="footer"> <el-button type="primary" @click="submit">确认</el-button> <el-button @click="cancel">取消</el-button> </div> </el-dialog> </template> <script> export default { name: "TopicSelectDialog", props: { topics: { type: Array, default() { return []; }, }, insertTopic: { type: Object, default() { return {}; }, }, }, data() { return { modalIsShow: false, curTopic: {}, }; }, methods: { visibleChange() { this.curTopic = {}; }, cancel() { this.modalIsShow = false; }, open() { this.modalIsShow = true; }, selectTopic(topic) { this.curTopic = topic; }, submit() { if (!this.curTopic.type) { this.$message.error("请选择试题类型"); return; } this.$emit("confirm", { ...this.curTopic, insertTopic: this.insertTopic, }); this.cancel(); }, }, }; </script>