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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JS链式调用的实现方法
Mar 07 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
React Native项目框架搭建的一些心得体会
May 28 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脚本代码
2011/02/19 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
QQ登录简单实现代码
2021/03/09 Javascript
offsetParent 算法分析
2010/04/05 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python3简单实现微信爬虫
2015/04/09 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python文本数据处理学习笔记详解
2019/06/17 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python按比例随机切分数据的实现
2019/07/11 Python
解决python flask中config配置管理的问题
2019/07/26 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
职业女性的职业规划
2014/03/04 职场文书
雨中的树观后感
2015/06/03 职场文书