基于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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
JS 继承实例分析
Nov 04 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
基于JavaScript实现简单扫雷游戏
Jan 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
PHP+ajax 无刷新删除数据
2010/02/20 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
中学生自我评价范文
2014/02/08 职场文书
《开国大典》教学反思
2014/04/19 职场文书
红头文件任命书范本
2014/06/05 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
初一军训感言
2015/08/01 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
python 实现的截屏工具
2021/05/08 Python