基于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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php重定向的三种方法分享
2012/02/22 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python开发之for循环操作实例详解
2015/11/12 Python
Python获取当前路径实现代码
2017/05/08 Python
使用python实现个性化词云的方法
2017/06/16 Python
python读写csv文件方法详细总结
2019/07/05 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python阶乘求和的代码详解
2020/02/14 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
工程监理应届生求职信
2013/11/09 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
《春天来了》教学反思
2014/04/07 职场文书
职位说明书范文
2014/05/07 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
商业计划书之服装
2019/09/09 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书