前言
间隔上一次记录SurveyJS的文章曾经过来大半个月了，也该完结一下子了，正好我的项目完结，抽出工夫记录一下应用SurveyJS过程中的做的一些自定义配置须要哪些办法及属性（这里依据集体我的项目须要做的一些办法总结，不蕴含全副，如有脱漏，大家可参考官网文档进行定制）
定制
1. Tab栏新增选项卡
当咱们须要新增一个选项卡
ko.components.register('info-tab-template', { template: ` <div style="width:100%"> <iframe src="/template_info/" frameborder="0" scrolling="no" width="100%" height="800px"></iframe> </div> `})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： 当官网没有记录时，咱们可返回反对核心，看看其他人是否有遇到相似的问题，官网有没有提供相应的解决方案
参考
这里放上我的项目代码以供参考
<template> <div class="surveyCreator_box"> <div id="surveyCreator"></div> </div></template><script setup lang="ts">import { onMounted, ref, reactive, watch, nextTick } from 'vue'import '@/utils/custom-locale.ts'import * as ko from 'knockout'import { SurveyCreator } from 'survey-creator-knockout'import { Serializer, Action } from 'survey-core'import { message } from 'ant-design-vue'import { useRouter } from 'vue-router'import { apiCreatorSurvey, apiSurveyId, apiUpdateSurveyInfo} from '@/service/api/survey'import LocalCache from '@/utils/cache'const router = useRouter()const id = ref(LocalCache.getCache('paperId') || '')let question_text = ref('')// 增加问题按钮是否须要暗藏let isAddItem = ref('flex')// 工具箱面板是否须要暗藏let isShowToolbox = ref('flex')// 问卷初始设置let creator = new SurveyCreator()let creatorOptions = ref({})ko.components.register('info-tab-template', { template: ` <div style="width:100%"> <iframe src="/survey_info/" frameborder="0" scrolling="no" width="100%" height="800px"></iframe> </div> `})const templatesPlugin: any = { activate: () => {}, deactivate: () => { return true }}// 新增根本信息面板onMounted(async () => { document.documentElement.style.setProperty('--primary', '#6793ff') id.value ? surveyEdit(id.value) : surveyCreate()})// Survey相干配置// 创立问卷const surveyCreate = () => { creatorOptions.value = { isAutoSave: false, haveCommercialLicense: true, readOnly: false, //整套问卷是否设置为只读模式 showSurveyTitle: false, maximumChoicesCount: 4, showSidebar: false, allowModifyPages: false, // 依据问卷是否已创立管制显示暗藏 showPreviewTab: true, showJSONEditorTab: true, showLogicTab: true, showDesignerTab: true } creator = new SurveyCreator(creatorOptions.value) creator.makeNewViewActive('templates') // 工具栏自定义 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 () { createFun(creator) } }) ) creator.addPluginTab( 'templates', templatesPlugin, '根本信息', 'info-tab-template', 0 ) creator.render('surveyCreator')}// 创立问卷const createFun = (creator: any) => { const formState = LocalCache.getCache('formState') if ( formState.title == null || formState.mode == null || formState.quTypes == [] ) { message.warn('请查看根本信息中是否有必填选项未填写') } else { apiCreatorSurvey({ ...formState, surveyJson: creator.text }).then((res) => { LocalCache.setCache('paperId', res) message.success('保留胜利') }) }}// 更新问卷const surveyEdit = async (id: any) => { const json = await apiSurveyId(id) const { mode } = json || 'DEFAULT' const config = { readOnly: false, textModifyOnly: false, notAllowQuDelete: false, notAllowQuTypeChange: false, notAllowQuAdd: false, notAllowQuKeyModify: false } const { readOnly, // 整篇只读 textModifyOnly, // 只容许文案批改信息 notAllowQuDelete, // 不容许 删除题目 notAllowQuTypeChange, // 不容许 扭转题型 notAllowQuAdd, // 不容许 新增问题 notAllowQuKeyModify // 不容许 批改问题变量名 } = config creatorOptions.value = { isAutoSave: false, haveCommercialLicense: true, readOnly: mode === 'READ_ONLY', //整套问卷是否设置为只读模式 showSurveyTitle: false, maximumChoicesCount: 4, showSidebar: !(mode === 'BUILD_IN'), allowModifyPages: !(mode === 'BUILD_IN'), // 依据问卷是否已创立管制显示暗藏 showPreviewTab: true, showJSONEditorTab: true, showLogicTab: true, showDesignerTab: true } creator = new SurveyCreator(creatorOptions.value) // 回显问卷 creator.text = json.surveyJson // 保留问卷 // creator.saveSurveyFunc = (saveNo: number, callback: any) => { // question_text.value = creator.text // apiUpdateJson(id, { surveyJson: question_text.value }).then(() => { // message.success('问卷保留胜利') // window.history.back() // callback(saveNo, true) // }) // } // 针对单项增加分数 Serializer.addProperty('itemvalue', { name: 'score', type: 'number', category: 'general', default: 0, visibleIndex: 0, onSetValue: (survey: any, value: any) => { survey.setPropertyValue('score', value) } }) // 不容许批改问题变量名（删除数据tab） creator.onPropertyGridSurveyCreated.add(function (_, options) { const dataTab = options.survey.getPanelByName('data') if (dataTab && notAllowQuKeyModify) { dataTab.delete() } }) // 流动选项卡更改时调用 creator.onActiveTabChanged.add(function (_, options) {}) /* 独自配置*/ 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 } }) // 指定装璜器可用性 creator.onElementAllowOperations.add(function (_, options) { // 整套问卷只容许批改文案信息 if (mode === 'BUILD_IN') { options.allowAddToToolbox = false // 显示或暗藏将以后考察元素配置保留在工具箱中的装璜器。 options.allowChangeType = false // 显示或暗藏更改考察元素类型的装璜器 options.allowChangeRequired = false // 显示或暗藏使问题成为必须的装璜器。 options.allowCopy = false //显示或暗藏复制考察元素的装璜器。 options.allowDelete = false // 显示或暗藏删除考察元素的装璜器 options.allowDragging = false // 显示或暗藏容许用户拖放考察元素的装璜器 // options.allowEdit = false; // 显示或暗藏容许用户在设计图面上编辑考察元素属性的装璜器。如果禁用此属性，用户只能在属性网格中编辑考察元素属性。 } notAllowQuDelete && (options.allowDelete = false) // 不容许删除题目 notAllowQuTypeChange && (options.allowChangeType = false) // 不容许扭转题型 options.allowCopy = false // 显示或暗藏容许用户复制元素的装璜器 }) // 是否容许新增问题 isAddItem.value = notAllowQuAdd || mode === 'BUILD_IN' ? 'none' : 'flex' isShowToolbox.value = notAllowQuAdd || mode === 'BUILD_IN' ? 'none' : 'flex' // 默认显示面板 // creator.makeNewViewActive('templates') // 工具栏自定义 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) } }) ) creator.addPluginTab( 'templates', templatesPlugin, '根本信息', 'info-tab-template', 0 ) creator.render('surveyCreator')}// 更新问卷const updateFun = (id: string, creator: any) => { const formState = LocalCache.getCache('formState') if ( formState.title == null || formState.mode == null || formState.quTypes == [] ) { message.warn('请查看根本信息中是否有必填选项未填写') } else { apiUpdateSurveyInfo(id, { ...formState, surveyJson: creator.text }).then( () => { message.success('保留胜利') surveyEdit(id) } ) }}</script><style lang="less" scoped>.surveyCreator_box { width: 100%; height: 100%; .button_class { margin-left: 93.5%; // margin-top: 10px; margin-bottom: 10px; } #surveyCreator { width: 100%; height: 100%; }}//是否容许新增问题::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(.svc-creator-tab__content) { min-height: 80vh;}::v-deep(.svc-flex-row) { background: none;}// 暗藏保留按钮::v-deep(#svd-save) { display: none;}</style>注： 创立问卷和编辑问卷两个函数中有很大一部分反复代码，这是因为我在利用过程中发现当问卷创立后，再对问卷的个别属性进行独自的批改，并不会发生变化，阐明其不反对Vue3下的响应式，所以每批改一次须要咱们从新赋值并执行creator.render('surveyCreator')。
代码比拟乱，大家挑着看