Personalizar el diseño de una etiqueta de   es muy difícil. A veces es imposible sin construir uno propio desde cero usando una combinación de   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.  selección divs  Demostración:  https://codesandbox.io/s/custom-vuejs-select-component-8nqgd  el html         {{ selected }}       {{ option }}        <   > template <     =     =   @   =   > div class "custom-select" :tabindex "tabindex" blur "open = false" <     =     =   @   =   > div class "selected" :class "{open: open}" click "open = !open" </   > 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)" </   > div </   > div </   > div </   > template  Es importante tener en cuenta lo siguiente:  La propiedad   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. tabindex  Al emitir la opción seleccionada usando el parámetro 'entrada', el componente principal puede reaccionar fácilmente a los cambios.  el JavaScript    <script>     {   :{   :{   :   ,   :   },   :{   :   ,   :   ,   :   } }, data() {   {   :   .options.length >   ?   .options[   ] :   ,   :   }; }, mounted(){   .$emit(   ,   .selected); } };  export default props options type Array required true tabindex type Number required false default 0 return selected this 0 this 0 null open false this 'input' this </   > script  Además, cosas importantes a tener en cuenta:  También emitimos el valor seleccionado en el   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   correcto. montaje tabindex  el css    <     >   {   : relative;   :   ;   : left;   : none;   :   ;   :   ; }   {   :   ;   :   ;   :   solid   ;   :   ;   :   ;   : pointer;   : none; }     {   :   solid   ;   :         ; }     {   : absolute;   :   ;   :   ;   :   ;   :   ;   :   ;   :   solid transparent;   :   transparent transparent transparent; }   {   :   ;   :         ;   : hidden;   :   solid   ;   :   solid   ;   :   solid   ;   : absolute;   :   ;   :   ;   :   ; }   {   :   ;   :   ;   : pointer;   : none; }     {   :   ; }   {   : none; } </   > style scoped .custom-select position width 100% text-align outline height 47px line-height 47px .selected background-color #080D0E border-radius 6px border 1px #858586 color #ffffff padding-left 8px cursor user-select .selected .open border 1px #CE9B2C border-radius 6px 6px 0px 0px .selected :after position content "" top 22px right 10px width 0 height 0 border 4px border-color #fff .items color #ffffff border-radius 0px 0px 6px 6px overflow border-right 1px #CE9B2C border-left 1px #CE9B2C border-bottom 1px #CE9B2C position background-color #080D0E left 0 right 0 .item color #ffffff padding-left 8px cursor user-select .item :hover background-color #B68A28 .selectHide display style  Este CSS es solo un ejemplo, es lo que usamos para la aplicación   . Siéntase libre de cambiar completamente el estilo según sus necesidades. Qvault  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

2022 - HackerNoon Contributor of the Year - Algorithms

2022 - HackerNoon Contributor of the Year - Cryptography

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Job Hunting

2022 - HackerNoon Contributor of the Year - Mathematics

2022 - HackerNoon Contributor of the Year - Online Education

Coding Guru of 2022

Super Career Strategist of 2022

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

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

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps