<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入element-ui CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" v-cloak>
<div id="options">
<div class="title">
<el-checkbox :indeterminate="isIndeterminate" v-model="isCheckAll" @change="checkAll">
全选
</el-checkbox>
</div>
<div class="buttons" v-for="(item, index) in allOptions" :id="item" :key="index" @click="checkSingle">
{{item}}
<div class="select-border" v-show="checkedOptions.indexOf(item) != -1">
<span class="select-border-text">✓</span>
</div>
</div>
</div>
</div>
<style>
/** vue需要在引入element-ui之前引入 **/
[v-cloak] {
display: none;
}
#options {
width: 220px;
display: flow-root;
}
.title {
margin: 8px 0 0 10px;
font-size: 15px;
}
.buttons {
position: relative;
margin: 3px 6px 5px 4px;
text-align: center;
width: calc(50% - 10px);
float: left;
line-height: 40px;
background-color: #edeff7;
cursor: pointer;
}
.select-border {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 32px solid #1890ff;
border-left: 32px solid transparent;
}
.select-border-text {
position: absolute;
top: -40px !important;
right: 2px;
color: #fff;
}
</style>
</body>
<!-- vue需要在引入element-ui之前引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入element-ui js -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
visible: false,
isIndeterminate: false,
isCheckAll: false,
allOptions: ["选项1", "选项2", "选项3", "选项4", "选项5", "选项6", "选项7",],
checkedOptions: ["选项1", "选项2",],
}
},
methods: {
// 全选 或者 全不选
checkAll (isAll) {
this.isCheckAll = isAll
this.isIndeterminate = false
let buttons = document.getElementById('options').children
for (let i = 1; i < buttons.length; i++) {
let displayStatus = buttons[i].children[0].style.display
if (isAll) {
// 选中所有
if (displayStatus == "block") {
continue
} else {
buttons[i].children[0].style.display = 'block'
}
} else {
// 全部不选
if (displayStatus == "none") {
continue
} else {
buttons[i].children[0].style.display = 'none'
}
}
}
if (isAll) {
this.selectLayers = this.filterLayers
} else {
this.selectLayers = []
}
},
// 选中单个选项
checkSingle (event) {
let target = event.currentTarget
let id = target.id
// 获取当前div元素的选中状态
let element = target.children[0]
let showStatus = element.style.display
// 控制图层的显隐
if (showStatus == "none") {
element.style.display = 'block'
this.checkedOptions.push(id)
} else {
element.style.display = 'none'
this.checkedOptions = this.checkedOptions.filter(ele => ele != id)
}
// 判断是否全选或者全不选
let children = target.parentElement.children
let blockCount = 0, noneCount = 0;
let tempSelectLayer = []
debugger
for (let i = 1; i < children.length; i++) {
let displayStatus = children[i].children[0].style.display
if (displayStatus == "none") {
noneCount++
} else {
blockCount++
}
}
// 更新“全选”checkbox的状态
if (blockCount > 0 && noneCount > 0) {
// 部分选中，部分不选
this.isCheckAll = false
this.isIndeterminate = true
} else if (blockCount > 0 && noneCount == 0) {
// 全部选中
this.isCheckAll = true
this.isIndeterminate = false
} else if (blockCount == 0 && noneCount > 0) {
// 全部不选
this.isCheckAll = false
this.isIndeterminate = false
} else {
return
}
}
}
})
</script>
</html>
评论0