Vue.js 中制作自定义选择组件的代码附演示demo


Posted in Javascript onFebruary 28, 2020

Vue.js 中制作自定义选择组件的代码附演示demo 

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

Vue.js 中制作自定义选择组件的代码附演示demo 

Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd

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/custom-vuejs-select-component-8nqgd

总结

到此这篇关于Vue.js 中制作自定义选择组件的代码附演示demo的文章就介绍到这了,更多相关vuejs自定义选择组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 #Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 #Javascript
vue 中的 render 函数作用详解
Feb 28 #Javascript
微信小程序动态添加和删除组件的现实
Feb 28 #Javascript
浅析Vue 中的 render 函数
Feb 28 #Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 #Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
You might like
php表单提交问题的解决方法
2011/04/12 PHP
PHP小技巧之函数重载
2014/06/02 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
js new Date()实例测试
2019/10/31 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python猴子补丁知识点总结
2020/01/05 Python
Pycharm中如何关掉python console
2020/10/27 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
设计总监岗位职责
2013/12/07 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
公司运动会策划方案
2014/05/25 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
学前班幼儿评语大全
2014/12/29 职场文书