A Textbox with Dropdown allows users to select an input from a drop-down list or type the input value freely. This is a relatively common UI element. It can provide users with alternative options to save operation time, and it can also provide adaptation possibilities for possible minority situations. I originally thought that this component is quite common and there should be many ready-made examples that can be directly applied. However, after searching around, I found that many similar components have too many functions, such as search, multiple selection, etc. (In short: too complicated!). So I thought I should write a simple and easy-to-use one myself. I would like to thank Mr. Fei for his great help when I was confused. This UI element will be used in the Common Bar Width App. Registering ComponentsRegister the global component by copying and pasting the encapsulated component code. When designing, it was considered that there may be different types of input boxes, such as text input boxes, numeric input boxes, percentage input boxes, etc. Therefore, the <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> Calling ComponentsAdd a custom label calling component. <dropdown type = "text" :options = "text_options" :value = "text_value" :disabled = "text_disabled" @on_change_input_value = "onTextChange"> </dropdown> Passing DataFinally, dynamically bind the data to the parent component in props:
In addition, we also need to define things in the parent instance to update the value of the input box on_change_input_value: Update 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; }, ... }, source code GitHub This is the end of this article about the Vue.js Textbox with Dropdown component. For more information about the Vue.js Textbox with Dropdown component, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Centos 7.4 server time synchronization configuration method [based on NTP service]
>>: In-depth understanding of the matching logic of Server and Location in Nginx
This article shares the specific code of js to re...
To write a drop-down menu, click the button. The ...
Enter Alibaba vector icon library Alibaba Vector ...
Table of contents background Problem Analysis 1. ...
1 Introduction Kong is not a simple product. The ...
This article shares the specific code of vue+vide...
MySQL UTF-8 encoding MySQL has supported UTF-8 si...
Table of contents 1. Index Basics 1.1 Introductio...
Table of contents Environmental Description Docke...
1. Introduction When filtering unknown or partial...
First check the /etc/group file: [root@localhost ...
Table of contents 1. Create HTML structure 2. Cre...
The explain command is the primary way to see how...
Table of contents Using conditional types in gene...
Table of contents 1. Customize the search bar con...