vue 和jq的结合"/>
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').lengthvar inputBox = placeholderLen * 10 + 70var 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 = lev1var inputBox = threeValue.length * 10 + 60var 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+" / "+lev2var inputBox = threeValue.length * 10 + 60var 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+" / "+lev3var inputBox = threeValue.length * 10 + 60var 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的结合
发布评论