Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值。这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能。
本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一圈发现很多类似的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!)。于是就想着还是自己动手写一个简单易用的,此处要感谢肥老板在我困惑时的鼎力相助。
这个 UI 元素将被用于 Common Bar Width App 中。
注册组件
通过将封装好的组件代码复制粘贴来注册全局组件。
设计的时候有考虑到输入框可能存在不同的类型,例如文本输入框,数值输入框,百分数输入框等等。所以在封装的代码中会通过函数 inputRule
来限制输入。限制的方法是利用 Regex 进行过滤。如果有其他类型,也可以通过修改 inputRule
中的过滤条件。
<script type="text/x-template" id="dropdown"> <div class="dropdown" v-if="options"> <!-- Dropdown Input --> <input :type="type" :disabled="disabled" v-model="input_value" @focus="showOptions()" @blur="exit()" @keyup="keyMonitor" @input="input_value = inputRule(type)" /> ... </script> <script> 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; }, ... </script>
调用组件
添加自定义标签调用组件。
<dropdown type = "text" :options = "text_options" :value = "text_value" :disabled = "text_disabled" @on_change_input_value = "onTextChange"> </dropdown>
传递数据
最后动态绑定数据到父级组件, 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; }, ... },
源代码
GitHub
到此这篇关于Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件的文章就介绍到这了,更多相关Vue.js 带下拉选项的输入框内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识,对js实现输入框提示相关知识感兴趣的朋友一起学习吧...2016-01-14
- 本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
- 这篇文章主要为大家详细介绍了JavaScript实现一个输入框组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-12
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 这篇文章主要为大家详细介绍了C#自定义IP输入框控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
- 这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 本文主要分享了jquery实现输入框实时输入触发事件的代码,代码简单易懂,需要的朋友一起来看下吧...2017-01-09
- 这篇文章主要介绍了vue.js实现h5机器人聊天测试版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本,下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标...2017-01-09- 第一次接触神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感兴趣的小伙伴们可以一起学习一下...2016-12-02
- 这篇文章主要介绍了Element Input输入框的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
- 这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02