vue組件實踐之可搜索下拉框功能
更新時間：2018年11月25日 10:36:13 作者：Jervis
這篇文章主要介紹了vue實現(xiàn)可搜索的下拉菜單組件功能，在文中通過實例代碼給大家補充介紹了vue組件實踐-可搜索下拉框，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
之前也寫過這個小組件，最近遇到select下加搜索的功能，所以稍微完善一下。
效果圖：
子組件 DROPDOWN.VUE
<template>
<div class="vue-dropdown default-theme">
<div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemlist.cur.name}}</div>
<div class="list-and-search" :class="isShow?'on':''">
<div class="search-module clearfix" v-show="isNeedSearch">
<input class="search-text"
@keyup='search($event)' :placeholder="placeholder" />
</div>
<ul class="list-module">
<li v-for ="(item,index) in datalist" @click="selectToggle(item)"
:key="index">
<span class="list-item-text">{{item.name}}</span>
</li>
</ul>
<div class="tip-nodata" v-show="isNeedSearch && datalist.length == 0">{{nodatatext}}</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
datalist:[],
isShow:false
}
},
props:{
'itemlist':Object,//父組件傳來的數(shù)據(jù)
'placeholder':{
type:String,
default: '搜索' //input placeholder的默認值
},
'isNeedSearch':{ //是否需要搜索框
type:Boolean,
default: false
},
'nodatatext':{
type:String,
default: '未找到結(jié)果' //沒有搜索到時的文本提示
}
},
created(){
this.datalist = this.itemlist.data;
//點擊組件以外的地方，收起
document.addEventListener('click', (e) => {
if (!this.$el.contains(e.target)){
this.isShow = false;
}
}, false)
},
methods:{
selectToggle(data){
this.itemlist.cur.name = data.name;
this.isShow = false;
this.$emit('item-click',data);
},
search(e){
let searchvalue = e.currentTarget.value;
this.datalist = this.itemlist.data.filter((item,index,arr)=>{
return item.name.indexOf(searchvalue) != -1;
});
}
}
}
</script>
<style lang="less" scoped>
.list-and-search{
background: #fff;
border: 1px solid #ccc;
display: none;
&.on{
display: block;
}
}
.cur-name{
height: 32px;
line-height: 32px;
text-indent: 10px;
position: relative;
color: #777;
&:after{
position: absolute;
right: 9px;
top: 13px;
content: " ";
width: 0;
height: 0;
border-right: 6px solid transparent;
border-top: 6px solid #7b7b7b;
border-left: 6px solid transparent;
border-bottom: 6px solid transparent;
}
&.show{
&:after{
right: 9px;
top: 6px;
border-right: 6px solid transparent;
border-bottom: 6px solid #7b7b7b;
border-left: 6px solid transparent;
border-top: 6px solid transparent;
}
}
}
.vue-dropdown.default-theme {
width: 200px;
z-index:10;
border-radius:3px;
border: 1px solid #ccc;
cursor: pointer;
-webkit-user-select:none;
user-select:none;
&._self-show {
display: block!important;
}
.search-module {
position: relative;
border-bottom: 1px solid #ccc;
.search-text {
width: 100%;
height: 30px;
text-indent: 10px;
// border-radius: 0.5em;
box-shadow: none;
outline: none;
border: none;
// &:focus {
// border-color: #2198f2;
// }
}
.search-icon {
position: absolute;
top: 24%;
right: 0.5em;
color: #aaa;
}
}
input::-webkit-input-placeholder{
font-size: 14px;
}
.list-module {
max-height: 200px;
overflow-y: auto;
li {
&._self-hide {
display: none;
}
margin-top: 0.4em;
padding: 0.4em;
&:hover {
cursor:pointer;
color: #fff;
background: #00a0e9;
}
}
}
}
.tip-nodata {
font-size: 14px;
padding: 10px 0;
text-indent: 10px;
}
</style>
父組件調(diào)用
<dropdown :item-click="dropDownClick" :isNeedSearch="true" :itemlist="itemlist"></dropdown>
import Dropdown from '@/components/dropdown.vue'
export default {
data() {
return {
itemlist: {
cur: {
val: "",
name: "所有產(chǎn)品"
},
data: [{
val: "",
name: "所有產(chǎn)品"
}, {
val: 1,
name: "夢幻西游"
}, {
val: 2,
name: "夢幻無雙"
}, {
val: 3,
name: "大話西游"
}]
},
}
},
components: {
Dropdown,
},
methods :{
dropDownClick(e) {
console.log(e.name, e.val)
}
}
}
默認是不帶搜索框，如果需要可以傳這個:isNeedSearch="true"。
ps：下面看下vue組件實踐-可搜索下拉框
實踐加深對vue的理解和運用有效途徑，本文是基于vue的可搜索下拉框定制組件實現(xiàn)，在此記錄.
一、效果
二、組件代碼
dropdown.vue
<template>
<div class="vue-dropdown default-theme" v-show-extend="show">
<div class="search-module clearfix" v-show="itemlist.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="!length">{{nodatatext}}</div>
</div>
</template>
<script>
export default {
data(){
return {
datalist:[]
}
},
props:{
'show':{//用于外部控制組件的顯示/隱藏
type:Boolean,
default:true
},
'itemlist':Array,
'placeholder':String,
'nodatatext':String
},
watch:{
itemlist:function(val){
this.datalist = val.concat();
}
},
directives:{
'show-extend':function(el,binding,vnode){//bind和 update鉤子
let value = binding.value,searchInput = null;
if(value){
el.style.display='block';
}else{//隱藏后，恢復(fù)初始狀態(tài)
el.style.display='none';
searchInput = el.querySelector(".search-text");
searchInput.value = '';
vnode.context.datalist = vnode.context.itemlist;//還原渲染數(shù)據(jù)
}
}
},
methods:{
appClick:function(data){
this.$emit('item-click',data);
},
search:function(e){
let vm = this,searchvalue = e.currentTarget.value;
vm.datalist = vm.itemlist.filter(function(item,index,arr){
return item.name.indexOf(searchvalue) != -1;
});
}
},
computed:{
length:function(){
return this.datalist.length;
}
}
}
</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>
總結(jié)
以上所述是小編給大家介紹的vue下拉菜單組件（含搜索）功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
從零開始Vue3數(shù)據(jù)交互之promise用法詳解
這篇文章主要介紹了Axios的基本使用,包括異步編程的基礎(chǔ)知識,如Promise的介紹、特點和基本用法,以及如何使用then、catch和async/await來處理異步操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
在vue框架開發(fā)中,有時候我們需要對元素的樣式進行動態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了Vue.js組件tabs實現(xiàn)選項卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本文主要介紹了Vue項目部署到j(luò)enkins的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章小編要與大家分享的是建立和維護大型 Vue.js 項目的 10 個最佳實踐，需要的小伙伴請和小編一起學(xué)習下面文章的具體內(nèi)容吧2021-09-09
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
分頁是很多頁面都需要實現(xiàn)的一個功能，這篇文章主要介紹了Vue全局分頁組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
一個home頁面,點擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時候,默認是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認顯示頁面操作方法,感興趣的朋友一起看看吧2024-03-03
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12