<template>
  <ul>
    <li v-if="canView"
        @click="handleClick('open')">打开</li>
    <li @click="handleClick('download')">下载</li>
    <li v-if="editable && buttonRight.indexOf('del')>=0"
        @click="handleClick('remove')">删除</li>
  </ul>
</template>

<script>
export default {
  name: 'ContextMenu',
  props: {
    canView: {
      type: Boolean,
      default: true
    },
    buttonRight: {
      type: Array,
      default: () => ['del', 'add']
    },
    // 是否可编辑
    editable: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(os) {
      this.$emit('on-click', os)
    }
  }
}
</script>
<style lang="less" scoped>
ul {
	list-style: none;
	cursor: default;
	li {
		list-style: none;
		height: 30px;
		line-height: 30px;
		padding: 0 8px;
		font-size: 14px;
		&:hover {
			background: #7bb6f3;
			color: #fff;
		}
	}
}
</style>
