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 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
WebSocket的简单介绍及应用
May 23 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 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读取PPT文件的方法
2015/12/10 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
跟老齐学Python之用Python计算
2014/09/12 Python
python optparse模块使用实例
2015/04/09 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python两个list[]相加的实现方法
2020/09/23 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
后勤部长岗位职责
2013/12/14 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
迎国庆主题班会
2015/08/17 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
python自动化测试之Selenium详解
2022/03/13 Python
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle