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 20 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
德生1994机评
2021/03/02 无线电
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
destoon各类调用汇总
2014/06/20 PHP
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
原生JS实现天气预报
2020/06/16 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
接待员岗位责任制
2014/02/10 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
幼儿园新年寄语
2014/04/03 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
助理政工师申报材料
2014/06/03 职场文书
锦旗标语大全
2014/06/23 职场文书
上课不认真检讨书
2014/09/17 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
庆六一开幕词
2015/01/29 职场文书
公司人力资源管理制度
2015/08/05 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python