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


Posted in Javascript onNovember 25, 2018

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

效果图:

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

子组件 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的可搜索下拉框定制组件实现,在此记录.

一、效果

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下拉菜单组件(含搜索)功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
jquery分割字符串的方法
Jun 24 Javascript
分享Javascript实用方法二
Dec 13 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
详解离线安装npm包的几种方法
Nov 25 #Javascript
vue将单页面改造成多页面应用的方法
Nov 25 #Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 #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
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python读取图片任意范围区域
2019/01/23 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
python 爬取小说并下载的示例
2020/12/07 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
留学推荐信怎么写
2014/01/25 职场文书
小学生美德少年事迹
2014/02/02 职场文书
销售经理岗位职责
2015/01/31 职场文书
预备党员党支部意见
2015/06/02 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
CentOS MySql8 远程连接实战
2022/04/19 MySQL