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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python字符串连接的N种方式总结
2014/09/17 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python保存网页图片到本地的方法
2018/07/24 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
pandas 空数据处理方法详解
2019/11/02 Python
python列表推导式操作解析
2019/11/26 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
一名女生的自荐信
2013/12/08 职场文书
酒店管理求职信范文
2014/04/06 职场文书
活动总结范文
2014/08/30 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android