首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue - 使用vue实现自定义多选与单选的答题功能

    本来实现多选单选这个功能,vue组件中在表单方面提供了一个v-model指令,非常的善解“猿”意, 能把我们的多选单选功能很完美且很强大得双向绑定起来,实现多选、单选、任意选...根本不在话下。...第三个多选记录选项功能问题搞定。 第四个问题是,既然多选记录搞定了,那么单选呢,也应该在每次点击的时候搞定他吧?那是自然!...就还是强大的ref登场,规则和选择多选一样,只不过不用for循环。你是不是已经想到了啊哈! 对的,每次单选点的是哪个就li,截取当前li内部文本的第一个字符,也就是ABC or D啊 this....这当然不可以了,直接点击事件就放开下一题按钮,在单选场景下是通的。但是多选的时候我们还要再防御一层。...会是动态改变的, //如果一个也没选择,多选也好单选也罢,这个字符串肯定是空的,故而判断长度小于0就不让他提交!

    4.2K20

    vue封装带提示框的单选多选文本框组件

    vue封装带提示框的单选/多选文本框组件 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email...在最近的vue+element的前端项目中,需要实现动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项选中,可以将选择的选项的key...例如,使用带输入建议的input组件,能够实现提示框和单选,但并不能方便地实现多选(若重复选择会覆盖输入框内的内容)。...[3okjp0yr16.png] 再加上设计上需要实现三列布局,最终的返回结果需要动态拼装选项key值,虽然需求不复杂,但若对现有的element组件进行改造成本过高,因此,尝试封装带提示框的单选/多选文本框组件...组件应用与改进 带提示框的单选/多选文本框组件的应用场景除了本项目的需求,还可以应用于企业联系人选择器等,用户输入用户名关键词,提示框显示相关联系人,同时允许用户自由输入用户名。

    5.7K403

    vue封装带提示框的单选多选文本框组件

    在最近的vue+element的前端项目中,需要实现动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项选中,可以将选择的选项的key...例如,使用带输入建议的input组件,能够实现提示框和单选,但并不能方便地实现多选(若重复选择会覆盖输入框内的内容)。 ?...而使用框架提供的select选择器的搜索建议或远程搜索功能,虽然能够实现提示框,也能轻松实现单选与多选,但用户自由输入内容较为繁琐,即使开启了自定义输入,输入内容也是作为自定义选项存在,不能方便地实现字符串拼接效果...再加上设计上需要实现三列布局,最终的返回结果需要动态拼装选项key值,虽然需求不复杂,但若对现有的element组件进行改造成本过高,因此,尝试封装带提示框的单选/多选文本框组件,记录下封装过程中组件交互方面遇到的问题...组件应用与改进 带提示框的单选/多选文本框组件的应用场景除了本项目的需求,还可以应用于企业联系人选择器等,用户输入用户名关键词,提示框显示相关联系人,同时允许用户自由输入用户名。 ?

    8.3K30

    《刚刚问世》系列初窥篇-Java+Playwright自动化测试-27- 操作单选和多选按钮 - 上篇(详细教程)

    我们在实际工作中进行自动化测试的过程中,必须要学会处理这种单选和多选的情况。在实际自动化测试过程中,我们同样也避免不了会遇到单选和多选的测试,特别是调查问卷或者是答题系统中会经常碰到。...单选按钮的点击,一样是使用click方法。多选按钮,就是复选框,一般叫checkbox,就像我们在电子版的多选答题过程一样,可以选择多个选项,多选按钮的点击,同样是使用click方法。...checkbox多选框,playwright提供了一些处理单选框以及多选框的方法。...4.PlayWright选择操作 playwright提供了一些处理单选框以及多选框的方法,如下: locator.click(); 点击操作 locator.check(); 选中 locator.uncheck...+Playwright自动化测试-27- 操作单选和多选按钮 - 上篇(详细教程) * * 2024年11月01日 */ public class Test_Radio { public

    22720

    《刚刚问世》系列初窥篇-Java+Playwright自动化测试-28- 操作单选和多选按钮 - 中篇(详细教程)

    1.简介 上一篇中宏哥讲解和介绍的单选框知识和理论有点多,多选按钮基本没有介绍。要不时由于时间的关系,估计宏哥还得侃侃而谈,所以宏哥今天决定今天讲解和分享复选框(多选按钮)的相关知识。...单选按钮的点击,一样是使用click方法。多选按钮,就是复选框,一般叫checkbox,就像我们在电子版的多选答题过程一样,可以选择多个选项,多选按钮的点击,同样是使用click方法。...checkbox多选框,playwright提供了一些处理单选框以及多选框的方法。...4.PlayWright选择操作 playwright提供了一些处理单选框以及多选框的方法,如下: locator.click(); 点击操作 locator.check(); 选中 locator.uncheck...+Playwright自动化测试-28- 操作单选和多选按钮 - 中篇(详细教程) * * 2025年01月26日 */ public class Test_Radio { public

    14020
    领券