本篇内容主要讲解“Vue.js中怎么制作自定义选择组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue.js中怎么制作自定义选择组件”吧!
定制 select 标签的设计非常困难。有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的。
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只是一个示例,你可以按照你的需求随意修改样式。
到此,相信大家对“Vue.js中怎么制作自定义选择组件”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。