前言
距离上一次记录SurveyJS的文章已经过去大半个月了，也该完结一下子了，正好项目结束，抽出时间记录一下使用SurveyJS过程中的做的一些自定义配置需要哪些方法及属性（这里根据个人项目需要做的一些方法总结，不包含全部，如有遗漏，大家可参考官方文档进行定制）
定制
1. Tab栏新增选项卡
当我们需要新增一个选项卡
ko.components.register('info-tab-template', {
template: `
`
})
const templatesPlugin: any = {
activate: () => {}, // 激活时
deactivate: () => {
return true
}
}
creator.addPluginTab(
'templates', // name
templatesPlugin,
'基本信息', // title
'info-tab-template', // componentContent
0 // index
)
2. 控制Tab栏默认选项卡显示隐藏
creatorOptions.value = {
showPreviewTab: true,
showJSONEditorTab: true,
showLogicTab: true,
showDesignerTab: true
}3. 问题装饰器显示隐藏
creator.onElementAllowOperations.add(function (_, options) {
options.allowAddToToolbox = false // 显示或隐藏将当前调查元素配置保存在工具箱中的装饰器。
options.allowChangeType = false // 显示或隐藏更改调查元素类型的装饰器
options.allowChangeRequired = false // 显示或隐藏使问题成为必需的装饰器。
options.allowCopy = false //显示或隐藏复制调查元素的装饰器。
options.allowDelete = false // 显示或隐藏删除调查元素的装饰器
options.allowDragging = false // 显示或隐藏允许用户拖放调查元素的装饰器
options.allowEdit = false; // 显示或隐藏允许用户在设计图面上编辑调查元素属性的装饰器。如果禁用此属性，用户只能在属性网格中编辑调查元素属性。
})4. 工具栏新增按钮
creator.toolbarItems.push(
new Action({
id: 'custom-back',
title: '返回',
visible: true,
// enabled: true,
action: function () {
window.location.href = '/question/index'
}
})
)
creator.toolbarItems.push(
new Action({
id: 'custom-save',
title: '保存',
visible: true,
// enabled: true,
action: function () {
updateFun(id, creator)
}
})
)5. 配置问卷只读
/* 整套问卷只读 */
creatorOptions.value = {
readOnly: false, //整套问卷是否设置为只读模式
}
/* 单独配置问题属性只读*/
creator.onGetPropertyReadOnly.add(function (_, options) {
const arr = ['title', 'description', 'text']
const data = options.property
if (arr.indexOf(data.name) === -1 && mode === 'READ_ONLY') {
options.readOnly = true
}
})
6. 单项选择为每一项配置单独的分数
Serializer.addProperty('itemvalue', {
name: 'score',
type: 'number',
category: 'general',
default: 0,
visibleIndex: 0,
onSetValue: (survey: any, value: any) => {
survey.setPropertyValue('score', value)
}
})7. CSS设置显示隐藏
/* css v-bind绑定变量设置dom元素显示隐藏 */
// 是否允许新增问题
::v-deep(.svc-page__add-new-question) {
display: v-bind(isAddItem);
}
// 工具栏显示隐藏
::v-deep(svc-adaptive-toolbox) {
display: v-bind(isShowToolbox);
}
//tabs 设置按钮显示隐藏
::v-deep(#svd-settings) {
display: v-bind(isShowToolbox);
}
//tabs 属性表格展开收缩按钮显示隐藏
::v-deep(#svd-grid-expand) {
display: v-bind(isShowToolbox);
}
// 隐藏保存按钮
::v-deep(#svd-save) {
display: none;
}8. 更多配置前往官方文档
补充1： 当文档中仍然找不到自己想要的答案时，可前往演示板块查找，说不定有用的藏在这里
补充2： 当官网没有记录时，我们可前往支持中心，看看其他人是否有遇到类似的问题，官方有没有提供相应的解决方案
参考
这里放上项目代码以供参考
注： 创建问卷和编辑问卷两个函数中有很大一部分重复代码，这是因为我在应用过程中发现当问卷创建后，再对问卷的个别属性进行单独的修改，并不会发生变化，说明其不支持Vue3下的响应式，所以每修改一次需要我们重新赋值并执行creator.render('surveyCreator')。
代码比较乱，大家挑着看