GCLS_Page_Book_Component_NPC/src/components/Adult/common/SelfAssessmentModule.vue

<!--  -->
<template>
  <div class="Big-Book-single">
    <div class="Big-Book-content m">
      <div class="Big-Book-main">
        <div class="adult-book-input-item">
          <span class="adult-book-lable">选项内容：</span>
          <el-input
            class="adult-book-input"
            :autosize="{ minRows: 2 }"
            type="textarea"
            placeholder="请输入内容"
            v-model="curQueItem.con"
            @blur="curQueItem.con = curQueItem.con.trim()"
            maxlength="200"
            show-word-limit
          ></el-input>
          <el-checkbox
            style="margin-left: 7px"
            @change="changeIsAnswer"
            v-model="curQueItem.isAnswer"
            :label="index"
            >答案</el-checkbox
          >
          <!-- <div class=""></div> -->
          <img
            @click="deleteOption"
            class="close"
            src="../../../assets/adult/del-close.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: {
    Upload,
  },
  props: ["curQueItem", "index", "changAnswer", "deleteOptionOne", "type"],
  data() {
    return {
      imgNumber: 10,
      mp3Number: 10,
      fileCon: {
        timu_img_list: [],
        timu_mp3_list: [],
        img_list: [],
        mp3_list: [],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteOptionOne(this.index);
      });
    },
    //   修改正确答案
    changeIsAnswer() {
      this.changAnswer(this.index);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQueItem) {
      this.fileCon.img_list = this.curQueItem.img_list;
      this.fileCon.mp3_list = this.curQueItem.mp3_list;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-single {
  .Big-Book-content {
    &.m {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .Big-Book-con {
      display: flex;
      align-items: center;
    }
    .Big-Book-title {
      font-size: 16px;
      line-height: 40px;
      color: #000;
      margin-right: 15px;
    }
    .Big-Book-main {
      position: relative;
      width: 100%;
      > div {
        margin-bottom: 10px;
        &.Big-Book-pinyin,
        &.Big-Book-con,
        &.Big-Book-en {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
      .close {
        position: relative;
        top: -4px;
        cursor: pointer;
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>