基于vue實(shí)現(xiàn)可搜索下拉框定制組件-創(chuàng)新互聯(lián)

實(shí)踐加深對(duì)vue的理解和運(yùn)用有效途徑，本文是基于vue的可搜索下拉框定制組件實(shí)現(xiàn)，在此記錄.

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括鶴慶網(wǎng)站建設(shè)、鶴慶網(wǎng)站制作、鶴慶網(wǎng)頁制作以及鶴慶網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鶴慶網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鶴慶省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、效果

二、組件代碼

<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{//隱藏后，恢復(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.$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>

當(dāng)前題目：基于vue實(shí)現(xiàn)可搜索下拉框定制組件-創(chuàng)新互聯(lián)
URL鏈接：http://bm7419.com/article10/cesigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、域名注冊(cè)、網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、定制開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司