记录一个简单且常用的功能，通过按键+鼠标左键来实现批量选中的功能。
本Demo极为简单，废话不多说，直接贴代码了，里面也有步步注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
div#app {
text-align: center;
}
.more_choose li {
padding: 10px 0;
margin: 5px 0;
border: 1px solid #b6b6b6;
}
.more_choose li:hover {
background-color: #ccc;
}
.more_choose li.active {
background-color: red;
color:#fff;
}
</style>
</head>
<body>
<div id="app">
<!-- 实现CTRL+鼠标左键实现批量选择 -->
<div class="more_choose">
<ul>
<li v-for="item in list" :class="{'active':(chooseList instanceof Array && chooseList.includes(item)) || chooseList===item}" @click="handleClick(item)">{{item}}</li>
</ul>
<div style="margin-top:20px;">选中内容：{{printContent}}</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue( {
el: '#app',
data() {
return {
list: [1,2,3,4,5,6,7,8,9,10],
chooseList: [],
printContent: '',
isCtrl: false
}
},
created() {
this.chooseList = []
},
mounted() {
// 绑定按下键与释放键的事件
window.addEventListener('keydown',this.handleCtrlDown)
window.addEventListener('keyup',this.handleCtrlUp)
},
methods: {
// 实现CTRL+鼠标左键实现批量选择
handleClick(item) {
if (!this.isCtrl && this.chooseList !== item) {
// 单选
this.chooseList = item
} else if (this.isCtrl && !this.chooseList.includes(item)) {
// 多选添加
this.chooseList.push(item)
} else if (this.isCtrl&&this.chooseList.includes(item)) {
// 多选重复删除
let index = this.chooseList.indexOf(item)
this.chooseList.splice(index, 1)
} else if (!this.isCtrl&&this.chooseList === item) {
// 单选重复删除
this.chooseList = ''
}
this.printContent = this.chooseList instanceof Array ? this.chooseList.join(',') : this.chooseList
},
// 按下Ctrl键
handleCtrlDown() {
if (!this.isCtrl) {
this.isCtrl = true
// 如果选中项不是数组，则需转化为数组
if (!(this.chooseList instanceof Array)) {
// 存储已经选中的数据
let choosedata = this.chooseList
this.chooseList = [choosedata]
}
}
},
// 释放Ctrl键
handleCtrlUp() {
if (this.isCtrl) {
this.isCtrl = false
}
}
}
} )
</script>
</html>
网友评论