在 Vue.js 中制作自定义选择组件小白指南_组件基础知识教程

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

在 Vue.js 中制作自定义选择组件小白指南

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

在 Vue.js 中制作自定义选择组件小白指南_组件基础知识教程

在 Vue.js 中制作自定义选择组件小白指南_组件基础知识教程

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/

海计划公众号
(0)
上一篇 2020/03/20 07:34
下一篇 2020/03/20 07:34

您可能感兴趣的内容

  • 10 款最佳移动 App 安全测试工具菜鸟教程网_测试指南攻略

    移动互联网时代,我们的生活和工作深受 App 影响。伴随移动 App 的广泛应用,App 安全日益重要。本文介绍了 App 开发所需的安全测试工具。TOP 10 移动 App 安全测试工具列表(排名不分先后)当今,全球移动用户大约超过 37 亿。Google Play 上大约有 220 万个 App,苹果 App Store 上大约有 20 亿或更多的 Ap

    2020/03/20
  • Js从callbacks到sync/await小白入门_sync小白指南

    最近在读一本《基于浏览器的深度学习》,书比较薄,但是涉及的内容很多,因此在读的过程中不得不再查阅一些资料,以加深理解。我目前从事的本职工作就是浏览器研发,对于前端技术并不陌生。但是从前段时间开发微信小程序 识狗君 的过程来看,对JavaScript还是掌握得太少,特别是对一些前端框架以及一些比较新的JavaScript语法和编程模型,了解的不够。在修改tfj

    2020/03/22
  • vue-beauty基础教程_基于 vue.js 和 ant-design样式 的PC端 UI库

    vue-beauty基础教程 官方网址:https://fe-driver.github.io/vue-beauty/ GitHub:https://github.com/FE-D…

    2020/03/06
  • 你可能知道事务的四大特性,但是你不一定知道事务的实现原理使用教程_事务使用指南

    说到数据库,那就一定会聊到事务,事务也是面试中常问的问题,我们先来一个面试场景:面试官:”事务的四大特性是什么?”我:”ACID,即原子性(Atomicity)、隔离性(Isolation)、持久性(Durability)、一致性(Consistency)!”面试官:”在 MySQL 数据库的 InnoDB 引擎是怎么实现这四大特性的?”我:”这个…这个

    2020/03/22
  • CssNext使用攻略在线CSS语法转换工具

    CssNext指南攻略 官方网址:http://cssnext.io/ GitHub:https://github.com/MoOx/postcss-cssnext/ 简介描述:在…

    2020/03/06
  • 这些自动化运维技巧让网络运维不再背锅菜鸟攻略_运维指南攻略

    引言“网络就像wifi,没有故障的时候,就没有人意识到它的存在”,这句话有无数的翻版,但是对于网络工程师来说,这就是现身说法。由于即便是在上千人的公司,网络工程师的人数也仅仅是个位数,所以他们的工作也鲜为人知 。“网络是不是有问题?”这句话几乎成了所有SRE排错时的口头禅,如果这个时候网络工程师表示沉默,或者无法拿出足够的证据,那背锅几乎是无疑的。如何让网络

    2020/03/24
  • 基于框架搭建与布局系统基础指南_框架入门基础教程

    前言我们在开发一个系统的时候,最重要的就是选择系统开发框架,其次选择UI,有了框架会使我们接下来的开发就游刃有余,大大提升我们的开发效率。那么我们如何选择框架?如何基于框架搭建系统?系统如何布局呢?一、框架简介1.框架与架构什么是框架框架是实体,是系统或子系统的半成品什么是架构架构是抽象的重要策略,是技术整合、扩展如果把开发一个系统比作造房子,那么架构是地基

    2020/03/23
  • 图标坊小白知识_在线快速定制网页和APP资源图标

    图标坊小白知识 官方网址:https://lilac.gitlab.io/IconStudio/index.html 简介描述:在线快速定制网页和APP资源图标 给大图标坊是一个帮…

    2020/03/06
  • HTML5显示桌面通知Notification入门基础教程_桌面菜鸟教程下载

    HTML5显示桌面通知Notification入门基础教程 使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不…

    2020/03/19
  • 远程协作尝试,Github远程协作入门基础知识_github指南攻略

    远程协作是一个听起来很酷的词,就像谈恋爱一样,听起来总是觉得它和浪漫一词相关,但实际进行起来却由于各种原因感觉不是那么浪漫。那么,我们这次就来分享一下远程协作过程中的浪漫和苦闷,以及我们在两者之间的取舍。远程协作,我们也把它叫做“云办公”,好处是自然可以想象:节省办公室租金( HR 曾好几次跟我说公司办公室位置不够了,把我从这个地方赶到那个地方。)工作环境自

    2020/04/06
  • nodebestpractices入门百科_NodeJS最佳实践

    nodebestpractices入门百科 官方网址:https://twitter.com/nodepractices/ GitHub:https://github.com/i0…

    2020/03/06
  • web前端开发书籍推荐新手入门css/css3的好书有哪些?_书籍菜鸟攻略

    css/css3样式已是web前端开发的主流技术了。每个优秀的前端程序员都应该熟悉,甚至精通css。那么要如何才能学好css,并很好的应用到实际开发中,这篇文章就推荐一些关于css相关的书籍给大家。CSS世界 以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时,作者结合多年的从业经验,通过大量的

    2020/04/05
  • 个人网站如何接入支付功能入门教程支持个人支付的第三方平台整理_网站小白教程

    作为个人开发者,为自己的辛苦开发的项目配上支付功能,才有盈利的盼头!但是目前大部分都需要企业资质,那对应个人而言如何在网站、应用中接入支付功能呢?这里找了一些不需要企业资质的第三方支付平台。 1、PayPal个人,企业都可以接入,作为一款主打跨境支付的产品,主打境外收付款,那么对于做外贸的朋友来说是一个不错的选择。有网站,无网站,B2B商家,个人收款都适用。

    2020/04/03
  • 如何简化你的Vuex Store基础入门_vuex菜鸟攻略

    随着Vue应用程序的大小增加,Vuex Store中的actions和mutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。Vuex是什么Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。我们怎么使用Vuex我们正在使用Vuex在Factory Core Fra

    2020/03/26
  • react生命周期详解小白基础深入理解React生命周期_react小白指南

    React主要思想是通过构建可复用组件来构建用户界面。所谓组件就是有限状态机。通过状态渲染对应的界面,且每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。有限状态机,表示有限个状态以及在这些状态之间的转移和动作行为的模型。一般通过状态,事件,转换和动作来描述有限状态机。React正是利用这一概念,通过管理状态来实现对组件的管理。初

    2020/04/05
  • Webstorm环境使用nuxt.js做开发,@ 和 ~ 别名配置基础入门_nuxt入门教程

    好的IDE + 好的代码提示 = 高效率的开发webstorm 设置@和~别名,有助于代码查看和跳转.step 0在项目下创建一个webpack.config.js,内容如下:const path = require(‘path’)module.exports = {resolve: {extensions: [‘.js’, ‘.json’, ‘.vue’,

    2020/03/24