VUE+element-ui实现卡⽚式平铺布局（⽆分页）本⽂借鉴了⼀部分上⽂，卡⽚布局部分不再是⾃⼰写 DIV 和 CSS ，⽽是改⽤了  element-ui  的 “card 卡⽚”，
并且添加了全选 和 其他功能。
关键点：【最开始这两个点疏忽了，调了⼀下午。是个⼩坑】
1、input 的 id  和  label 的 for  都要独⽴，保证唯⼀（最⽅便的就是使⽤ item 中的唯⼀字段）
2、input 的 id  和  label 的 for  要⼀⼀对应
这是浏览器效果：
以下是代码实现：
【CSS部分较多，这⾥为了⽅便全写到 HTML ⾥⾯了，实际使⽤时CSS还是单独放⼀个⽂件】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="cdn.bootcss/layer/2.3/skin/layer.css">
<link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- import jquery -->
<script
src="code.jquery/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="unpkg/vue/dist/vue.js"></script>
<script src="unpkg/element-ui/lib/index.js"></script>
<script src="cdn.bootcss/layer/2.3/layer.js"></script>
</head>
<style type="text/css">
/*!
* icheck-bootstrap v3.0.1 (github/bantikyan/icheck-bootstrap)
* Copyright 2018 Hovhannes Bantikyan.
* Copyright 2018 Hovhannes Bantikyan.
* Licensed under MIT (github/bantikyan/icheck-bootstrap/blob/master/LICENSE) */
[class*="icheck-"] {
min-height: 22px;
margin-top: 6px !important;
margin-bottom: 6px !important;
padding-left: 0px;
}
.icheck-inline {
display: inline-block;
}
.icheck-inline + .icheck-inline {
margin-left: .75rem;
margin-top: 6px;
}
[class*="icheck-"] > label {
padding-left: 29px !important;
min-height: 22px;
line-height: 22px;
display: inline-block;
position: relative;
vertical-align: top;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
[class*="icheck-"] > input:first-child {
position: absolute !important;
opacity: 0;
margin: 0;
}
[class*="icheck-"] > input:first-child:disabled {
cursor: default;
}
[class*="icheck-"] > input:first-child + label::before,
[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before {
content: "";
display: inline-block;
position: absolute;
width: 22px;
height: 22px;
border: 1px solid #D3CFC8;
border-radius: 0px;
margin-left: -24px;
}
[class*="icheck-"] > input:first-child:checked + label::after,
[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 7px;
height: 10px;
border: solid 2px #fff;
margin-left: 5px;
border-left: none;
border-left: none;
border-top: none;
transform: translate(7.75px, 4.5px) rotate(45deg);
-ms-transform: translate(7.75px, 4.5px) rotate(45deg);
}
[class*="icheck-"] > input[type="radio"]:first-child + label::before,
[class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label::before {
border radius什么意思
border-radius: 50%;
}
[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label::before,
[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-width: 2px;
}
[class*="icheck-"] > input:first-child:disabled + label,
[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label,
[class*="icheck-"] > input:first-child:disabled + label::before,
[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label::before {
pointer-events: none;
cursor: default;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
.icheck-default > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-default > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #adadad;
}
.icheck-default > input:first-child:checked + label::before,
.icheck-default > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #e6e6e6;
border-color: #adadad;
}
.icheck-default > input:first-child:checked + label::after,
.icheck-default > input:first-child:checked + input[type="hidden"] + label::after {
border-bottom-color: #333;
border-right-color: #333;
}
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #2e6da4;
}
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #337ab7;
border-color: #2e6da4;
}
.icheck-success > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-success > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #4cae4c;
}
.icheck-success > input:first-child:checked + label::before,
.icheck-success > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #5cb85c;
border-color: #4cae4c;
}
}
.icheck-info > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-info > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #46b8da;
}
.icheck-info > input:first-child:checked + label::before,
.icheck-info > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #5bc0de;
border-color: #46b8da;
}
.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #eea236;
}
.icheck-warning > input:first-child:checked + label::before,
.icheck-warning > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #f0ad4e;
border-color: #eea236;
}
.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #d43f3a;
}
.icheck-danger > input:first-child:checked + label::before,
.icheck-danger > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #d9534f;
border-color: #d43f3a;
}
.icheck-turquoise > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-turquoise > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #1abc9c;
}
.icheck-turquoise > input:first-child:checked + label::before,
.icheck-turquoise > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #1abc9c;
border-color: #1abc9c;
}
.icheck-emerland > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-emerland > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #2ecc71;
}
.icheck-emerland > input:first-child:checked + label::before,
.icheck-emerland > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #2ecc71;
border-color: #2ecc71;
}
.icheck-peterriver > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-peterriver > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #3498db;
}
.icheck-peterriver > input:first-child:checked + label::before,
.icheck-peterriver > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #3498db;
border-color: #3498db;
border-color: #3498db;
}
.icheck-amethyst > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-amethyst > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #9b59b6;
}
.icheck-amethyst > input:first-child:checked + label::before,
.icheck-amethyst > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #9b59b6;
border-color: #9b59b6;
}
.icheck-wetasphalt > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-wetasphalt > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #34495e;
}
.icheck-wetasphalt > input:first-child:checked + label::before,
.icheck-wetasphalt > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #34495e;
border-color: #34495e;
}
.icheck-greensea > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-greensea > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #16a085;
}
.icheck-greensea > input:first-child:checked + label::before,
.icheck-greensea > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #16a085;
border-color: #16a085;
}
.icheck-nephritis > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-nephritis > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #27ae60;
}
.icheck-nephritis > input:first-child:checked + label::before,
.icheck-nephritis > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #27ae60;
border-color: #27ae60;
}
.icheck-belizehole > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-belizehole > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {    border-color: #2980b9;
}
.icheck-belizehole > input:first-child:checked + label::before,
.icheck-belizehole > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #2980b9;
border-color: #2980b9;
}
.icheck-wisteria > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-wisteria > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #8e44ad;
}
.icheck-wisteria > input:first-child:checked + label::before,
.icheck-wisteria > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #8e44ad;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。