产品提出了一个需求,需要实现类似问卷星的记录单,要求有单选,多选,填空,以及多项填空。前三者好实现,最后一个花费了我挺长的时间。
在pc端后台管理模板选项设置的时候,保存是将整个问题保存进去,以三个或三个以上的下划线为一个空,保存的形式例为: cm* cm*___ cm,每个空又有自己的限制
小程序用户使用的时候,我想让每个空在点击的时候变成输入框,失去焦点又变回一段话。
为此,我对保存的内容做了分隔处理,将空和文字分隔开来形成一个数组。添加类型判断,如果是空的话点击显示input框。order属性是为了回显答案时候方便替换
`// 定义一个函数 getNodes,用于解析传入的 val 对象中的 multipleQuestions 字符串
getNodes(val) {
let indStart = 0; // 初始化记录位置的索引
let indLength = 0; // 初始化记录连续下划线长度的计数器
let strLength = 0; // 初始化记录连续字符串长度的计数器
let arr = []; // 创建一个空数组,用于存放解析后的节点
// 遍历 multipleQuestions 字符串中的每一个字符
for (let i = 0; i < val.multipleQuestions.length; i++) {// 当前字符为下划线时执行以下逻辑if (val.multipleQuestions[i] === '_') {// 如果之前存在非下划线的字符串,将其添加到 arr 中if (strLength > 0) {arr.push({val: val.multipleQuestions.slice(indStart, (indStart + strLength)), // 截取字符串type: 'str', // 标记为字符串类型});strLength = 0; // 清空字符串长度计数器}// 如果 indLength 为0,说明未开始记录下划线,更新 indStart 的值if (indLength == 0) indStart = i;indLength++; // 增加下划线计数器} else {// 当前字符不是下划线时执行以下逻辑// 如果之前存在连续3个或更多下划线,创建一个输入类型的节点并添加到 arr 中if (indLength >= 3) {arr.push({val: '_'.repeat(indLength), // 生成连续的下划线type: 'input', // 标记为输入类型show: false, // 默认隐藏输入框});// 如果之前没有记录字符串,更新 indStart 的值if (strLength == 0) indStart = i;strLength++; // 增加字符串长度计数器} else if (indLength < 3 && indLength > 0) { // 处理不足3个下划线的情况strLength += indLength; // 下划线不足三个,当做文字处理,继续往下执行} else {// 如果之前没有记录字符串,更新 indStart 的值if (strLength == 0) indStart = i;strLength++; // 增加字符串长度计数器}indLength = 0; // 清空下划线计数器}// 检查是否到达字符串的末尾if (i + 1 == val.multipleQuestions.length) {// 如果存在非下划线的字符串,创建一个字符串类型的节点并添加到 arr 中if (strLength > 0) {arr.push({val: val.multipleQuestions.slice(indStart, (indStart + strLength)),type: 'str'});}// 如果存在连续的下划线,创建一个输入类型的节点并添加到 arr 中else if (indLength > 0) {arr.push({val: '_'.repeat(indLength),type: 'input',show: false,});}}
}// 为 arr 中的输入类型节点设置 order 属性
let temp = 0;
arr.forEach(item => {if (item.type == 'input') {this.$set(item, 'order', temp); // 使用 Vue 的响应式系统设置 order 属性temp++; // 自增 order 的值}
});return arr; // 返回解析后的节点数组
}`