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

.custom-select{position:relative;宽度：100%；文本对齐：左；大纲：无；高度：47px；line-height:47px;}.selected{background-color:#080D0E;边界半径：6px；边框：1px实心#858586；颜色：#ffffff；左填充：8px；游标：指针；user-select:none;}.selected.open{border:1pxsolid#CE9B2C;border-radius:6px6px0px0px;}.selected:after{position:absolute;内容：””;顶部：22px；右：10px；宽度：0；高度：0；边框：4px实心透明；边框颜色：#fff透明透明透明；}.items{颜色：#ffffff；边框半径：0px0px6px6px；溢出：隐藏；border-right:1pxsolid#CE9B2C;border-left:1pxsolid#CE9B2C;border-bottom:1pxsolid#CE9B2C;位置：绝对；背景色：#080D0E；左：0；右：0；}.item{颜色：#ffffff；左填充：8px；游标：指针；用户选择：无；}.item：悬停{背景色：#B68A28；}.selectHide{display:none;}作者：LaneWagner难度。有时，如果不结合使用样式化的div和自定义JavaScript来构建您自己的div，那是不可能的。在本文中，您将学习如何构建具有完全自定义CSS样式的Vue.js组件。演示：https://codesandbox.io/s/cust...HTML需要注意的几点：tabindex属性使我们的组件能够获得焦点，从而使其变得模糊。当用户在组件外部单击时，blur事件将关闭我们的组件。输入参数发出选定的选项，父组件可以轻松地对更改做出反应。JavaScript另外，请注意重要说明：我们还在挂载上发出选定值，这样父级就不需要显式设置默认值。如果我们的选择组件是更大表单的一部分，那么我们希望能够设置正确的tabindex。CSS.custom-select{position:relative;宽度：100%；文本对齐：左；大纲：无；高度：47px；line-height:47px;}.selected{background-color:#080D0E;边界半径：6px；边框：1px实心#858586；颜色：#ffffff；左填充：8px；游标：指针；user-select:none;}.selected.open{border:1pxsolid#CE9B2C;border-radius:6px6px0px0px;}.selected:after{position:absolute;内容：””;顶部：22px；右：10px；宽度：0；高度：0；边框：4px实心透明；边框颜色：#fff透明透明透明；}.items{颜色：#ffffff；边框半径：0px0px6px6px；溢出：隐藏；border-right:1pxsolid#CE9B2C;border-left:1pxsolid#CE9B2C;border-bottom:1pxsolid#CE9B2C;位置：绝对；背景色：#080D0E；左：0；右：0；}.item{颜色：#ffffff；左填充：8px；游标：指针；用户选择：无；}.item：悬停{背景色：#B68A28；}.selectHide{display:none;}这个CSS只是一个例子，可以随意修改样式以满足您的需要我希望这可以帮助您创建自己的自定义选择组件，这里是完整组件要点的链接：最后，在线演示示例：https://codesandbox.io/s/cust...