在 Vue.js 中制作自定义选择组件
2020/3/3 14:01:17
本文主要是介绍在 Vue.js 中制作自定义选择组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
作者:Lane Wagner翻译:疯狂的技术宅
原文:https://hackernoon.com/how-to...
未经允许严禁转载
定制 select 标签的设计非常困难。有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的。在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。
Demo: https://codesandbox.io/s/cust...
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>
需要注意以下几点:
-
tabindex
属性使我们的组件能够得到焦点,从而使它变得模糊。当用户在组件外部单击时,blur
事件将关闭我们的组件。 -
input
参数发出选定的选项,父组件可以轻松地对更改做出反应。
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>
另外,要注意的重要事项:
我们还会在 mount
上发出选定的值,以便父级不需要显式设置默认值。如果我们的 select 组件是较大表单的一部分,那么我们希望能够设置正确的 tabindex 。
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>
该 CSS只是一个示例,你可以按照你的需求随意修改样式。
我希望这可以帮助你创建自己的自定义选择组件,以下是完整组件要点的链接:
最后,在线演示的示例:https://codesandbox.io/s/cust...
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
这篇关于在 Vue.js 中制作自定义选择组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程