• 售前

  • 售后

热门帖子
入门百科

Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

[复制链接]
封号955 显示全部楼层 发表于 2021-10-26 13:26:20 |阅读模式 打印 上一主题 下一主题
带下拉选项的输入框 (Textbox with Dropdown) 是既答应用户从下拉列表中选择输入又答应用户自由键入输入值。这算是比力常见的一种 UI 元素,可以为用户提供候选项节流操纵时间,也可以给大概存在的少数情况提供适配的大概。
本来想着这个组件比力常见应该已经有比力多现成的例子可以直接应用,但是搜索了一圈发现许多雷同的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!)。于是就想着还是本身动手写一个简单易用的,此处要感谢肥老板在我狐疑时的鼎力相助。
这个 UI 元素将被用于 Common Bar Width App 中。

注册组件

通过将封装好的组件代码复制粘贴来注册全局组件。
计划的时候有思量到输入框大概存在不同的范例,例如文本输入框,数值输入框,百分数输入框等等。所以在封装的代码中会通过函数
  1. inputRule
复制代码
来限定输入。限定的方法是利用 Regex 举行过滤。如果有其他范例,也可以通过修改
  1. inputRule
复制代码
中的过滤条件。
  1. <script type="text/x-template" id="dropdown">
  2.     <div class="dropdown" v-if="options">
  3.         <!-- Dropdown Input -->
  4.         <input  :type="type"
  5.                 :disabled="disabled"
  6.                 v-model="input_value"
  7.                 @focus="showOptions()"
  8.                 @blur="exit()"
  9.                 @keyup="keyMonitor"
  10.                 @input="input_value = inputRule(type)" />
  11. ...
  12. </script>
  13. <script>
  14.     Vue.component('dropdown', {
  15.         template: '#dropdown',
  16.         props: {
  17.             type: String,
  18.             options: Array,
  19.             disabled: Boolean,
  20.             value: String
  21.         },
  22. ...
  23.         methods: {
  24.             inputRule:function(type){
  25.                 var value;
  26.                 switch(type){
  27.                     case 'text':
  28.                         value = this.input_value.replace(/[^a-zA-Z0-9]/g,'');
  29.                         break;
  30.                     case 'number':
  31.                         value = this.input_value.replace(/^(?![+-]?\d+(\.\d+)?$)/g,'');
  32.                         break;
  33.                     case 'percentage':
  34.                         value = this.input_value.replace(/[^\d]/g,'');
  35.                         value = value > 100 ? '100' : value;
  36.                         value = value < 0 ? '0' : value;
  37.                         break;
  38.                     default:
  39.                         console.log("no limitation");
  40.                 }
  41.                 return value;
  42.             },
  43. ...
  44. </script>
复制代码
调用组件

添加自定义标签调用组件。
  1. <dropdown   type = "text"
  2.             :options = "text_options"
  3.             :value = "text_value"
  4.             :disabled = "text_disabled"
  5.             @on_change_input_value = "onTextChange">
  6. </dropdown>
复制代码
传递数据

最后动态绑定命据到父级组件, props 中:
       
  • type: 输入框的范例,现支持 text, number 和 percentage。   
  • options: 输入框下拉列表的选项   
  • value: 输入框的值   
  • disabled: 是否克制点击输入框
别的我们还必要在父级实例中定义事情,用于更新输入框的值
on_change_input_value: 更新值
  1. data: function () {
  2.     return {
  3.         text_value: 'ccc',
  4.         text_disabled: false,
  5.         text_options: [
  6.             { id: 1, name: 'a' },
  7.             { id: 2, name: 'bb' },
  8.             { id: 3, name: 'ccc' },
  9.             { id: 4, name: 'dddd' },
  10.             { id: 5, name: 'eeeee' },
  11.             { id: 6, name: 'fffff ' },
  12.             { id: 7, name: 'gggggg' },
  13.             { id: 8, name: 'hhhhhhh' },
  14.             { id: 9, name: 'iiiiiiii' },
  15.         ],
  16.         ...
  17.     }
  18. },
  19. ...
  20. methods: {
  21.     onTextChange: function (new_text_value) {
  22.         this.text_value = new_text_value;
  23.     },
  24. ...
  25. },
复制代码
源代码
GitHub
到此这篇关于Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件的文章就介绍到这了,更多相关Vue.js 带下拉选项的输入框内容请搜索脚本之家从前的文章或继承欣赏下面的相关文章盼望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作