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监听滚动事件的方法
Dec 21 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
php网站地图生成类示例
2014/01/13 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
ThinkPHP控制器详解
2015/07/27 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
python实现字典嵌套列表取值
2019/12/16 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
理财投资建议书
2014/03/12 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
写景作文评语集锦
2014/12/25 职场文书
小爸爸观后感
2015/06/15 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
python控制台打印log输出重复的解决方法
2021/05/14 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电