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 渐变下拉菜单
Dec 15 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php中in_array函数用法分析
2014/11/15 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
聊一聊JS中的prototype
2016/09/29 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
express启用https使用小记
2019/05/21 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python获取网页状态码示例
2014/03/30 Python
Python统计单词出现的次数
2018/04/04 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python查看模块安装位置的方法
2018/10/16 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
一套带答案的C++笔试题
2014/01/10 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
电大物流学生的自我评价
2013/10/25 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
暖春观后感
2015/06/08 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android