Created
May 19, 2020 16:33
-
-
Save Musinux/1dc5704b6c8582f397b5bfebdfb5e6f2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="hello"> | |
<button class="dropdown-printer" v-on:click="showTrucs">click me! </button> | |
<div ref="dropdown" id="dropdown" v-show="show" :style="styleDropdown()"> | |
<button v-for="item of items" :key="item">{{ item }}</button> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'HelloWorld', | |
data: () => { | |
return { | |
lastButtonClicked: null, | |
show: false, | |
items: ['machin', 'bidule', 'truc'] | |
} | |
}, | |
methods: { | |
showTrucs (evt) { | |
this.show = !this.show | |
this.lastButtonClicked = evt.target | |
}, | |
styleDropdown () { | |
if (!this.lastButtonClicked) return {} | |
const posFinal = this.lastButtonClicked.getBoundingClientRect() | |
const dropdown = this.$refs.dropdown | |
console.log('dropdown', dropdown) | |
console.log('posfinal', posFinal) | |
return { | |
top: (posFinal.y + posFinal.height) + 'px', | |
left: posFinal.x + 'px' | |
} | |
} | |
} | |
} | |
</script> | |
<!-- Add "scoped" attribute to limit CSS to this component only --> | |
<style scoped> | |
.dropdown-printer { | |
padding: 10px; | |
background-color: lightgreen; | |
border: 1px solid black; | |
} | |
#dropdown { | |
position: absolute; | |
width: 90px; | |
border: 1px solid black; | |
} | |
#dropdown button { | |
display: block; | |
} | |
</style> |
Tu peux c/c ton code ? au pire on regarde demain.
Oui Non mais tkt pas on regardera demain y'a pas grande urgence
Le mar. 19 mai 2020 à 22:04, Louis Cherel <notifications@github.com> a
écrit :
… ***@***.**** commented on this gist.
------------------------------
Tu peux c/c ton code ? au pire on regarde demain.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<https://gist.github.com/1dc5704b6c8582f397b5bfebdfb5e6f2#gistcomment-3310506>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AKXBQV3Q3NPJ6R6YT4GRXUDRSLQ4HANCNFSM4NFGFLWQ>
.
<template>
<div id= "village">
<label class="ressource" for="OR">OR</label>
<label class="ressource" for = "FER">FER</label>
<label class="ressource" for = "BOIS">BOIS</label>
<label class="ressource" for="EAU">EAU</label>
<label class="ressource" for = "BLE">BLE</label>
<label class="ressource" for = "PIERRE">PIERRE</label>
<button class="bouton" v-on:click ="createparam" >{{'PARAM'}}</button>
<router-link to = "./village">
<button class="bouton" v-on:click ="createattaque" >{{'ATTAQUE'}}</button></router-link>
<button class="bouton" v-on:click ="createdefense" >{{'ARMEE'}}</button>
<button class="bouton" v-on:click ="createbatiment" >{{'BATIMENT'}}</button>
<button class="bouton" v-on:click ="createameliorer" >{{'AMELIORER'}}</button>
<div ref="defense" id="dropdown" v-show= "showdefense" :style="styleDropdown()" >
<button v-for="defense of defenses" :key="defense.id">{{defense.name}}</button>
</div>
</div>
</template>
<script>
export default {
name: "village",
data() {
return {
showdefense: false,
lastButtonCliked: null,
idplayer: 0,
pseudo: "null",
defenses:[
{id: 0,name: 'douve'},
{id: 1, name: 'tower'}
]
};
},
methods:{
createdefense(evt){
this.showdefense = !this.showdefense
this.lastButtonCliked = evt.target
console.log(evt)
},
styleDropdown () {
if (!this.lastButtonClicked) return {}
const posFinal = this.lastButtonClicked.getBoundingClientRect()
const dropdown = this.$refs.dropdown
console.log('defense', dropdown)
console.log('posfinal', posFinal)
return {
top: (posFinal.y + posFinal.height) + 'px',
left: posFinal.x + 'px'
}
},
createameliorer(){
} ,
createparam(){
},
createattaque(){
},
createbatiment(){
}
}
}
</script>
<style scoped>
.ressource{
display: flex;
flex-direction: column;
margin-left:120%;
}
input {
display: flex;
margin-bottom: 10px;
width: 150px;
margin-left: 7%;
}
#dropdown {
position: absolute;
width: 90px;
border: 1px solid black;
}
#defense button{
display: block;
}
.bouton{
background: #6AB6D8;
padding: 10px;
margin-top: 40%;
margin-left: 10%;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative
}
</style>
<button class="bouton" v-on:click ="createameliorer" >{{'AMELIORER'}}</button>
<div ref="defense" id="dropdown" v-show= "showdefense" :style="styleDropdown()" >
<button v-for="defense of defenses" :key="defense.id">{{defense.name}}</button>
<script>
export default {
name: "village",
data() {
return {
showdefense: false,
lastButtonCliked: null,
idplayer: 0,
pseudo: "null",
defenses:[
{id: 0,name: 'douve'},
{id: 1, name: 'tower'}
]
};
},
methods:{
createdefense(evt){
this.showdefense = !this.showdefense
this.lastButtonCliked = evt.target
},
styleDropdown () {
if (!this.lastButtonClicked) return {}
const posFinal = this.lastButtonClicked.getBoundingClientRect()
const dropdown = this.$refs.dropdown
console.log('defense', dropdown)
console.log('posfinal', posFinal)
return {
top: (posFinal.y + posFinal.height) + 'px',
left: posFinal.x + 'px'
}
},
createameliorer(){
} ,
createparam(){
},
createattaque(){
},
createbatiment(){
}
}
}
</script>
<button class="bouton" v-on:click ="createameliorer" >{{'AMELIORER'}}</button>
<div ref="defense" id="dropdown" v-show= "showdefense" :style="styleDropdown()" >
<button v-for="defense of defenses" :key="defense.id">{{defense.name}}</button>
</div>
</div>
</template>
<script>
export default {
name: "village",
data() {
return {
showdefense: false,
lastButtonCliked: null,
idplayer: 0,
pseudo: "null",
defenses:[
{id: 0,name: 'douve'},
{id: 1, name: 'tower'}
]
};
},
methods:{
createdefense(evt){
this.showdefense = !this.showdefense
this.lastButtonCliked = evt.target
},
styleDropdown () {
if (!this.lastButtonClicked) return {}
const posFinal = this.lastButtonClicked.getBoundingClientRect()
const dropdown = this.$refs.dropdown
console.log('defense', dropdown)
console.log('posfinal', posFinal)
return {
top: (posFinal.y + posFinal.height) + 'px',
left: posFinal.x + 'px'
}
},
createameliorer(){
} ,
createparam(){
},
createattaque(){
},
createbatiment(){
}
}
}
</script>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
yo mon js ne reconnais pas target c'est normal?
mais ducoup ma dropdwn se retrouve a gauche de ma page