![featured image - Creación de un componente de selección personalizado en Vue.js [Una guía práctica]](https://hackernoon.imgix.net/images/ch8p83yfa.jpg?auto=format&fit=max&w=2048)
Jan 01, 1970
10,420 lecturas
Creación de un componente de selección personalizado en Vue.js [Una guía práctica]
ES
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
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 >Este CSS es solo un ejemplo, es lo que usamos para la aplicación Qvault . Siéntase libre de cambiar completamente el estilo según sus necesidades.
Espero que esto le ayude a crear sus propios componentes de selección personalizados, el siguiente es un enlace a la esencia del componente completo:
Una vez más, echa un vistazo a la demostración para ver un ejemplo en vivo:
Por Lane Wagner @wagslane
Descarga Qvault: https://qvault.io
Destaca nuestro Github: https://github.com/q-vault/qvault
Leer el original
L O A D I N G
. . . comments & more!
. . . comments & more!
