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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
详解vue中axios的封装
2018/07/18 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python操作gmail实例
2015/01/14 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python分支结构(switch)操作简介
2018/01/17 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
周年庆典答谢词
2015/01/20 职场文书