h5 多級聯動 vue 和jq的結合

多級聯動,引用一個組件很簡單,自己手寫一個並非易事.

由於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);     //淡出消失
        }
   });

這個例子的輸入框的寬度都是由內容撐開,選擇列表的位置是根據前一個選擇列表的寬度決定的,

實現效果如下

h5 多級聯動 vue 和jq的結合

html部分

css部分

js部分

2024年DataOps趨勢預測：AI不會取代數據工程師

雲原生週刊：K8s 中的服務和網絡｜ 2024.4.29

通過Http鏈接地址爬取有贊微信商城商品信息及下載至EXCEL

[轉帖]cpupower

今天，昨天，近七天，近30天，近90天，js封裝

華爲云云原生FinOps解決方案，釋放雲原生最大價值

ehcarts line先從折線變弧線

樹形單選框input_radio菜單

select_option設置默認值

boostrapTable 切換頁面時無法顯示問題

echart 柱形圖和折線圖合併

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結