GCLS_Page_Book_Component_NPC/src/components/Adult/preview/CheckBoxModule.vue

<!--  -->
<template>
    <div class="Big-Book-prev-Textdes CheckboxModule" v-if="curQue">
        <h2>{{curQue.title}}</h2>
        <el-checkbox v-model="curQue.Bookanswer[index]" v-for="(item,index) in curQue.option" :key="index" :readonly="TaskModel=='ANSWER'">{{item.con}}</el-checkbox>
    </div>
</template>

<script>
export default {
  components: {},
  props: ["curQue","TaskModel"],
  data() {
    return {
        userList: []
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
      handleData(){
          let _this = this
          let userList = []
          _this.curQue.option.forEach(item => {
              userList.push(false)
          });
          if (!this.curQue.Bookanswer) {
            this.$set(this.curQue, "Bookanswer", userList);
          }
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.handleData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.CheckboxModule{
    width: 100%;
    margin: 0;
    h2{
        margin: 8px 0;
        font-size: 16px;
        line-height: 150%;
        color: #000000;
    }
    .el-checkbox{
        width: 100%;
        margin: 4px 0;
    }
}
</style>
<style lang="scss">
.CheckboxModule{
    .el-checkbox__label,.el-checkbox__input.is-checked+.el-checkbox__label{
        color: #000000;
        font-size: 16px;
        line-height: 1.5;
        font-weight: normal;
    }
    .el-checkbox__inner{
        border-color: #4D91F6;
    }
}

</style>