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+element实现动态加载表单
Dec 13 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
python 利用toapi库自动生成api
2020/10/19 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
简洁的英文求职信范文
2014/05/03 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
入党自传范文2015
2015/06/26 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Nginx的基本概念和原理
2022/03/21 Servers
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android