uniapp实现问卷多项填空

news/2024/11/15 23:49:36/文章来源:https://www.cnblogs.com/mulu777/p/18298187

产品提出了一个需求,需要实现类似问卷星的记录单,要求有单选,多选,填空,以及多项填空。前三者好实现,最后一个花费了我挺长的时间。
在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; // 返回解析后的节点数组

}`

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/742459.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编译器

本页面主要介绍了各系统下各类编译器/解释器的安装步骤。 GCC Windows 手动下载安装 访问 MinGW-w64 的下载页面,有多个构建版本。方便起见,我们使用由 WinLibs 提供的构建版本。 首先前往 WinLibs 下载最新的安装包,选择合适的版本,本文选择了 GCC 12.3.0 + LLVM/Clang/LL…

MacOS 15 Sequoia 启用允许“任何来源”应用

MacOS 15 Sequoia 新系统中,spctl --master-disabl指令被禁用,无法启用允许“任何来源”应用程序,导致每一次安装新的应用程序,需要手动在设置中允许,十分麻烦。MacOS 15 Sequoia 启用允许“任何来源”应用 spctl 无法使用 在 MacOS 15 Sequoia Beta3 系统中 spctl 命令被…

ctfshow sql-labs(笔记)

这是当时做题的时候记得笔记有些乱看不懂的可以私我 判断闭合方式: id=1’ and 1=1–+ *正常回显* id=1’ and 1=2–+ *异常回显*id=1 and 1=1 *正常回显* id=1 and 1=2 *异常回显*id=1’) and 1=1–+ 回显正常 id=1’) and 1=2–+ 回显异常id=1") and 1=1–+ 正常回显 id…

服务器(RAID1)数据丢失恢复

服务器数据恢复是指将物理服务器或虚拟服务器上丢失的数据重现还原的操作。配备服务器方便数据集中存储管理,建立信息系统。服务器上的数据通常是存储在硬盘上,出于数据安全和性能的考虑,这些硬盘会组建RAID1磁盘阵列。服务器中的数据丢失了会带来巨大损失,所以,定期对服务…

服务器异常状态怎么解决

服务器异常状态的解决方法需要根据具体的问题和故障类型来确定。 一、硬件故障 检查电源和连接: 确保电源线没有松动或损坏。 检查电源插座是否有电。 如果服务器有多个电源单元,确保它们都在正常工作。 检查内部硬件: 检查服务器的内存条是否完全插入插槽中,并且与服务器兼…

服务器(RAID)数据丢失了如何恢复?

一、评估数据丢失情况 确认数据丢失的原因:了解数据丢失的具体原因,如硬件故障、软件问题、人为错误、病毒攻击等,有助于确定合适的恢复策略。 检查RAID状态:查看RAID控制器的状态报告,了解是否有硬盘故障、RAID级别变化或其他异常情况。 二、尝试初步恢复措施 检查备份:…

【日记】京爷居然带她孩子来这个小县城学舞……(656 字)

正文今天暴晒。太阳好得就像昨天的暴雨是假的一样。昨晚睡得晚,今早困得不行。不过还是在 11:30 的时候,趁着空隙出去把信件寄了出去。感冒还是没好的样子,还是有鼻炎,还鼻塞。鼻子里面总热热的,呼出热气,感觉不太舒服。珍的工作环境好像变得恶劣了一些,祝她好运吧。有点…

什么原因会导致raid掉阵

RAID掉阵,即RAID磁盘阵列失效或无法正常工作,可能由多种原因引起。 一、硬件故障 硬盘故障: 阵列中的硬盘出现物理故障,如电路板损坏、磁头损坏、盘面损坏、坏扇区等,会导致RAID无法正常工作。这些故障可能是由于硬盘老化、使用环境恶劣(如温度过高、湿度过大)、意外碰撞…

服务器启动时发出嘀嘀声

当服务器启动时发出嘀嘀声时,这通常是硬件自检(POST,Power-On Self-Test)过程中检测到故障或问题的信号。嘀嘀声的不同模式(如长短、间隔)通常对应着不同的故障类型。 一、识别嘀嘀声的模式 记录嘀嘀声的模式:注意嘀嘀声的长短和间隔,因为不同的组合可能代表不同的硬件…

网站生成内容页提示“Table *.phome_ecms_ doesnt exist......update ***_ecms_ set havehtml=1 wher

生成内容页提示“Table *.phome_ecms_ doesnt exist......update ***_ecms_ set havehtml=1 where id= limit 1” 原因是你修改了栏目所属系统模型导致,因为栏目原来所属系统模型本身就有信息,而你改动了所属系统模型,使得这些信息无法找出所属栏目导致出错。 解决办法:修改…

服务器磁盘阵列raid1数据恢复

服务器磁盘阵列RAID1数据恢复是一个相对复杂但可行的过程,主要基于RAID1的镜像特性。RAID1中两块硬盘互为镜像,所有数据都是完全一样的,这为数据恢复提供了便利。以下是一些RAID1数据恢复的主要步骤和注意事项: 一、数据恢复步骤 检查硬件状态: 首先,检查RAID1阵列中的两…

帝国cms投稿时为什么显示非本模型的父栏目?

由于一个父栏目有可能有n种系统模型,所以系统只限制非本系统模型的终极栏目不显示。当然为了美观你也可以直接修改调用的JS文件:d/js/addinfo模型id.js本文来自博客园,作者:黄文Rex,转载请注明原文链接:https://www.cnblogs.com/hwrex/p/18298129