У меня есть несколько компонентов.
Мне нужно выделять активную строку, по которой был щелчок мыши. Сложность в том, что одновременно может быть выделен только один элемент
<template>
<div >
<div class = "main-window">
<ul >
<Directoire
v-bind:directories="directories"
/>
<span>{{firstWindow[0].dir}}</span>
<BackRowVue
v-if="!(firstWindow[0].dir.length < 4)"
v-bind:whichScreen="whichScreen"
v-bind:firstWindow="firstWindow"
v-bind:secondWindow="secondWindow"
@newvalue="newvalue"
/>
<Item class = "modal"
v-for="elem of firstWindow"
v-bind:key="elem"
v-bind:elem="elem"
v-bind:whichScreen="whichScreen"
v-bind:firstWindow="firstWindow"
v-bind:secondWindow="secondWindow"
@newvalue="newvalue"
@selectelem="selectelem"
/>
<button @click="backToHomeDir(firstWindow[0].dir, whichScreen)"> Back to home </button>
</ul>
<ul >
<Directoire
v-bind:directories="directories"
/>
<span>{{secondWindow[0].dir}}</span>
<BackRowVue
v-if="!(secondWindow[0].dir.length < 4)"
v-bind:whichScreen="!whichScreen"
v-bind:firstWindow="firstWindow"
v-bind:secondWindow="secondWindow"
@newvalue="newvalue"
/>
<Item class = "modal"
v-for="elem of secondWindow"
v-bind:key="elem"
v-bind:elem="elem"
v-bind:whichScreen="!whichScreen"
v-bind:firstWindow="firstWindow"
v-bind:secondWindow="secondWindow"
@newvalue="newvalue"
@selectelem="selectelem"
/>
<button @click="backToHomeDir(firstWindow[0].dir, !whichScreen)"> Back to home </button>
</ul>
</div>
<div class = "control-button">
<button @click="relocate(currentElem, firstWindow, secondWindow)">Перенести</button>
<button @click="copy(currentElem, firstWindow, secondWindow)">Скопировать</button>
<button @click="remove(currentElem)">Удалить</button>
</div>
</div>
</template>
<script>
import Item from '@/components/itemVue.vue'
import Directoire from '@/components/DirectoriesVue.vue'
import BackRowVue from '@/components/BackRowVue.vue'
// import { json } from 'express'
export default {
props: ['firstWindow','secondWindow', 'directories', 'firstDir', 'secondDir', 'whichScreen', 'flagForBack','windows'],
components:{
Item,
Directoire,
BackRowVue
},
data(){
return{
flagForButton:false,
currentElem:{}
}
},
methods:{
newvalue(data){
this.$emit('newvalue', data);
},
selectelem(elem){
this.currentElem = elem;
},
copy(currentElem, firstWindow, secondWindow){
console.log("dsadsad");
console.log(this.currentElem);
if(this.currentElem.whichScreen){
currentElem['where'] = secondWindow[0].dir;
}else{
currentElem['where'] = firstWindow[0].dir;
}
fetch('/copy',{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(currentElem)
})
.then(response => response.json())
.then(json =>this.$emit("newvalue", [json.table, !this.currentElem.whichScreen]))
},
relocate(currentElem, firstWindow, secondWindow){
if(this.currentElem.whichScreen){
currentElem['where'] = secondWindow[0].dir;
}else{
currentElem['where'] = firstWindow[0].dir;
}
fetch('/relocate',{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(currentElem)
})
.then(response => response.json())
.then(json =>this.$emit("newvalueforbothwindows", [JSON.parse(json[0]), JSON.parse(json[1])])) // обновляем сразу два окна
},
remove(currentElem){
fetch('/delete',{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(currentElem)
})
.then(response => response.json())
.then(json =>this.$emit("newvalue", [json.table, this.currentElem.whichScreen]))
},
backToHomeDir(dir, whichScreen){
let sendInfo = {
dir: dir,
whichScreen: whichScreen
};
fetch('/goHome',{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(sendInfo)
})
.then(response => response.json())
.then(json =>this.$emit("newvalue", [json.table, this.currentElem.whichScreen]))
}
},
}
</script>
<template>
<div class = "row__elements">
<div @click="clickOnRow(elem, whichScreen)" class = "row__element" v-bind:class = "activeClass">
<img class = "file-info icon" :src = "imgSrc.icon"/>
<div class = "file-info title"> {{elem.fileName}} </div>
<div class = "file-info size"> {{elem.sizeOrType}} </div>
<div class = "file-info date"> {{elem.dateOfChange}} </div>
</div>
</div>
</template>
В этом компоненте мы отрисовываем текущую строку и заносим в нее данные
<script>
export default {
props:{
elem:{
type:Object,
default: () => ({}),
},
whichScreen:{
type:Boolean,
// default: false,
},
},
data()
{
return{
delay: 500,
clicks: 0,
timer: null,
activeClass:"",
obj: this.elem
}
},
methods:{
clickOnRow: function(elem, whichScreen){
this.clicks++
if(this.clicks === 1) {
var self = this
this.timer = setTimeout(function() {
console.log("одинарный");
self.clicks = 0
}, this.delay);
elem['buttonON'] = true; // нужно ?
// makeActive();
console.log(elem.buttonON);
elem["whichScreen"] = whichScreen;
this.$emit("selectelem", elem)
} else{
clearTimeout(this.timer);
console.log("двойной");
elem['whichScreen'] = whichScreen;
elem['downOrUp'] = true;
this.clicks = 0;
fetch('/currentDir1',{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(elem)
})
.then(response => response.json())
.then(json =>this.$emit("newvalue", [json.table, whichScreen]))
}
},
makeActive:function(elem){
this.activeClass = elem;
},
imgSrc: function(){
return this.obj
},
// addDefaultValue: function(elem){
// if(elem){
// return elem
// }else{
// return ""
// }
// }
},
}
</script>
Простой
