rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

improves custom v-closable directive

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-12 21:35:35 +02:00
parent a57ffdb6c6
commit 3232710a4c
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lootalot_front/src/components/GroupChest.vue
View File

@@ -8,7 +8,7 @@
<h1 class="title">Coffre de groupe</h1>
</div>
</div>
<Chest player=0></Chest>
<Chest :player="0"></Chest>
</section>
</template>

17
lootalot_front/src/components/Player.vue
View File

@@ -15,7 +15,7 @@
</a>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu"
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
<div class="dropdown-content">
<a v-for="(p,i) in player_list" :key="i"
@click="setActivePlayer(i)"
@@ -75,6 +75,7 @@
],
show_dropdown: false,
edit_wealth: false,
handleOutsideClick: null,
};
},
computed: {
@@ -109,7 +110,6 @@
'closable': {
bind: function(el, binding, vnode) {
handleOutsideClick = (e) => {
console.log("outsideClick");
e.stopPropagation();
const { exclude, handler } = binding.value;
let excludedElClicked = false;
@@ -125,12 +125,21 @@
vnode.context[handler]()
}
};
},
// Bind custom handler only when dropdown is visible
update: function(el, binding, vnode, _) {
const { visible } = binding.value;
if (visible) {
document.addEventListener('click', handleOutsideClick);
document.addEventListener('touchstart', handleOutsideClick);
} else {
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
},
unbind: function() { console.log("unbind");
document.removeEventListener('click', handleOustideClick);
document.removeEventListener('touchstart', handleOustideClick);
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
}
}