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

<!--  -->
<template>
  <div
    class="Big-Book-prev-Textdes CheckboxModule"
    v-if="curQue"
    :class="[isPhone ? 'CheckboxModule-phone' : '']"
  >
    <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", "isPhone"],
  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;
  }
}
.CheckboxModule-phone {
  .el-checkbox {
    display: flex;
    align-items: flex-start;
  }
  .el-checkbox__label {
    white-space: normal;
    word-break: break-word;
  }
  .el-checkbox__input {
    margin-top: 5px;
  }
}
</style>