<el-row style="margin-top:50px">
        <el-col :span="24">
          <el-form-item label="意見(jiàn)"
                        prop="note1">
            <div v-click-outside>
              <div  @contextmenu.prevent="rightShow">
              <el-input type="textarea" :autosize="{ minRows: 4}" v-model="ruleForm.note1" @input="forceInput()" placeholder="請(qǐng)輸入整改驗(yàn)收意見(jiàn)" ></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 {} 里，點(diǎn)擊輸入框外的地方會(huì)關(guān)閉彈窗
  directives: {
    clickOutside: {//自定義指令：clickOutside
      bind (el, bindings, vnode) {//自定義指令生命周期：bind ；參數(shù)：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分別賦值為鼠標(biāo)的位置；
    menu.style.left = evt.pageX+"px";
    menu.style.top = evt.pageY+"px";
    //如果鼠標(biāo)右邊放不下菜單，就把left的值的改了
    if(evt.pageX+100>clientWidth+scrollLeft){//菜單應(yīng)該在鼠標(biāo)左邊；
    var left1 = evt.pageX-100;
    menu.style.left = left1+"px";
    }
    //如果鼠標(biāo)下邊放不下菜單，就把top的值的改了
    if(evt.pageY+100>clientHeight+scrollTop){
    var top1 = (evt.pageY-100);
    menu.style.top = top1+"px";
    }
    menu.style.display = "block";
    },
    // 選擇要用的常用語(yǔ)
    selectPhrase(item) {
      // if (item.content === '暫無(wú)慣用語(yǔ)') 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();
},