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 相关文章推荐
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
小程序实现按下录音松开识别语音
Nov 22 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
人族 TERRAN 概述
2020/03/14 星际争霸
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python基本语法经典教程
2016/03/11 Python
python读取文件名并改名字的实例
2019/01/07 Python
python3图片文件批量重命名处理
2019/10/31 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
python操作链表的示例代码
2020/09/27 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
C语言笔试集
2012/07/24 面试题
广告学毕业生求职信
2014/01/30 职场文书
高中社区服务活动报告
2015/02/05 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
老人与海读书笔记
2015/06/26 职场文书
初中毕业感言300字
2015/07/31 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Golang二维数组的使用方式
2021/05/28 Golang