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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。