基于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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
JavaScript代码实现简单计算器
Dec 27 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
使用python生成目录树
2018/03/29 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
UNIX特点都有哪些
2016/04/05 面试题
小班上学期评语
2014/05/05 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2014年手术室工作总结
2014/11/26 职场文书
解析MySQL binlog
2021/06/11 MySQL
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Python 全局空间和局部空间
2022/04/06 Python