Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件


Posted in Vue.js onApril 17, 2021

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

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

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

Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

注册组件

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

设计的时候有考虑到输入框可能存在不同的类型,例如文本输入框,数值输入框,百分数输入框等等。所以在封装的代码中会通过函数 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 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
CURL状态码列表(详细)
2013/06/27 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python分割和拼接字符串
2013/11/01 Python
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python 文件处理注意事项总结
2017/04/10 Python
详解python 注释、变量、类型
2018/08/10 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python文件排序的方法总结
2020/09/13 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
校园之声广播稿
2014/01/31 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
企业人事任命书
2014/06/05 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
上诉答辩状范文
2015/05/22 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书