<!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
    <div>
      <div style="padding-bottom: 5px;padding-top: 5px;font-size: 13px" class="contextmenu__item" @click="handleTopping(1,1)"><el-tag>批量置顶</el-tag></div>
      <div style="padding-top: 5px;padding-bottom: 3px;margin-right: 10px" class="contextmenu__item">排到第&nbsp;&nbsp;<el-input @input="changeInput(input,'')" size="mini" style="padding: 0px !important;width: 60px" v-model.trim="input" placeholder=""></el-input> <el-button  @click="handleTopping(input)" plain type="primary" size="mini">确定</el-button></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "index",
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  data () {
    return {
      input:"",
      row:{},
    }
  },
  methods: {
    init (row, column,event) {
      // console.log(row);
     this.row=row;
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      let menu = document.querySelector('#contextmenu')
      let cha = document.body.clientHeight - event.clientY
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 110) {
        menu.style.top = event.pageY -150 + 'px'
      } else {
        menu.style.top = event.pageY -10 + 'px'
      }
      menu.style.left = event.clientX -60 + 'px'

      document.addEventListener('click', this.foo2) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

    },
    foo2 () {
      this.$emit('foo2')
    },
    handleTopping (value,typeValue) {
      this.$emit('handleTopping',value,typeValue)
    },
    changeInput(value){
      var _that = this;
      if (!value || isNaN(value)) {
        _that.input = "";
      }
    }
  },
}
</script>

<style scoped>
.contextmenu__item {
  display: block;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  width: 150px;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.contextmenu {
  position: absolute;
  background-color: #fff;
  padding: 0 10px;
  /*height: 106px;*/
  font-size: 12px;
  color: #7c7c7c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  white-space: nowrap;
  z-index: 99999;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #f6f6f6;
  color: #333;
}
</style>
