第vue實(shí)現(xiàn)二級(jí)彈框案例本文實(shí)例為大家分享了vue實(shí)現(xiàn)二級(jí)彈框的具體代碼，供大家參考，具體內(nèi)容如下

二級(jí)彈框案例，如下圖所示

template

div

div

p請(qǐng)選擇職位/p

div

!--inputv-model="jobKeyWord"placeholder="請(qǐng)輸入職位關(guān)鍵詞"/--

el-input

v-model="jobKeyWord"

@click.native="clickSearchInput"

clearable

@blur="blurSearch"

placeholder="請(qǐng)輸入職位關(guān)鍵詞"/el-input

divv-show="searchFlag"

ul

!--liv-for="(item,i)insearchList":key="i"{{Zh}}/li--

liv-for="(item,i)insearchList"

:key="i"@click="clickTwoCatFun(item)"

@mousedown=downDrag($event)

v-html="Val"/li

/ul

/div

/div

/div

div

spanv-for="(item,i)inclickTwoNameArr":key="i"

{{Zh}}

i@click="delChoolseTwoItem(item)"/i

/span

span最多選擇1個(gè)職位類別/span

span@click="jobSure"確認(rèn)/span

/div

div

div

ul

!--li產(chǎn)品/運(yùn)營(yíng)/新媒體span1/span/li--

!--templatev-for="(item,i)injobClassList":key="i"

/template

--

li

:class="[clickOneJobNameArr.includes(item.id)'li-active':'']"

v-for="(item,i)injobClassList"

@click="clickJobItem(item)"

:key="i"{{Zh}}

spanv-if="countObj[item.id]"{{countObj[item.id]}}/span

/li

/ul

/div

div

div

!--span互聯(lián)網(wǎng)/移動(dòng)互聯(lián)網(wǎng)/電子商務(wù)/span--

span

:class="[clickTwoIdArr.includes(twoObj.id)'job-active':'']"

v-for="(twoObj,i)inclickCateObj.list"

:key="i"@click="clickTwoCatFun(twoObj)"{{twoOZh}}

/span

/div

/div

/div

/div

/template

script

exportdefault{

name:"JobClassComp",

data(){

return{

jobKeyWord:'',//職位關(guān)鍵詞

searchFlag:false,//是否展示搜索框

searchList:[],//搜索數(shù)據(jù)

clickOneJobNameArr:[],//存儲(chǔ)點(diǎn)擊時(shí)一級(jí)分類

clickTwoNameArr:[],//選中的二級(jí)分類

clickTwoIdArr:[],//選中的二級(jí)分類

clickCateObj:{},//點(diǎn)擊選中的一級(jí)分類

countObj:{},//二級(jí)職位被選中時(shí)一級(jí)顯示數(shù)量

searchDataList:[],//搜索數(shù)據(jù)

allTwoClassList:[],//所有二級(jí)分類

}

},

props:{

form:Object,

isEndDateNow:Boolean,

jobClassList:{

type:Array,

default(){

return[];

}

}

},

computed:{

listLength(){

returnthis.jobClassList.length

}

},

watch:{

jobKeyWord(val){

if(val.length0){

this.searchList=this.searchDataList.filter(item={

val=val.toUpperCase();

letreg=newRegExp("("+val+")","g");

letnameVal=Zh.replace(reg,"span$1/span

Val=nameVal;

//

returnnewstr;

returnZh.includes(val)

})

this.searchFlag=true

}else{

this.searchList=[];

this.searchFlag=false

}

},

listLength(val,oldValue){

/*

console.log("val==",val)

console.log("oldValue==",oldValue)*/

if(oldValue===0val0){

//console.log("--22--",this.jobClassList)

this.clickOneJobNameArr.length===0this.clickOneJobNameArr.push(this.jobClassList[0].id):'';

Object.keys(this.clickCateObj).length===0this.clickCateObj=this.jobClassList[0]:'';

this.dealSearchData();//處理搜索職位數(shù)據(jù)

//

this.doAllTwoClassData()lzs

}

}

},

created(){

if(this.jobClassListthis.jobClassList.length0){

this.clickOneJobNameArr.length===0this.clickOneJobNameArr.push(this.jobClassList[0].id):'';

Object.keys(this.clickCateObj).length===0this.clickCateObj=this.jobClassList[0]:'';

this.dealSearchData();//處理搜索職位數(shù)據(jù)

}

},

methods:{

clickSearchInput(){

this.jobKeyWord.length0this.searchFlag=true:this.searchFlag=false;

},

//input失去焦點(diǎn)

blurSearch(){

this.searchFlag=false;

},

downDrag(el){

el.preventDefault();//阻止input失去焦點(diǎn)事件時(shí)的影響

},

//職位確認(rèn)

jobSure(){

//this.dialogVisible=false;//addlzs

if(this.clickTwoNameArr.length0){

this.form.jobIntensionName='';

this.clickTwoNameArr.forEach(item={

this.form.jobIntensionName=this.form.jobIntensionName+'，'+Zh;

})

this.form.jobIntensionName.length0this.form.jobIntensionName=this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length):'';

}else{

this.form.jobIntensionName='';

}

this.$emit('sureJobMethod',this.clickTwoNameArr)

},

clickJobItem(item){//點(diǎn)擊職位類別

//console.log("item----",item)

this.clickCateObj=item;

//處理選中顏色變化

if(this.clickOneJobNameArr.length0){

this.clickOneJobNameArr.splice(0,1);

this.clickOneJobNameArr.push(item.id)

}else{

this.clickOneJobNameArr.push(item.id)

}

},

//點(diǎn)擊二級(jí)職位名稱

clickTwoCatFun(obj){

//type:searchtwo;=search是點(diǎn)擊的搜索框出現(xiàn)，否則就是點(diǎn)擊的二級(jí)

//type==='search'this.jobKeyWord=Zh:'';

if(!this.clickTwoIdArr.includes(obj.id)this.clickTwoIdArr.length===1){

this.$message({

message:'最多選擇1個(gè)職位類別哦',

type:'warning'

});

return

}

if(!this.clickTwoIdArr.includes(obj.id)this.clickTwoIdArr.length3){

this.clickTwoNameArr.push(obj)

this.clickTwoIdArr.push(obj.id)

this.form.jobIntensionNameSel.push(obj.id)

if(!this.countObj[obj.parentId]){

this.countObj[obj.parentId]=1

}else{

this.countObj[obj.parentId]++;

}

}

},

//要?jiǎng)h除的二級(jí)分類,改變選中顏色，改變一級(jí)分類統(tǒng)計(jì)數(shù)量

delChoolseTwoItem(delObj){

//varfiltered=someArray.filter(function(el){returnel.Name!="Kristian";});

letindex=this.clickTwoNameArr.findIndex(item={

returnitem.id===delObj.id

})

letformIndex=this.form.jobIntensionNameSel.findIndex(idVal={

returnidVal===delObj.id

})

this.form.jobIntensionNameSel.splice(formIndex,1)//刪除

this.clickTwoNameArr.splice(index,1)

this.clickTwoIdArr.splice(index,1)

if(!this.countObj[delObj.parentId]){

this.countObj[delObj.parentId]=0

}else{

this.countObj[delObj.parentId]--;

}

},

//處理搜索的數(shù)據(jù)

dealSearchData(){

this.jobClassList.forEach(item={

this.searchDataList=this.searchDataList.concat(item.list)

})

},

}

}

/script

stylescopedlang="less"

.zw-dialog{

/*

border:1pxsolidred;*/

width:880px;

height:550px;

background:rgba(255,255,255,1);

.zw-top{

height:52px;

width:100%;

display:flex;

/*border:1pxsolidgreen;*/

border-bottom:1pxsolid#EFEFEF;

.zw-word{

width:200px;

/*text-align:center;*/

margin-left:30px;

line-height:52px;

font-size:16px;

color:#333333;

}

.zw-in{

/*border:1pxsolidblue;*/

width:calc(100%-200px);

line-height:52px;

.zw-put{

border-radius:15px;

border:1pxsolidrgba(224,224,224,1);

width:200px;

height:30px;

margin-left:32px;

font-size:12px;

padding-left:20px;

}

.in-put{

width:200px;

height:30px;

/deep/.el-input__inner{

border-radius:15px;

color:#999999;

font-size:12px;

}

/deep/input::-webkit-input-placeholder{

/*WebKitbrowsers*/

font-size:12px;

color:#999999;

}

/deep/input:-moz-placeholder{

/*MozillaFirefox4to18*/

font-size:12px;

color:#999999;

}

/deep/input::-moz-placeholder{