带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值。这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能。

本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一圈发现很多类似的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!)。于是就想着还是自己动手写一个简单易用的,此处要感谢肥老板在我困惑时的鼎力相助。

这个 UI 元素将被用于 Common Bar Width App 中。

注册组件

通过将封装好的组件代码复制粘贴来注册全局组件。

设计的时候有考虑到输入框可能存在不同的类型,例如文本输入框,数值输入框,百分数输入框等等。所以在封装的代码中会通过函数 inputRule 来限制输入。限制的方法是利用 Regex 进行过滤。如果有其他类型,也可以通过修改 inputRule 中的过滤条件。

:disabled="disabled"

v-model="input_value"

@focus="showOptions()"

@blur="exit()"

@keyup="keyMonitor"

@input="input_value = inputRule(type)" />

...

Vue.component('dropdown', {

template: '#dropdown',

props: {

type: String,

options: Array,

disabled: Boolean,

value: String

},

...

methods: {

inputRule:function(type){

var value;

switch(type){

case 'text':

value = this.input_value.replace(/[^a-zA-Z0-9]/g,'');

break;

case 'number':

value = this.input_value.replace(/^(?![+-]?\d+(\.\d+)?$)/g,'');

break;

case 'percentage':

value = this.input_value.replace(/[^\d]/g,'');

value = value > 100 ? '100' : value;

value = value < 0 ? '0' : value;

break;

default:

console.log("no limitation");

}

return value;

},

...

调用组件

添加自定义标签调用组件。

:options = "text_options"

:value = "text_value"

:disabled = "text_disabled"

@on_change_input_value = "onTextChange">

传递数据

最后动态绑定数据到父级组件, props 中:

type: 输入框的类型,现支持 text, number 和 percentage。

options: 输入框下拉列表的选项

value: 输入框的值

disabled: 是否禁止点击输入框

另外我们还需要在父级实例中定义事情,用于更新输入框的值

on_change_input_value: 更新值

data: function () {

return {

text_value: 'ccc',

text_disabled: false,

text_options: [

{ id: 1, name: 'a' },

{ id: 2, name: 'bb' },

{ id: 3, name: 'ccc' },

{ id: 4, name: 'dddd' },

{ id: 5, name: 'eeeee' },

{ id: 6, name: 'fffff ' },

{ id: 7, name: 'gggggg' },

{ id: 8, name: 'hhhhhhh' },

{ id: 9, name: 'iiiiiiii' },

],

...

}

},

...

methods: {

onTextChange: function (new_text_value) {

this.text_value = new_text_value;

},

...

},

源代码

到此这篇关于Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件的文章就介绍到这了,更多相关Vue.js 带下拉选项的输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件相关推荐

  1. 导出带下拉选项的Excel基于EasyExcel实现

    前言 今天就是记录一个计算点而已,帮小组成员搽屁股改bug.场景就是导出Excel的模板,希望枚举字段有下拉选择. 一.技术选型场景 我们这里用的是阿里开源的EasyExcel,导出模板是后端动态生成 ...

  2. listView中带下拉框和输入框如何获取值

    一:布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...

  3. html JS实现下拉菜单,vue.js怎么实现下拉框

    本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现下拉框的方法: www.php.cn vue下拉框 {{x.name}}{{x.famname}} {{on ...

  4. html 下拉列表 模糊查询,JS实现模糊查询带下拉匹配效果

    "搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮 ...

  5. vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...

    vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdo ...

  6. 个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码

    HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码 作品介绍 下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...

  7. chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值 ,chosen 实现远程搜索加载下拉选项

    chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...

  8. 个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...

    HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码 作品介绍 下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...

  9. Js判断下拉框是否为空值

    <title>Js判断下拉框</title> <script> function ss(){ var slt=document.getElementById(&qu ...

最新文章

  1. 计算机组成原理设计性实验,《计算机组成原理》设计性实验报告.doc
  2. matlab简单程序实例_【简单实例】如何使用C++加速python程序
  3. 计算机考研一些常纹面试知识,2020年光学工程考研复试真题和技巧
  4. mysql批量插入 增加参数_MySql 的批量操作,要加rewriteBatchedStatements参数
  5. Win7下OpenCV3.2.0+VS2015配置
  6. 为你解惑之WPF经典9问详解
  7. 使用Groovy将一段代码动态构造成一个类的方法
  8. 数据恢复工具FinalData
  9. 数电笔记:触发器的基础知识
  10. 那种语言不属于w3c标准,前端之W3C标准及规范
  11. 鸽了亿下下的游记——2022 GDOI普及组游记
  12. c语言课程设计(图书馆管理系统)
  13. 提升汽车APP用户体验,火山引擎APMPlus的“独家秘笈”
  14. 信用评分卡Credit Scorecards (1-7)
  15. 短时傅里叶变换(STFT)实例
  16. Cloudera是个什么东西
  17. 2010年度先进单位、先进个人、优秀辅导教师名录
  18. (Golang)外观模式 VS 工厂模式
  19. linux crash,系统崩溃 - crash工具介绍
  20. 【附源码】计算机毕业设计java校园舆情监控系统设计与实现

热门文章

  1. B. Number Busters
  2. 贪吃蛇()C++实现
  3. 已解决-Office365邮箱默认的保存时长策略最长只有6个月
  4. 操作系统虚拟地址计算物理地址
  5. 常用的笔记本电脑快捷键【回顾总结】
  6. Vue 3 迁移策略笔记—— 第22节:Slots 的统一
  7. oslo config
  8. php yii框架路由,yii框架的路由在哪里看
  9. 不要忽略被大牌覆盖掉的埃布埃们
  10. 启智平台发布联邦学习开源数据协作项目 OpenI 纵横