h5 多级联动 vue 和jq的结合

た入场券 2023-02-09 14:10 7阅读 0赞

多级联动,引用一个组件很简单,自己手写一个并非易事.

由于jq的渲染太麻烦所以我就直接使用vue进行渲染数据,其他的功能部分都是引用jq来完成

## html部分 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>级联选择器</title>
        <link rel="stylesheet" href="css/qrm-pinming.css">
    
    </head>
    <body>
    
    <div class="box" id="app">
    	<div class="" style="position: relative;">
    	    <div class="qrm-input-border qrm-pinming">
    	        <input type="text" placeholder="请选择" v-model="value" class="qrm-input" style="width: 250px">
    	    </div>
    	        <div class="qrm-border1" style="display:none">
    	            <ul class="qrm-lev-1 qrm-lev">
    	                <li class="active" v-for="(items,index) in options" :key="index">
    	                    <span>{
       {items.label}}</span><i class="qrm-arrow-right" v-if="items.children "></i>
    	                    <ul class="li-zi-1" style="display: none">
    	                        <li  v-for="(item,index) in items.children" :key="index">
    	                            <span>{
       {item.label}}</span><i class="qrm-arrow-right" v-if="item.children"></i>
    	                            <ul class="li-zi-2" style="display: none">
    	                                <li v-for="(child,index) in item.children" :key="index">
    	                                    <span>{
       {child.label}}</span>
    	                                </li>
    	                                
    	                            </ul>
    	                        </li>
    	                    </ul>
    	                </li>
    	            </ul>
    	            <p class="clearfix"></p>
    	        </div>
    	        <div class="qrm-border2" style="display:none">
    	            <ul class="qrm-lev-2 qrm-lev">
    	
    	            </ul>
    	            <p class="clearfix"></p>
    	        </div>
    	        <div class="qrm-border3" style="display:none">
    	            <ul class="qrm-lev-3 qrm-lev">
    	
    	            </ul>
    	            <p class="clearfix"></p>
    	        </div>
    	        <div class="qrm-border4" style="display:none">
    	            <ul class="qrm-lev-4 qrm-lev">
    	
    	            </ul>
    	            <p class="clearfix"></p>
    	        </div>
    	        <p class="clearfix"></p>
    	    <p class="clearfix"></p>
    	</div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/qrm-pinming.js"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    
    </body>
    </html>
    <script type="text/javascript">
    	var vm = new Vue({
    		el:'#app',
    		data:{
    			value:'',  //输入框内容
    			options:[{
    								value: 'basic',
    								label: 'Basic',
    								children: [{
    									value: 'layout',
    									label: 'Layout 布局'
    								}, {
    									value: 'color',
    									label: 'Color 色彩'
    								}, {
    									value: 'typography',
    									label: 'Typography 字体'
    								}, {
    									value: 'icon',
    									label: 'Icon 图标'
    								}, {
    									value: 'button',
    									label: 'Button 按钮'
    								}]
    							}, {
    								value: 'form',
    								label: 'Form',
    								children: [{
    									value: 'radio',
    									label: 'Radio 单选框',
    									children: [{
    										value: 'radio',
    										label: '单选框三级'
    									},
    									]
    								}, {
    									value: 'checkbox',
    									label: 'Checkbox 多选框'
    								}, {
    									value: 'input',
    									label: 'Input 输入框'
    								}, {
    									value: 'input-number',
    									label: 'InputNumber 计数器'
    								}, {
    									value: 'select',
    									label: 'Select 选择器',
    									children: [{
    										value: 'radio',
    										label: '选择器三级'
    									}]
    								}, {
    									value: 'cascader',
    									label: 'Cascader 级联选择器',
    									children: [{
    										value: 'radio',
    										label: '级联选择器三级'
    									}]
    								}, {
    									value: 'switch',
    									label: 'Switch 开关'
    								}, {
    									value: 'slider',
    									label: 'Slider 滑块'
    								}, {
    									value: 'time-picker',
    									label: 'TimePicker 时间选择器'
    								}, {
    									value: 'date-picker',
    									label: 'DatePicker 日期选择器'
    								}, {
    									value: 'datetime-picker',
    									label: 'DateTimePicker 日期时间选择器'
    								}, {
    									value: 'upload',
    									label: 'Upload 上传'
    								}, {
    									value: 'rate',
    									label: 'Rate 评分'
    								}, {
    									value: 'form',
    									label: 'Form 表单'
    								}]
    							}]
    		},
    		methods:{
    			
    		},
    		
    		
    	})
    </script>

## css部分 ##

.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .clearfix{zoom:1}
    ul,li{
        list-style:none;
    }
    .qrm-input{
        outline: none;
        border:none;
        height: 38px;
        
        position: absolute;
        left: 4px;
        top: 0;
        padding: 0 10px;
    }
    .qrm-input-border{
    	position: relative;
    }
    .qrm-pinming{
        height: 38px;
        line-height: 40px;
        border:1px solid #dddddd;
        border-radius: 5px;
        position: relative;
        width: 300px;
        background-image: url("../images/qrm-arrow-down.png");
        background-repeat: no-repeat;
        background-position: 275px;
    		background-position-x: 95%;
    		background-position-y: center;
    }
    .qrm-pinming:hover{
        cursor: pointer;
    }
    .qrm-pinming input:hover{
        cursor: pointer;
    }
    .qrm-pinming-panel{
        position: absolute;
        top: 52px;
        left: -1px;
        z-index: 99999;
        width: 350px;
        height: 210px;
        background: #ffffff;
    }
    .qrm-border1{
        float: left;
        border-right: 1px solid #f1f1f1;
        box-shadow: 0 0px 5px #f1f1f1;
        position: absolute;
        top: 50px;
    }
    .qrm-border2{
        float: left;
        border-right: 1px solid #f1f1f1;
        box-shadow: 0 0px 5px #f1f1f1;
     	position: absolute;
        top: 50px;
        left: 100px;
    }
    .qrm-border3{
        float: left;
        border-right: 1px solid #f1f1f1;
        box-shadow: 0 0px 5px #f1f1f1;
        position: absolute;
        top: 50px;
        left: 200px;
    }
    .qrm-lev{
        float: left;
        margin:0;
        padding:0;
        font-size: 12px;
    }
    .qrm-lev>li{
        position: relative;
        display: block;
        padding-left: 10px;
        height: 35px;
        line-height: 35px;
    		padding-right: 20px;
    }
    .qrm-lev>li:hover{
        background: #F5F7FA;
    }
    
    .qrm-arrow-right{
        display: inline-block;
        width: 4px;
        height: 7px;
        background: url("../images/qrm-arrow-right.png") no-repeat;
        position: absolute;
        right: 7px;
        top: 14px;
    }
    
    .qrm-lev-1>li.active{
        background: #F5F7FA;
        color: #409EFF;
    
    }
    .qrm-lev-2>li.active{
        background: #F5F7FA;
        color: #409EFF;
    
    }
    .qrm-lev-3>li.active{
        background: #F5F7FA;
        color: #409EFF;
    
    }
    .qrm-lev-4>li.active{
        background: #F5F7FA;
        color: #409EFF;
    }
    .box{
    	height: 300px;
    }

## js部分 ##

js中记得引入jq包和vue包,少了都无法正常运行

$(function () {
        //控制边框高亮
        $(".qrm-input-border").click(function () {
            if($(".qrm-pinming").css("background-image").indexOf("qrm-arrow-down")!==-1){
                if($(".qrm-input").val() == ''){
                	$(".qrm-pinming").css("background-image","url(images/qrm-arrow-top.png)");
                	$(".qrm-pinming").css("border","1px solid #409EFF");
                	$(".qrm-border1").show();
                }else{
                	var s=$(".qrm-input").val()
                	console.log(s)
                	var n=(s.split('/')).length-1;
                	console.log(n)
                	if(n==1){
                		$(".qrm-border1").show();
                		$(".qrm-border2").show();
                	}else if (n==2){
                		$(".qrm-border1").show();
    	            	$(".qrm-border2").show();
    	            	$(".qrm-border3").show();
                	}
                	$(".qrm-pinming").css("background-image","url(images/qrm-arrow-top.png)");
                	$(".qrm-pinming").css("border","1px solid #409EFF");
                }
            }else {
                $(".qrm-border1").hide();
                $(".qrm-border2").hide();
                $(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
            }
        });
        //第一层
        var lev1;
        var lev2;
        var lev3;
        var lev4;
    		
    		var TwoW = ''
    		var ThreeW = ''
    		var firstW = ''
    		
    		//初始化input宽度
    		var placeholderLen = $('.qrm-input').attr('placeholder').length
    		var inputBox = placeholderLen * 10 + 70
    		var inpu = placeholderLen * 15
    		$(".qrm-pinming").css("width", inputBox+ "px");
    		$(".qrm-input").css("width", inpu + "px")
    		
        //第一层 事件代理
        $("body").on("click",".qrm-lev-1>li",function () {
            //控制背景颜色高亮
            $(this).addClass("active").siblings("li").removeClass("active");
            // 先将input中的值置空
            lev1="";
            lev2="";
            lev3="";
            lev4="";
            // 获取当前点击的li的子元素的HTML节点 将获取的节点放到页面显示的第二级中
            var html1=$(this).children(".li-zi-1").html();
            $(".qrm-lev-2").html(html1);
            $(".qrm-border2").show();
            $(".qrm-border3").hide();
            $(".qrm-lev-3").html("");
    				//$(".qrm-lev-4").html("");
            //获取当前点击的li的span中的值 将值传到input中
            lev1=$(this).children("span").html();
    				console.log(lev1)
    				var threeValue = lev1
    				var inputBox = threeValue.length * 10 + 60
    				var inpu = threeValue.length * 10
    				//$(".qrm-input").val("");
    				$(".qrm-input").val(lev1);
    				firstW = $('.qrm-lev-1').width()
    				$('.qrm-border2').css('left',firstW)
    				TwoW = $('.qrm-lev-2').width()
    				$('.qrm-border3').css('left',firstW + TwoW)
    				$(".qrm-pinming").css("width", inputBox+ "px");
    				$(".qrm-input").css("width", inpu + "px")
        });
        //第二层 事件代理
        $("body").on("click",".qrm-lev-2>li",function () {
            $(this).addClass("active").siblings("li").removeClass("active");
            if($(this).children(".li-zi-2").html()== ''){
            	lev2=$(this).children("span").html();
    					var threeValue = lev1+" / "+lev2
    					var inputBox = threeValue.length * 10 + 60
    					var inpu = threeValue.length * 10
            	$(".qrm-input").val(lev1+" / "+lev2);
            	$(".qrm-border1").hide();
              $(".qrm-border2").hide();
            	$(".qrm-border3").hide();
    					$(".qrm-pinming").css("width", inputBox+ "px");
    					$(".qrm-input").css("width", inpu + "px")
            	$(".qrm-pinming").css("border","1px solid #ddd");
              $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
            }else{
            	var html2=$(this).children(".li-zi-2").html();
    	        lev2=$(this).children("span").html();
    	     	$(".qrm-border3").show();
    	        $(".qrm-lev-3").html(html2);
            }
            if($(this).parent().parent().next().children(".qrm-lev").html()==""){
                // 去掉输入框的高亮状态
                $(".qrm-border1").hide();
                $(".qrm-border2").hide();
                $(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
            }
    //      $(".qrm-lev-4").html("");
    //      $(".qrm-input").val(lev1+"/"+lev2);
        });
        //第三层 事件代理
        $("body").on("click",".qrm-lev-3>li",function () {
            $(this).addClass("active").siblings("li").removeClass("active");
            var html3=$(this).children(".li-zi-3").html();
            lev3=$(this).children("span").html();
    				var threeValue = lev1+" / "+lev2+" / "+lev3
    				var inputBox = threeValue.length * 10 + 60
    				var inpu = threeValue.length * 10 
    //      $(".qrm-lev-4").html(html3);
            $(".qrm-input").val(lev1+" / "+lev2+" / "+lev3);
            $(".qrm-border1").hide();
            $(".qrm-border2").hide();
            $(".qrm-border3").hide();
            $(".qrm-pinming").css("border","1px solid #ddd");
    				$(".qrm-pinming").css("width", inputBox+ "px");
    				$(".qrm-input").css("width", inpu + "px")
            $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
            if($(this).parent().parent().next().children(".qrm-lev").html()==""){
                // 去掉输入框的高亮状态
                // $(".qrm-input").val(lev1+"/"+lev2);
                $(".qrm-border1").hide();
                $(".qrm-border2").hide();
                $(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
            }
    
        });
        //第三层 事件代理
    //  $("body").on("click",".qrm-lev-4>li",function () {
    //      $(this).addClass("active").siblings("li").removeClass("active");
    //      lev4=$(this).children("span").html();
    //      $(".qrm-pinming-panel").hide();
    //      $(".qrm-pinming").css("border","1px solid #ddd");
    //      $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
    //      $(".qrm-input").val(lev1+"/"+lev2+"/"+lev3+"/"+lev4);
    //  });
    //给四个区域绑定点击事件 判断当前的下一个区域 如果为空 点击当前区域 qrm-pinming-panel 隐藏 并且把input高亮去掉
        $("body").on("click",".qrm-lev>li",function () {
            if($(this).parent().parent().next().children(".qrm-lev").html()==""){
                // 去掉输入框的高亮状态
                $(".qrm-border1").hide();
                $(".qrm-border2").hide();
                $(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
            }
        })
    });
    //点击空白处隐藏div
    $(document).click(function(event){
            var x1 = $('.box');  // 设置目标区域
            if(!x1.is(event.target) && x1.has(event.target).length === 0){ // Mark 1
            	$(".qrm-border1").hide();
                $(".qrm-border2").hide();
                $(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(images/qrm-arrow-down.png)");
    						$('#divTop').slideUp('slow');  //滑动消失
    						$('.qrm-pinming-panel').hide(300);     //淡出消失
            }
       });

这个例子的输入框的宽度都是由内容撑开,选择列表的位置是根据前一个选择列表的宽度决定的,

实现效果如下

![2020051910462885.png][]![20200519104638730.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70 1][]

![20200519104718687.png][]

![2020051910473062.png][]

[2020051910462885.png]: https://img-blog.csdnimg.cn/2020051910462885.png
[20200519104638730.png]: https://img-blog.csdnimg.cn/20200519104638730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519104653284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200519104706683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70
[20200519104718687.png]: https://img-blog.csdnimg.cn/20200519104718687.png
[2020051910473062.png]: https://img-blog.csdnimg.cn/2020051910473062.png