vue实现右键点击弹框信息功能

      <el-row style="margin-top:50px">
        <el-col :span="24">
          <el-form-item label="意见"
                        prop="note1">
            <div v-click-outside>
              <div  @contextmenu.prevent="rightShow">
              <el-input type="textarea" :autosize="{ minRows: 4}" v-model="ruleForm.note1" @input="forceInput()" placeholder="请输入整改验收意见" ></el-input>
                <ul id="menu"  ref="msgRightMenu" v-show="isPersoncontextMenus">
                  <li @click.stop="selectPhrase(item)"
                  v-for="item in sceneList"
                  :key="item.id">{{ item.content}}</li>
                </ul>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

  showRightMenu: false,
  isPersoncontextMenus:false,
  sceneList:[]

// 位置在 export default {} 里，点击输入框外的地方会关闭弹窗
  directives: {
    clickOutside: {//自定义指令：clickOutside
      bind (el, bindings, vnode) {//自定义指令生命周期：bind ；参数：el, bindings, vnode
        let handler = (e) => {
          if (el.contains(e.target)) {
            if (!vnode.context.isPersoncontextMenus) {
              vnode.context.focus()
            }
          } else {
            if (vnode.context.isPersoncontextMenus) {
              vnode.context.blur()
            }
          }
        }
        el.handler = handler
        document.addEventListener('click', handler)
      },
      unbind (el) {//自定义指令生命周期：unbind
        document.removeEventListener('click', el.handler)
      }
    }
  },

    // methods
    rightShow() {
    let menu = this.$refs.msgRightMenu
    this.isPersoncontextMenus = true
    this.$post('/test/getList', {}, res => {
      if (res.success === true) {
        this.sceneList = res.data;
      } else {
        this.isCommiting = false
        this.isPersoncontextMenus = false
      }
    })
    var evt = event || window.event;
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth ;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ;
    //给left和top分别赋值为鼠标的位置；
    menu.style.left = evt.pageX+"px";
    menu.style.top = evt.pageY+"px";
    //如果鼠标右边放不下菜单，就把left的值的改了
    if(evt.pageX+100>clientWidth+scrollLeft){//菜单应该在鼠标左边；
    var left1 = evt.pageX-100;
    menu.style.left = left1+"px";
    }
    //如果鼠标下边放不下菜单，就把top的值的改了
    if(evt.pageY+100>clientHeight+scrollTop){
    var top1 = (evt.pageY-100);
    menu.style.top = top1+"px";
    }
    menu.style.display = "block";
    },
    // 选择要用的常用语
    selectPhrase(item) {
      // if (item.content === '暂无惯用语') return
      this.ruleForm.note1 = item.content
      this.isPersoncontextMenus = false
    },
    // showNo(){
    //   console.log('showNo')
    //   console.log('showNossssssssssssssss')
    // let menu = this.$refs.msgRightMenu
    // menu.style.display = "none";
    // },
     focus () {
      this.isPersoncontextMenus = true
      let menu = this.$refs.msgRightMenu
      menu.style.display = "block";
    },
    blur () {
      this.isPersoncontextMenus = false
      let menu = this.$refs.msgRightMenu
      menu.style.display = "none";
    },

forceInput() {
  this.$forceUpdate();
},