跳到主要内容
版本:1.2.0

设置器扩展

如何新增一个设置器?

分析

举个🌰,需要新增一个文本设置器。

服务端

题型Schema根据《问卷业务协议规范》定义,新增题型属性即新增数据,若无属性扩展功能设置和回收数据个性化分析诉求,Server端无需开发。

前端

增加文本设置器

web/src/materials/setters/widgets目录下新增Input.vue

  • 接收formConfig作为props
  • value绑定formConfig.value的值
  • change事件触发schema更新
<template>
<el-input
:placeholder="formConfig.placeholder"
v-model="inputData"
@blur="changeData"
></el-input>
</template>
<script>
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';

export default {
name: 'Input',
props: {
formConfig: { // 接收formConfig作为props
type: Object,
required: true,
},
},
data() {
return {
inputData: this.formConfig.value || '',
};
},
watch: {
'formConfig.value': { // value绑定formConfig.value的值
handler(newVal) {
// ...
},
},
},
methods: {
changeData: function () { // change事件触发schema更新
// ...
},
},
};
</script>

使用文本设置器

为单行输入框增加内容限制格式:

image-20231025181135128

web/src/materials/questions/widgets/InputModule/meta.js 新增配置:

// 把属性值配置到题型描述文件中:
{
title: '单行输入框',
type: 'text',
componentName: 'InputModule',
formConfig: [
{
name: 'placeholder',
label: '引导提示文案',
labelStyle: {
'font-weight': 'bold',
},
type: 'Input',
placeholder: '限制20字',
key: 'placeholder',
tip: '限制20字',
}
// ...
],
}

具体可参考:题型描述协议