vue下拉菜单组件(含搜索)的实现代码


Posted in Javascript onNovember 25, 2018

之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下。

效果图:

vue下拉菜单组件(含搜索)的实现代码

子组件 dropdown.vue

<template>
 <div class="vue-dropdown default-theme">
  <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div>
  <div class="list-and-search" :class="isShow?'on':''">
  <div class="search-module clearfix" v-show="isNeedSearch">
    <input class="search-text" 
    @keyup='search($event)' :placeholder="placeholder" />
   </div>
   <ul class="list-module">
    <li v-for ="(item,index) in datalist" @click="selectToggle(item)" 
    :key="index">
     <span class="list-item-text">{{item.name}}</span>
    </li>
   </ul>
   <div class="tip-nodata" v-show="isNeedSearch && datalist.length == 0">{{nodatatext}}</div>
  </div>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    datalist:[],
    isShow:false
   }
  },
  props:{
   'itemlist':Object,//父组件传来的数据
   'placeholder':{
    type:String,
    default: '搜索' //input placeholder的默认值
   },
   'isNeedSearch':{ //是否需要搜索框
    type:Boolean,
    default: false
   },
   'nodatatext':{ //是否需要显示搜索
    type:String,
    default: '未找到结果' //没有搜索到时的文本提示
   } 
  },
  created(){
   this.datalist = this.itemlist.data;
   //点击组件以外的地方,收起
   document.addEventListener('click', (e) => {
    if (!this.$el.contains(e.target)){
     this.isShow = false; 
    }
   }, false)
  },
  methods:{
   selectToggle(data){
    this.itemlist.cur.name = data.name;
    this.isShow = false;
    this.$emit('item-click',data);
   },
   search(e){
    let searchvalue = e.currentTarget.value;
    this.datalist = this.itemlist.data.filter((item,index,arr)=>{
     return item.name.indexOf(searchvalue) != -1;
    });
   }
  }
 }
</script>

<style lang="less" scoped>
 .list-and-search{
 background: #fff;
 border: 1px solid #ccc;
 display: none;
  &.on{
   display: block;
  }
 }
 .cur-name{
 height: 32px;
 line-height: 32px;
 text-indent: 10px;
 position: relative;
 color: #777;
 &:after{
 position: absolute;
  right: 9px;
  top: 13px;
  content: " ";
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-top: 6px solid #7b7b7b;
  border-left: 6px solid transparent;
  border-bottom: 6px solid transparent;
 }
 &.show{
 &:after{
 right: 9px;
  top: 6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #7b7b7b;
  border-left: 6px solid transparent;
  border-top: 6px solid transparent;
 }
 }
 }
 .vue-dropdown.default-theme {
  width: 200px;
  z-index:10;
  border-radius:3px; 
  border: 1px solid #ccc;
  cursor: pointer;
  -webkit-user-select:none; 
 user-select:none;
  &._self-show {
   display: block!important;
  }
  .search-module {
   position: relative;
   border-bottom: 1px solid #ccc;
   .search-text {
    width: 100%;
    height: 30px;
    text-indent: 10px;
    // border-radius: 0.5em;
    box-shadow: none;
    outline: none;
    border: none;
    // &:focus {
    //  border-color: #2198f2;
    // }
   }
   .search-icon {
    position: absolute;
    top: 24%;
    right: 0.5em;
    color: #aaa;
   }
  }
  input::-webkit-input-placeholder{
   font-size: 14px;
  }
  .list-module {
   max-height: 200px;
   overflow-y: auto;
   li {
    &._self-hide {
     display: none;
    }
    margin-top: 0.4em;
    padding: 0.4em;
    &:hover {
     cursor:pointer;
     color: #fff;
     background: #00a0e9;
    }
   }
  }
 }
 .tip-nodata {
  font-size: 14px;
  padding: 10px 0;
  text-indent: 10px;
 }
</style>

父组件调用

<dropdown :item-click="dropDownClick" :isNeedSearch="true" :itemlist="itemlist"></dropdown>
import Dropdown from '@/components/dropdown.vue'
export default {
 data() {
 return {
  itemlist: {
  cur: {
   val: "",
   name: "所有产品"
  },
  data: [{
   val: "",
   name: "所有产品"
  }, {
   val: 1,
   name: "梦幻西游"
  }, {
   val: 2,
   name: "梦幻无双"
  }, {
   val: 3,
   name: "大话西游"
  }]
  },
 }
 },
 components: {
 Dropdown,
 },
 methods :{
 dropDownClick(e) {
  console.log(e.name, e.val)
 }
 }
}

默认是不带搜索框,如果需要可以传这个 :isNeedSearch="true" 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS自动适应的图片弹窗实例
Jun 29 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 #Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 #Javascript
详解js静态检查工具eslint配置文件
Nov 23 #Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 #Javascript
创建echart多个联动的示例代码
Nov 23 #Javascript
详解Angular模板引用变量及其作用域
Nov 23 #Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 #Javascript
You might like
php简单定时执行任务的实现方法
2015/02/23 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
铁路个人事迹材料
2014/01/30 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书