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


Posted in Javascript onMarch 26, 2020

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

一、效果

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

二、组件代码

dropdown.vue

<template>
 <div class="vue-dropdown default-theme" v-show-extend="show">
 <div class="search-module clearfix" v-show="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="!datalist.length">{{nodatatext}}</div>
 </div>
</template>

<script>
 export default {
 data(){
 return {
 _datalist:this.itemlist.concat(),
 datalist:this.itemlist.concat(),
 length:this.itemlist.length
 }
 },
 props:{
 'show':{//用于外部控制组件的显示/隐藏
 type:Boolean,
 default:true
 },
 'itemlist':Array,
 'placeholder':String,
 'nodatatext':String
 },
 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.$data._datalist.filter(function(item,index,arr){
  return item.name.indexOf(searchvalue) != -1;
 });
 }
 },
 mounted:function(){

 }
 }
</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>

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 #Javascript
详解创建自定义的Angular Schematics
Jun 06 #Javascript
vue组件实现进度条效果
Jun 06 #Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 #Javascript
vue组件实现可搜索下拉框扩展
Oct 23 #Javascript
微信小程序实现美团菜单
Jun 06 #Javascript
详解express + mock让前后台并行开发
Jun 06 #Javascript
You might like
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php ftp文件上传函数(基础版)
2010/06/03 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php session 写入数据库
2016/02/13 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
三年级语文教学反思
2014/02/01 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
同志主要表现材料
2014/08/21 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
硕士学位论文评语
2014/12/31 职场文书
2015年助残日活动总结
2015/03/27 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python