Vue.js Textbox with Dropdown component

Vue.js Textbox with Dropdown component

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 Components

Register 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 inputRule function is used to restrict input in the encapsulated code. The limiting method is to use Regex to filter. If there are other types, you can also modify the filtering conditions in 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>

Calling Components

Add a custom label calling component.

<dropdown type = "text"
            :options = "text_options" 
            :value = "text_value"
            :disabled = "text_disabled" 
            @on_change_input_value = "onTextChange">
</dropdown>

Passing Data

Finally, dynamically bind the data to the parent component in props:

  • type: The type of the input box, currently supports text, number and percentage.
  • options: options for the input box drop-down list
  • value: the value of the input box
  • disabled: Whether to prohibit clicking the input box

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:
  • Detailed explanation of how to use the Vue.js digital input box component
  • JS imitates Alipay input text input box enlargement component example
  • JavaScript component development: input box plus candidate box
  • JS uses regular expressions to restrict the input box to only allow integers and decimals (amounts or cash) with two decimal places
  • js and jquery real-time monitoring input box value oninput and onpropertychange methods
  • js monitors the instant changes of input box values ​​​​onpropertychange, oninput
  • JS implements the method of popping up an input box on the web page
  • js dynamically modifies the type attribute of the input box (implementation method analysis)
  • js monitors the real-time changes of the input box value
  • JavaScript implements an input box component

<<:  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

Recommend

js implements the pop-up login box by clicking the pop-up window

This article shares the specific code of js to re...

CSS menu button animation

To write a drop-down menu, click the button. The ...

MySQL extracts Json internal fields and dumps them as numbers

Table of contents background Problem Analysis 1. ...

Detailed tutorial on installing and using Kong API Gateway with Docker

1 Introduction Kong is not a simple product. The ...

Vue+video.js implements video playlist

This article shares the specific code of vue+vide...

Why not use UTF-8 encoding in MySQL?

MySQL UTF-8 encoding MySQL has supported UTF-8 si...

MySQL Index Detailed Explanation

Table of contents 1. Index Basics 1.1 Introductio...

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Table of contents Environmental Description Docke...

Details about the like operator in MySQL

1. Introduction When filtering unknown or partial...

Implementation of effective user groups and initial user groups in Linux

First check the /etc/group file: [root@localhost ...

JavaScript exquisite snake implementation process

Table of contents 1. Create HTML structure 2. Cre...

How to use explain to query SQL execution plan in MySql

The explain command is the primary way to see how...

In-depth reading and practice records of conditional types in TypeScript

Table of contents Using conditional types in gene...

Practice of implementing custom search bar and clearing search events in avue

Table of contents 1. Customize the search bar con...