How to make Custom selection components in Vue.js
This article mainly explains "how to make custom selection components in Vue.js". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to make custom selection components in Vue.js.
Customizing the design of select tags is very difficult. Sometimes it's not possible to build your own scripts without using a combination of stylized div and custom JavaScript.
HTML
{{selected}} {{option}}
You should pay attention to the following points:
The tabindex attribute allows our component to get focus, thus blurring it. When the user clicks outside the component, the blur event closes our component.
The input parameter emits the selected option, and the parent component can easily react to the change.
JavaScript
Export default {props: {options: {type: Array, required: true}, tabindex: {type: Number, required: false, default: 0}}, data () {return {selected: this.options.length > 0? This.options [0]: null, open: false};}, mounted () {this.$emit ('input', this.selected);}}
In addition, important things to pay attention to:
We will also issue the selected value on the mount so that the parent does not need to explicitly set the default value. If our select component is part of a larger form, then we want to be able to set up the correct tabindex.
CSS
. custom-select {position: relative; width: 100%; text-align: left; outline: none; height: 47px; line-height: 47px;} .selected {background-color: # 080D0E; border-radius: 6px; border: 1px solid # 8586; color: # ffffff; padding-left: 8px; cursor: pointer; user-select: none;} .selected.open {border: 1px solid # CE9B2C; border-radius: 6px 6px 0px 0px;} .selected:after {position: absolute; content: "; top: 22px; right: 10px; width: 0 Height: 0; border: 4px solid transparent; border-color: # fff transparent transparent transparent;}. Items {color: # ffffff; border-radius: 0px 0px 6px 6px; overflow: hidden; border-right: 1px solid # CE9B2C; border-left: 1px solid # CE9B2C; border-bottom: 1px solid # CE9B2C; position: absolute; background-color: # 080D0E; left: 0; right: 0;} .item {color: # ffffff; padding-left: 8px; cursor: pointer; user-select: none;} .item: hover {background-color: # B68A28 }. SelectHide {display: none;}
The CSS is just an example, and you can modify the style according to your needs.
At this point, I believe you have a deeper understanding of "how to make custom selection components in Vue.js". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
