在 Vue.js 中制作自定义选择组件

作者:Lane Wagner

翻译:疯狂的技术宅

原文:https://hackernoon.com/how-to...

未经允许严禁转载

定制 select 标签的设计非常困难。有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的。在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。

在 Vue.js 中制作自定义选择组件_第1张图片

Demo: https://codesandbox.io/s/cust...

HTML

需要注意以下几点:

  • tabindex 属性使我们的组件能够得到焦点,从而使它变得模糊。当用户在组件外部单击时,blur 事件将关闭我们的组件。
  • input 参数发出选定的选项,父组件可以轻松地对更改做出反应。

JavaScript

另外,要注意的重要事项:

我们还会在 mount 上发出选定的值,以便父级不需要显式设置默认值。如果我们的 select 组件是较大表单的一部分,那么我们希望能够设置正确的 tabindex

CSS

该 CSS只是一个示例,你可以按照你的需求随意修改样式。

我希望这可以帮助你创建自己的自定义选择组件,以下是完整组件要点的链接:

最后,在线演示的示例:https://codesandbox.io/s/cust...


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

在 Vue.js 中制作自定义选择组件_第2张图片

欢迎继续阅读本专栏其它高赞文章:


你可能感兴趣的:(vue.js,javascript)