v-contextmenu/examples/CustomShow.vue at master · linguochi/v-contextmenu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <div class="example">
    <div :class="['buttons', theme]">
      <button type="button" @click="handleShow">显示</button>
      <button type="button" @click="handleHide">隐藏</button>
    </div>
    <div :class="['box', theme]" ref="box">
      展示区域

      <v-contextmenu ref="contextmenu" :theme="theme">
        <v-contextmenu-item>菜单1</v-contextmenu-item>
        <v-contextmenu-item divider></v-contextmenu-item>
        <v-contextmenu-item>菜单2</v-contextmenu-item>
        <v-contextmenu-item>菜单3</v-contextmenu-item>
      </v-contextmenu>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CustomShow',

    props: {
      theme: String,
    },

    methods: {
      handleShow () {
        const targetDimensions = this.$refs.box.getBoundingClientRect()
        const postition = {
          top: Math.random() * targetDimensions.height + targetDimensions.top,
          left: Math.random() * targetDimensions.width + targetDimensions.left,
        }
        this.$refs.contextmenu.show(postition)
      },
      handleHide() {
        this.$refs.contextmenu.hide()
      },
    },
  }
</script>

<style lang="stylus" scoped>
  main-color = #46a0fc
  main-color-bright = #ef5350

  .buttons
    padding: 5px 10px
    border-left: 1px solid main-color
    border-right: 1px solid main-color
    background-color: #fff

    &.bright
      border-color: main-color-bright

  .box
    position: relative
    width: 100%
    height: 120px
    line-height: 120px
</style>