cp_fan_components
v1.0.32
Published
用于全品服务的组件库
Downloads
41
Readme
用于全品服务的组件库
2024-2-21 1.0.32
优化，选项图片加载完成后 进行渲染选项布局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 longfill2022-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 --save2、在 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>