cp_fan_components v1.0.24

用于全品服务的组件库

• 全品试题试卷渲染组件的使用
• 试题的渲染
• 试卷的渲染
• 试题试卷数据结构样例
• 试题内容样式处理-必须使用

2024-2-21 1.0.24

英语完型填空优化

2023-11-13 1.0.23

优化四选二类 作为小题的渲染

2023-5-25 1.0.22

小题 的序号优先根据 该小题的questionNum 显示， 如果小题无questionNum，则默认显示小题序号

2023-5-9 1.0.21

优化显示

2023-3-2 1.0.19

可以分别显示 Knowledge 和 Explain 样式更新

2023-3-2 1.0.17

QuestionItem 去掉 无用的:showAttr="showAttr"

2022-12-5 1.0.16

增加 32 和 33 听力模板

2022-12-5 1.0.15

试题试卷数据结构样例

更新： 查看 试题或试卷 的数据结构 let question = require('cp_fan_components/assets/data/question.json') let paper = require('cp_fan_components/assets/data/paper.json') console.log(question,paper)

试题 预览的样例和 json 数据 试题 json 数据： cp_fan_components/assets/data/question.json 试题 样例的组件

试卷 预览的样例和 json 数据 试卷 json 数据： cp_fan_components/assets/data/paper.json 试卷 样例的组件

2022-12-5 1.0.13

样式处理

question_style.css 用于显示试题内容中的特殊样式（填空框，波浪线等） 在 main 中引入 import 'cp_fan_components/assets/css/question_style.css'

非 vue 环境的 也可以自己拷贝出来使用 cp_fan_components/assets/css 下面 question_style.css 和 edit 文件夹

2022-10-15 1.0.12

删除多余的 showRegion 属性

2022-9-2 1.0.11

增加属性的插槽
<QuestionItem
    :ques="ques"
    :showQuestionNum="true"
    :questionIndex="1"
    :showKnowledge="true"
    :showExplain="true"
    @toggleExplain="toggleExplain"
    >
    <template v-slot:quesAttribute="slotProps">
        <div class="item">
        {{ slotProps.data.questionId }}
        </div>
    </template>
</QuestionItem>

data ：是传入的试题属性

$filter 改成 $cp_filter
删除多余的组件 app-login  longfill

2022-8-4 1.0.6

更新听力-填空题 小题题干的显示规则

试题内容的公共样式

http://static-file-01-cdn.canpoint.cn/tiku/img/question_style.css?t=20201022
放入 index.html
<link rel="stylesheet" href="http://static-file-01-cdn.canpoint.cn/tiku/img/question_style.css?t=20201022" />
# 无法引入  用销售提供的样式  (1.0.13 版本后 解决了这个问题)
在 main 中引入
import 'cp_fan_components/assets/css/question_style.css'

全品试题试卷渲染组件的使用

1、先安装 组件库

npm i cp_fan_components --save

2、在 main.js 加入

import CpFanComponents from 'cp_fan_components'
Vue.use(CpFanComponents)

试题的渲染

3、在需要加入的页面中

<QuestionItem
    :ques="ques"
    :showQuestionNum="true"
    :questionIndex="1"
    :showKnowledge="true"
    :showExplain="true"
    @toggleExplain="toggleExplain"
    ></QuestionItem>

参数描述

ques :单个试题对象 基本结构
{
    questionId: '8f06016e-3f7a-4e99-9d2e-3d5e41f595f4',
    source: 1,
    stageSubject: { code: '1313', name: '高中英语' },
    context: {
        stem: '题干内容',
        audio: null,
        original_text: null,
        options: null,
    },
    quesType: { code: '24', name: '阅读理解' },
    quesStruct: { code: '16', name: '多小题模板' },
    knowledge:[],
    children:[]
}

showQuestionNum: 是否显示 试题编号
questionIndex: 试题编号
showKnowledge: 是否显示 知识点
showExplain: 是否显示答案解析

事件：

toggleExplain：添加题干事件
this.$emit('toggleExplain', this.ques, questionIndex)

slot 插槽

试题属性部分 增加 quesAttribute 的插槽
用户可重新定义 【考点】 部分
例子：
<QuestionItem
    :ques="ques"
    :showQuestionNum="true"
    :questionIndex="1"
    :showKnowledge="true"
    :showExplain="false"
    @toggleExplain="toggleExplain"
    >
    <template v-slot:quesAttribute="slotProps">
        <div class="item">
        {{ slotProps.data.questionId }}
        </div>
    </template>
</QuestionItem>

试卷的渲染

<CpPaperBody :paperStructure="paperData.paperStructure">
    <template #question="{ ques }">
    <div class="question-item">
        <div class="question-type-difficulty clearfix">
        <span class="item"
            >题型：<em class="">{{
            ques.questionInfo.quesType | isEmptyObject('name')
            }}</em></span
        >
        <span class="item"
            >预估难度：<em class="">{{
            ques.questionInfo.difficulty | isEmptyObject('name')
            }}</em></span
        >
        </div>
        <div class="question-item-body">
        <QuestionItem
            :ques="ques.questionInfo"
            :showQuestionNum="true"
            :questionIndex="ques.questionNum"
            :showKnowledge="false"
        ></QuestionItem>
        </div>
    </div>
    </template>
    <template #segment="{ segment }">
        <PaperSegmentName :ques="segment"></PaperSegmentName>
    </template>
</CpPaperBody>

试卷插槽

<template #segment="{ segment }">
试卷大题和分卷 插槽
segment：为大题或者分卷的 节点数据
PaperSegmentName 为插槽渲染的一个样例
路径 ：cp_fan_components/CpFan/example/PaperSegmentName

<template #question="{ ques }">
试卷里面的试题 插槽
ques：为 试题详情数据

试卷结构的处理方法

// 源码地址 ：cp_fan_components/CpFan/example/CpPaperDetail
<script>
  import PaperSegmentName from './PaperSegmentName.vue'
  export default {
    components: { PaperSegmentName },
    data() {
      return {
        paperRes: require('../../assets/data/paper.json'),
        paperData: null,
      }
    },
    mounted() {
      if (this.paperRes.code === 200) {
        this.executePaperList(this.paperRes.data)
      }
    },
    methods: {
      executePaperList(arrList) {
        let stack = [...arrList.paperStructure]
        let questionNum = 0
        while (stack.length) {
          let item = stack.shift()
          if (!item.questionId) {
            let hasQues = false
            if (item.children && item.children.length) {
              item.children.forEach((subItem) => {
                if (subItem.questionId) {
                  hasQues = true
                }
              })
              item.hasQues = hasQues
              stack.unshift(...item.children)
            } else {
              item.hasQues = hasQues
            }
          } else {
            questionNum = questionNum + 1
            item.questionNum = questionNum
            item.showQuestionNum = true
            item.source = item.questionInfo.source
            item.isAddedToBox = item.questionInfo.isAddedToBox
            item.isCollected = item.questionInfo.isCollected
            item.canCollect = item.questionInfo.canCollect
          }
        }
        arrList.paperIdEnc = this.paperIdEnc
        this.paperData = arrList
        //  过滤html标签
        document.title = this.HTMLDecode(arrList.paperName) || '全品题舟'
      },
      HTMLDecode(text) {
        var temp = document.createElement('div')
        temp.innerHTML = text
        var output = temp.innerText || temp.textContent
        temp = null
        return output
      },
    },
  }
</script>