基于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基于DOM实现省市级联下拉框的方法
May 14 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
ES6关于Promise的用法详解
May 07 Javascript
安装vue-cli的简易过程
May 22 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python中pillow知识点学习
2018/04/30 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python基于递归解决背包问题详解
2019/07/03 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python绘制趋势图的示例
2020/09/17 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
初婚未育证明
2014/01/15 职场文书
社区包粽子活动方案
2014/01/21 职场文书
中国梦团日活动总结
2014/07/07 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
文体活动总结
2015/02/04 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
vue实现Toast组件轻提示
2022/04/10 Vue.js