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>

以上就是“vue如何實現二級彈框”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。