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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
根德YB400的电路分析
2021/03/02 无线电
十天学会php之第三天
2006/10/09 PHP
PHP基础学习小结
2011/04/17 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
Python类属性与实例属性用法分析
2015/05/09 Python
python计算时间差的方法
2015/05/20 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python实现图片中文字分割效果
2019/07/22 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
自我评价范文点评
2013/12/04 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
品质标语大全
2014/06/21 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
环保建议书范文
2015/09/14 职场文书
创业的9条正确思考方式
2019/08/26 职场文书