Vue.js 中制作自定义选择组件的代码附演示demo
定制select标签的设计非常困难。有时候，如果不使用样式化的div和自定义JavaScript的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义CSS设置样式的Vue.js组件。
Demo:https://codesandbox.io/s/custom-vuejs-select-component-8nqgd
HTML
{{selected}}{{option}}
需要注意以下几点：
- tabindex属性使我们的组件能够得到焦点，从而使它变得模糊。当用户在组件外部单击时，blur事件将关闭我们的组件。
- input参数发出选定的选项，父组件可以轻松地对更改做出反应。
JavaScript
另外，要注意的重要事项：
我们还会在mount上发出选定的值，以便父级不需要显式设置默认值。如果我们的select组件是较大表单的一部分，那么我们希望能够设置正确的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:1pxsolid#858586; color:#ffffff; padding-left:8px; cursor:pointer; user-select:none; } .selected.open{ border:1pxsolid#CE9B2C; border-radius:6px6px0px0px; } .selected:after{ position:absolute; content:""; top:22px; right:10px; width:0; height:0; border:4pxsolidtransparent; border-color:#ffftransparenttransparenttransparent; } .items{ color:#ffffff; border-radius:0px0px6px6px; overflow:hidden; border-right:1pxsolid#CE9B2C; border-left:1pxsolid#CE9B2C; border-bottom:1pxsolid#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; }
该CSS只是一个示例，你可以按照你的需求随意修改样式。
我希望这可以帮助你创建自己的自定义选择组件，以下是完整组件要点的链接：
最后，在线演示的示例：https://codesandbox.io/s/custom-vuejs-select-component-8nqgd
总结
到此这篇关于Vue.js中制作自定义选择组件的代码附演示demo的文章就介绍到这了,更多相关vuejs自定义选择组件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。