10,593 lecturas

Creación de un componente de selección personalizado en Vue.js [Una guía práctica]

por Lane Wagner3m2020/02/26

Demasiado Largo; Para Leer

Crear un componente de selección personalizado en Vue.js [Una guía práctica] es una guía para crear sus propios componentes de selección personalizados. En este artículo, aprenderá a crear un componente Vue.js al que se le puede aplicar estilo usando CSS completamente personalizado. El HTML es solo un ejemplo de lo que usamos para la aplicación Qvault. Siéntase libre de usar el CSS para crear sus propios componentes de selección para cambiar completamente el diseño de una etiqueta de selección. Por ejemplo, consulte la demostración en vivo para ver un ejemplo en vivo.

People Mentioned

Company Mentioned

featured image - Creación de un componente de selección personalizado en Vue.js [Una guía práctica]

Personalizar el diseño de una etiqueta de selección es muy difícil. A veces es imposible sin construir uno propio desde cero usando una combinación de divs con estilo con JavaScript personalizado. En este artículo, aprenderá a crear un componente Vue.js al que se le puede aplicar estilo usando CSS completamente personalizado.

Demostración:

el html

 < template > < div class = "custom-select" :tabindex = "tabindex" @ blur = "open = false" > < div class = "selected" :class = "{open: open}" @ click = "open = !open" > {{ selected }} </ div > < div class = "items" :class = "{selectHide: !open}" > < div class = "item" v-for = "(option, i) of options" :key = "i" @ click = "selected=option; open=false; $emit('input', option)" > {{ option }} </ div > </ div > </ div > </ template >

Es importante tener en cuenta lo siguiente:

La propiedad tabindex permite enfocar nuestro componente, lo que a su vez permite que se desenfoque. El evento de desenfoque cierra nuestro componente cuando un usuario hace clic fuera del componente.
Al emitir la opción seleccionada usando el parámetro 'entrada', el componente principal puede reaccionar fácilmente a los cambios.

el JavaScript

 <script> 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); } }; </ script >

Además, cosas importantes a tener en cuenta:

También emitimos el valor seleccionado en el montaje para que el padre no necesite establecer el valor predeterminado explícitamente. Si nuestro componente de selección es una pequeña parte de un formulario más grande, entonces queremos poder establecer el tabindex correcto.

el css

 < style scoped > .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 #858586 ; 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; } </ style >