vue组件实践之可搜索下拉框功能

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

效果图:

子组件 DROPDOWN.VUE

<template>
 <div class="vue-dropdown default-theme">
 <div class="cur-name" :class="isShow ? 'show':''" @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"。

ps:下面看下vue组件实践-可搜索下拉框

实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录.

一、效果

二、组件代码

dropdown.vue

<template>
 <div class="vue-dropdown default-theme" v-show-extend="show">
  <div class="search-module clearfix" v-show="itemlist.length">
   <input class="search-text"
   @keyup='search($event)' :placeholder="placeholder" />
   <span class="glyphicon glyphicon-search search-icon"></span>
  </div>
  <ul class="list-module" v-show="length">
   <li v-for ="(item,index) in datalist" @click="appClick(item)"
   :key="index">
    <span class="list-item-text">{{item.name}}</span>
   </li>
  </ul>
  <div class="tip__nodata" v-show="!length">{{nodatatext}}</div>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    datalist:[]
   }
  },
  props:{
   'show':{//用于外部控制组件的显示/隐藏
    type:Boolean,
    default:true
   },
   'itemlist':Array,
   'placeholder':String,
   'nodatatext':String
  },
  watch:{
   itemlist:function(val){
    this.datalist = val.concat();
   }
  },
  directives:{
   'show-extend':function(el,binding,vnode){//bind和 update钩子
    let value = binding.value,searchInput = null;
    if(value){
     el.style.display='block';
    }else{//隐藏后,恢复初始状态
     el.style.display='none';
     searchInput = el.querySelector(".search-text");
     searchInput.value = '';
     vnode.context.datalist = vnode.context.itemlist;//还原渲染数据
    }
   }
  },
  methods:{
   appClick:function(data){
    this.$emit('item-click',data);
   },
   search:function(e){
    let vm = this,searchvalue = e.currentTarget.value;
    vm.datalist = vm.itemlist.filter(function(item,index,arr){
     return item.name.indexOf(searchvalue) != -1;
    });
   }
  },
  computed:{
   length:function(){
    return this.datalist.length;
   }
  }
 }
</script>

<style lang="scss" scoped>
 .vue-dropdown.default-theme {
  position: absolute;
  left:15%;
  display: none;
  width: 70%;
  margin: 0 auto;
  margin-top: 1em;
  padding: 1em;
  z-index:10;
  box-shadow: 0px 0px 10px #ccc;
  &._self-show {
   display: block!important;
  }

  .search-module {
   position: relative;
   .search-text {
    width: 100%;
    height: 30px;
    padding-right: 2em;
    padding-left:0.5em;
    border-radius: 0.5em;
    box-shadow: none;
    border: 1px solid #ccc;

    &:focus {
     border-color: #2198f2;
    }
   }

   .search-icon {
    position: absolute;
    top: 24%;
    right: 0.5em;
    color: #aaa;
   }

  }

  .list-module {
   max-height: 200px;
   overflow-y: auto;
   li {
    &._self-hide {
     display: none;
    }
    margin-top: 0.5em;
    padding: 0.5em;
    &:hover {
     cursor:pointer;
     color: #fff;
     background: #00a0e9;

    }
   }
  }
 }
 .tip__nodata {
  font-size: 12px;
  margin-top: 1em;
 }
</style>

三、组件使用

<dropdown :itemlist="itemlist" :placeholder="placeholder"
:nodatatext="nodatatext"></dropdown>

总结

以上所述是小编给大家介绍的vue下拉菜单组件(含搜索)功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

时间: 2018-11-24

Vue2.x通用条件搜索组件的封装及应用详解

本文实例为大家分享了Vue2.x通用条件搜索组件的封装及应用,供大家参考,具体内容如下 效果   组件源码 <template> <div class="search"> <el-select v-model="type" @change="changeType" class="select"> <el-option v-for="item in selectItems&qu

vue2.0多条件搜索组件使用详解

本文为大家分享了vue2.0多条件搜索组件的实现方法,供大家参考,具体内容如下 搜索条件为死数据,通过select下拉,选取多个条件:同时可点击加号增加搜索条件,点击减号减少搜索条件: templete <template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @cli

vue.js项目 el-input 组件 监听回车键实现搜索功能示例

基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

基于vue实现可搜索下拉框定制组件

实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录. 一.效果 二.组件代码 dropdown.vue <template> <div class="vue-dropdown default-theme" v-show-extend="show"> <div class="search-module clearfix" v-show="length">

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

之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 dropdown.vue <template> <div class="vue-dropdown default-theme"> <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div> <div clas

vue组件实现可搜索下拉框扩展

本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下 一.效果 二.代码 dropdown-ext.vue <template> <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"> <div class="search-module clearfix" v-show="

Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e

vue 不使用select实现下拉框功能(推荐)

html部分:v-for循环出的结构 <div > <p @click="clickSize (item, index)">{{item.name}}</p> <transition name="opacityLeave"> <div class="condition-list" v-show="isShowSize && index == i"> &

jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>

Vue下拉框回显并默认选中随机问题

今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回

Angular实现下拉框模糊查询功能示例

本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"

vue 通过下拉框组件学习vue中的父子通讯

如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件 这里先提出两个关键词: props 与 emit : 写这个组件之前,先看看效果图: 组件开发分析: 既然是组件: 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的),这必须由父组件传入(即父组件如何将数据传个父组件); 在选择了内容之后,如何将数据传出来(即子组件如何将数据传给父组件) 先写结构: 父组

在Vue 中获取下拉框的文本及选项值操作

方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo