최동원

add mouse event

...@@ -18,22 +18,66 @@ ...@@ -18,22 +18,66 @@
18 <v-list-item 18 <v-list-item
19 v-for="item in this.$store.getters.folderL" 19 v-for="item in this.$store.getters.folderL"
20 :key="item.title" 20 :key="item.title"
21 + :search="search"
22 + @click.right="show"
23 + @click.left="moveF(item.folder_name)"
21 > 24 >
22 - <v-list-item-avatar @click="moveF(item.folder_name)"> 25 + <v-list-item-avatar >
23 <v-icon>mdi-folder</v-icon> 26 <v-icon>mdi-folder</v-icon>
24 </v-list-item-avatar> 27 </v-list-item-avatar>
25 - <v-list-item-content @click="moveF(item.folder_name)"> 28 + <v-list-item-content >
26 <v-list-item-title v-text="item.folder_name"></v-list-item-title> 29 <v-list-item-title v-text="item.folder_name"></v-list-item-title>
27 </v-list-item-content> 30 </v-list-item-content>
28 - <v-list-item-action>
29 - <v-btn icon>
30 - <v-icon color="grey lighten-1">mdi-information</v-icon>
31 - </v-btn>
32 - <v-btn icon @click="deleteF(item.folder_name)">
33 - <v-icon color="grey lighten-1">mdi-delete</v-icon>
34 - </v-btn>
35 - </v-list-item-action>
36 </v-list-item> 31 </v-list-item>
32 +
33 +
34 + <v-menu
35 + v-model="showMenu"
36 + :position-x="x"
37 + :position-y="y"
38 + absolute
39 + offset-y
40 + >
41 + <v-list dense>
42 + <v-list-item @click.prevent="dialog2 = !dialog2">
43 + <v-list-item-title>이동</v-list-item-title>
44 + </v-list-item>
45 + <v-list-item @click.prevent="deleteF">
46 + <v-list-item-title>삭제</v-list-item-title>
47 + </v-list-item>
48 + </v-list>
49 + </v-menu>
50 +
51 + <v-dialog
52 + v-model="dialog2"
53 + width="500px"
54 + >
55 + <v-card>
56 + <v-card-title class="grey darken-2">
57 + Move Folder
58 + </v-card-title>
59 + <v-container>
60 + <div>
61 + <v-icon>mdi-folder</v-icon>
62 + <v-text-field placeholder="name" id="foldername" type="text" v-model="foldername"></v-text-field>
63 + </div>
64 + </v-container>
65 + <v-card-actions>
66 + <v-spacer></v-spacer>
67 + <v-btn
68 + text
69 + color="primary"
70 + @click="dialog2 = false"
71 + >Cancel</v-btn>
72 + <v-btn
73 + text
74 + @click=""
75 + >Move</v-btn>
76 + </v-card-actions>
77 + </v-card>
78 + </v-dialog>
79 +
80 +
37 <v-divider inset></v-divider> 81 <v-divider inset></v-divider>
38 <v-subheader inset>Files</v-subheader> 82 <v-subheader inset>Files</v-subheader>
39 <v-list-item 83 <v-list-item
...@@ -99,7 +143,7 @@ ...@@ -99,7 +143,7 @@
99 </v-btn> 143 </v-btn>
100 <v-dialog 144 <v-dialog
101 v-model="dialog" 145 v-model="dialog"
102 - width="800px" 146 + width="500px"
103 > 147 >
104 <v-card> 148 <v-card>
105 <v-card-title class="grey darken-2"> 149 <v-card-title class="grey darken-2">
...@@ -138,7 +182,13 @@ import Axios from 'axios'; ...@@ -138,7 +182,13 @@ import Axios from 'axios';
138 files: [], 182 files: [],
139 search:'', 183 search:'',
140 id: '', 184 id: '',
141 - dialog:false 185 + dialog:false,
186 + search: '',
187 + howMenu: false,
188 + showMenu: false,
189 + x: 0,
190 + y: 0,
191 + dialog2:false
142 } 192 }
143 }, 193 },
144 async created(){ 194 async created(){
...@@ -226,6 +276,15 @@ import Axios from 'axios'; ...@@ -226,6 +276,15 @@ import Axios from 'axios';
226 console.log("에러"); 276 console.log("에러");
227 console.log(error.response.data); 277 console.log(error.response.data);
228 } 278 }
279 + },
280 + show (e) {
281 + e.preventDefault()
282 + this.showMenu = false
283 + this.x = e.clientX
284 + this.y = e.clientY
285 + this.$nextTick(() => {
286 + this.showMenu = true
287 + })
229 } 288 }
230 } 289 }
231 } 290 }
......
...@@ -6,8 +6,8 @@ Vue.use(Vuex) ...@@ -6,8 +6,8 @@ Vue.use(Vuex)
6 export default new Vuex.Store({ 6 export default new Vuex.Store({
7 state: { 7 state: {
8 id: '', 8 id: '',
9 - folders: {}, 9 + folders: [],
10 - files: {}, 10 + files: [],
11 cur: '/', 11 cur: '/',
12 parent: '/' 12 parent: '/'
13 }, 13 },
......