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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue实现列表滚动的过渡动画
Jun 29 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
Javascript Math对象
2009/08/13 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python实现计算最小编辑距离
2016/03/17 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python使用turtle库绘制树
2018/06/25 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
用python计算文件的MD5值
2020/12/23 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
大学生党课思想汇报
2013/12/29 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
小学运动会通讯稿
2015/07/18 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js