基于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 tips提示框组件实现代码
Nov 19 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
老生常谈js数据类型
Aug 03 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
phpnow php探针环境检测代码
2014/11/04 PHP
php实现无限级分类
2014/12/24 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
使用store来优化React组件的方法
2017/10/23 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python如何编写win程序
2020/06/08 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
2014年社区植树节活动方案
2014/02/28 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
python实现高效的遗传算法
2021/04/07 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers