<template>
//单选
<div id="app">
<button @click="dian($event,i)" :class="{ac:iNow == i}"
v-for="(v,i) in list" :key="i">
{{v}}
</button>
//全选
<ul>
<li v-for="(v,i) in arr" :class="{a:v.b}" :key="i" @click="duo(i)">{{v.a}}</li>
</ul>
//拖拽
<div v-drag class="tuo">
</div>
</div>
</template>
<script>
export default {
data(){
return{
list:[
'嘿',
'嘿嘿嘿',
'嘿嘿嘿嘿',
'嘿嘿',
],
iNow:0,
arr:[
{a:'a',b:false},
{a:'b',b:false},
{a:'c',b:false},
{a:'d',b:false},
{a:'e',b:false}
]
}
},
methods: {
dian(ev,i){
console.log(ev.target.classList.contains('ac'))
if(ev.target.classList.contains('ac')){
this.iNow =-1;
}else{
this.iNow = i;
}
},
duo(i) {
console.log(i);
this.arr[i].b = !this.arr[i].b;
}},
//随机拖拽 自定义指令
directives:{
// 自定义指令名
drag:{
/* 拖拽实现原理
手指按下时获取手指按下的位置
手指拖动时获取手指拖动的位置
手指抬起时清除所有事件
*/
// 方法名
inserted:function(el){
console.log(el)
// el ： 当前元素 ontouchstart : 当前元素按下事件
el.ontouchstart=function(ev){
console.log(ev)
// 获取手指按下的位置 changedTouches[0] : 获取按下的第一个手指
// ev.changedTouches[0].pageX 手指距离浏览器左边的距离
// el.offsetLeft 元素距离浏览器左边的距离
// disX 手指距离元素的距离
var disX=ev.changedTouches[0].pageX-el.offsetLeft;
var disY=ev.changedTouches[0].pageY-el.offsetTop;
// ontouchmove ： 手指滑动事件
document.ontouchmove=function(ev){
// 判断手指滑动的距离
var l=ev.changedTouches[0].pageX-disX;
var t=ev.changedTouches[0].pageY-disY;
// 移动要滑动元素的位置
el.style.left = l+'px';
el.style.top = t+'px';
}
// ontouchend ： 手指弹起
document.ontouchend=function(){
// 让手指移动事件和手指按下事件清空
document.ontouchmove=null;
document.ontouchend=null;
}
// 阻止默认事件
ev.preventDefault && ev.preventDefault();
}
}
}
},
}
</script>
<style lang="scss" scoped>
#app{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: flex;
justify-content: space-around;
align-items: center;
}
li{
width: 20%;
border: 1px solid black;
text-align: center;
}
button{
margin: 10px;
padding: 5px;
}
.a{
background: red;
color:white;
}
.lis{
width: 200px;
height: 200px;
background: red;
}
.ac{
background: orangered;
color: white;
border:none;
}
.tuo{
position: absolute; /*定位*/
top: 160px;
left: 20px;
width: 100px;
height: 100px;
background: red; /*设置一下背景*/
}
</style>
