基于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 设置选中行的样式的实现代码
May 24 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
深入浅析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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php实现水仙花数示例分享
2014/04/03 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
三年级小学生评语
2014/04/22 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
材料员岗位职责范本
2015/04/11 职场文书
对学校的意见和建议
2015/06/04 职场文书
教师节简报
2015/07/20 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
SQL Server连接查询的实用教程
2021/04/07 SQL Server