右键菜单_右键菜单组件

<template>
  <!-- 右键菜单 -->
  <ul class="menu" v-show="show">
    <li
      :key="index"
      @click.stop.prevent="clickEvent(clickMenu.fnName)"
      class="menu-item"
      v-for="(clickMenu,index) in clickMenus"
    >
      <i class="menu-item-bg"></i>
      {{clickMenu.text}}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'fyMenu',
  props: {
    menuShow: {
      type: Boolean,
      default: false,
    },
    clickMenus: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 鼠标右键菜单
    contextmenu: {
      type: Object,
      default: function _default() {
        return { height: 0, width: -10 }
      },
    },
  },
  data() {
    return {
      show: this.menuShow,
    }
  },
  methods: {
    clickEvent(name) {
      this.$emit('clickEvent', name)
    },
  },
  watch: {
    menuShow(val) {
      this.show = val
    },
  },
}
</script>

<style lang="scss" scoped>
// 右键菜单样式
.menu {
  position: fixed;
  z-index: 999;
  width: 168px;
  box-sizing: border-box;
  font-size: $font-size-14;
  font-weight: $font-weight-400;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  background: $color-fcfcfc;
  box-shadow:0px 2px 4px 0px rgba(51,51,51,0.2);

  .menu-item {
    display: block;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    min-width: 158px;
    line-height: 28px;
    padding-left: 40px;
    position: relative;

    cursor: pointer;

    .menu-item-bg {
      position: absolute;
      left: 30px;
      top: 0;
      display: block;
      width: 1px;
      height: 30px;
      background-color: #f0f0f2;
    }
  }
}
</style>