vue實現二級彈框案例
本文實例為大傢分享瞭vue實現二級彈框的具體代碼，供大傢參考，具體內容如下
二級彈框案例，如下圖所示
<template>
<div class="zw-dialog">
<div class="zw-top">
<p class="zw-word">請選擇職位</p>
<div class="zw-in">
<!-- <input class="zw-put" v-model="jobKeyWord" placeholder="請輸入職位關鍵詞" />-->
<el-input class="in-put" v-model="jobKeyWord"
@click.native="clickSearchInput"
clearable
@blur="blurSearch"
placeholder="請輸入職位關鍵詞"></el-input>
<div class="in-block" v-show="searchFlag">
<ul class="in-ul">
<!--<li class="in-li" v-for="(item,i) in searchList" :key="i">{{item.nameZh}}</li>-->
<li class="in-li" v-for="(item,i) in searchList"
:key="i" @click="clickTwoCatFun(item)"
@mousedown= downDrag($event)
v-html="item.nameVal"></li>
</ul>
</div>
</div>
</div>
<div class="zw-middle">
<span class="zw-tag" v-for="(item,i) in clickTwoNameArr" :key="i">
{{item.nameZh}}
<i class="el-icon-close" @click="delChoolseTwoItem(item)"></i>
</span>
<span class="zw-more">最多選擇1個職位類別</span>
<span class="zw-sure" @click="jobSure">確認</span>
</div>
<div class="zw-main">
<div class="zw-left">
<ul class="zw-ul">
<!--<li class="zw-li li-active">產品/運營/新媒體 <span class="li-num">1</span></li>-->
<!-- <template v-for="(item,i) in jobClassList" :key="i">
</template> -->
<li class="zw-li"
:class="[clickOneJobNameArr.includes(item.id) ? 'li-active' :'']"
v-for="(item,i) in jobClassList"
@click="clickJobItem(item)"
:key="i" >{{item.nameZh}}
<span class="li-num" v-if=" countObj[item.id] ">{{countObj[item.id]}}</span>
</li>
</ul>
</div>
<div class="zw-right">
<div class="right-main">
<!--<span class="job-tag job-active">互聯網/移動互聯網/電子商務</span>-->
<span class="job-tag"
:class="[clickTwoIdArr.includes(twoObj.id) ? 'job-active' :'']"
v-for="(twoObj,i) in clickCateObj.list"
:key="i" @click="clickTwoCatFun(twoObj)">{{twoObj.nameZh}}
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "JobClassComp",
data(){
return{
jobKeyWord:'',//職位關鍵詞
searchFlag:false,//是否展示搜索框
searchList:[],//搜索數據
clickOneJobNameArr:[],//存儲點擊時一級分類
clickTwoNameArr:[],//選中的二級分類
clickTwoIdArr:[],//選中的二級分類
clickCateObj:{},// 點擊選中的一級分類
countObj:{},//二級職位被選中時 一級顯示數量
searchDataList:[], //搜索數據
allTwoClassList:[],//所有二級分類
}
},
props:{
form: Object,
isEndDateNow: Boolean,
jobClassList:{
type:Array,
default() {
return [];
}
}
},
computed: {
listLength(){
return this.jobClassList.length
}
},
watch:{
jobKeyWord(val){
if(val.length >0){
this.searchList = this.searchDataList.filter(item =>{
val = val.toUpperCase();
let reg = new RegExp("(" + val + ")", "g");
let nameVal = item.nameZh.replace(reg, "<span style='color:#437FFF;'>$1</span>");
item.nameVal = nameVal;
// return newstr;
return item.nameZh.includes(val)
})
this.searchFlag = true
}else {
this.searchList = [];
this.searchFlag = false
}
},
listLength(val,oldValue){
/* console.log("val==",val)
console.log("oldValue==",oldValue)*/
if(oldValue === 0 && val >0){
//console.log("--22--",this.jobClassList)
this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
this.dealSearchData(); // 處理搜索職位數據
// this.doAllTwoClassData() lzs
}
}
},
created() {
if(this.jobClassList && this.jobClassList.length >0){
this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
this.dealSearchData(); // 處理搜索職位數據
}
},
methods:{
clickSearchInput(){
this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
},
//input失去焦點
blurSearch(){
this.searchFlag = false;
},
downDrag(el){
el.preventDefault();//阻止input失去焦點事件時的影響
},
//職位確認
jobSure(){
// this.dialogVisible = false; //add lzs
if(this.clickTwoNameArr.length >0){
this.form.jobIntensionName = '';
this.clickTwoNameArr.forEach(item =>{
this.form.jobIntensionName = this.form.jobIntensionName + '，' + item.nameZh ;
})
this.form.jobIntensionName.length > 0 ? this.form.jobIntensionName = this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length) :'';
}else {
this.form.jobIntensionName = '';
}
this.$emit('sureJobMethod',this.clickTwoNameArr)
},
clickJobItem(item){//點擊職位類別
//console.log("item----",item)
this.clickCateObj =item;
//處理選中 顏色變化
if(this.clickOneJobNameArr.length >0){
this.clickOneJobNameArr.splice(0, 1);
this.clickOneJobNameArr.push(item.id)
}else{
this.clickOneJobNameArr.push(item.id)
}
},
//點擊二級職位名稱
clickTwoCatFun(obj){
//type: search two; =search是點擊的搜索框出現，否則就是點擊的二級
// type === 'search' ? this.jobKeyWord = obj.nameZh : '';
if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length ===1 ){
this.$message({
message: '最多選擇1個職位類別哦',
type: 'warning'
});
return
}
if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length<3){
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]++;
}
}
},
//要刪除的二級分類,改變選中顏色，改變一級分類統計數量
delChoolseTwoItem(delObj){
// var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
let index = this.clickTwoNameArr.findIndex(item =>{
return item.id === delObj.id
})
let formIndex = this.form.jobIntensionNameSel.findIndex(idVal =>{
return idVal === 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]--;
}
},
//處理搜索的數據
dealSearchData(){
this.jobClassList.forEach(item =>{
this.searchDataList = this.searchDataList.concat(item.list)
})
},
}
}
</script>
<style scoped lang="less">
.zw-dialog{
/* border: 1px solid red;*/
width:880px;
height:550px;
background:rgba(255,255,255,1);
.zw-top{
height: 52px;
width: 100%;
display: flex;
/*border: 1px solid green;*/
border-bottom: 1px solid #EFEFEF ;
.zw-word{
width: 200px;
/* text-align: center;*/
margin-left: 30px;
line-height: 52px;
font-size: 16px;
color: #333333;
}
.zw-in{
/* border: 1px solid blue;*/
width: calc(100% - 200px);
line-height: 52px;
.zw-put{
border-radius:15px;
border:1px solid rgba(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 {
/* WebKit browsers */
font-size: 12px;
color: #999999;
}
/deep/ input:-moz-placeholder{
/* Mozilla Firefox 4 to 18 */
font-size: 12px;
color: #999999;
}
/deep/ input::-moz-placeholder{
/* Mozilla Firefox 19+ */
font-size: 12px;
color: #999999;
}
/deep/ input:-ms-input-placeholder{
font-size: 12px;
color: #999999;
}
}
.in-block{
width: 200px;
height: 290px;
z-index: 11;
box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
position: relative;
background: #ffffff;
overflow: scroll;
.in-ul{
padding:5px 0px;
.in-li{
color: #000000;
padding: 10px 20px;
line-height: 20px;
font-size: 14px;
&:hover{
cursor: pointer;
background: #F7F9FD;
}
}
}
}
}
}
.zw-middle{
/*width: 100%;*/
height: 50px;
/* border: 1px solid green;*/
display: flex;
align-items: center;
padding-left: 30px;
.zw-tag{
display: inline-block;
border-radius:15px;
border:1px solid rgba(67,127,255,1);
padding: 5px 12px 5px 10px;
margin-right: 16px;
font-size:13px;
color: #437FFF;
i{
cursor: pointer;
padding-left: 4px;
}
}
.zw-more{
color: #CCCCCC;
font-size:13px;
}
.zw-sure{
display: inline-block;
width: 72px;
height: 28px;
line-height: 28px;
text-align: center;
background:rgba(67,127,255,1);
border-radius:15px;
font-size:13px;
color: #ffffff;
position: absolute;
right: 30px;
&:hover{
cursor: pointer;
}
}
}
.zw-main{
display: flex;
.zw-left{
width: 200px;
height: 443px;
overflow: scroll;
/*border: 1px solid red;*/
.zw-ul{
background:rgba(249,250,251,1);
.zw-li{
height: 50px;
/* line-height: 50px;*/
text-align: center;
align-items: center;
display: flex;
justify-content: center;
border-left: 4px solid transparent;
&:hover{
cursor: pointer;
}
/*border: 1px solid pink;*/
.li-num{
display: inline-block;
background: #437FFF;
width: 16px;
height: 16px;
line-height: 16px;
border-radius: 50%;
font-size:13px;
color:#ffffff;
margin-left: 8px;
}
}
.li-active{
border-left: 4px solid #437FFF;
background:rgba(255,255,255,1);
}
}
}
.zw-right{
/*border: 1px solid black;*/
width: calc(100% - 200px);
height: 443px;
overflow: scroll;
.right-main{
.job-tag{
display: inline-block;
margin: 16px 20px;
width: 182px;
font-size:14px;
color: #444444;
&:hover{
cursor: pointer;
}
}
.job-active{
color: #437FFF;
}
}
}
}
}
</style>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。