Skip to content

Instantly share code, notes, and snippets.

@Musinux

Musinux/magie.vue

Created May 19, 2020 16:33
Show Gist options
  • Save Musinux/1dc5704b6c8582f397b5bfebdfb5e6f2 to your computer and use it in GitHub Desktop.
Save Musinux/1dc5704b6c8582f397b5bfebdfb5e6f2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Musinux created this gist May 19, 2020.
    56 changes: 56 additions & 0 deletions magie.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    <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>