欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)右鍵點擊彈框信息功能

 更新時間：2023年12月05日 10:21:01   作者：冷冷清清中的風風火火  
這篇文章主要介紹了vue實現(xiàn)右鍵點擊彈框信息功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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 {} 里，點擊輸入框外的地方會關(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分別賦值為鼠標的位置；
    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";
    },

如果加完右鍵功能，發(fā)現(xiàn)該輸入框或者的內(nèi)容無法修改，也無法輸入。

出現(xiàn)該問題的原因是

vue頁面進行數(shù)據(jù)渲染時，層次嵌套或者多重數(shù)據(jù)綁定導致該組件信息框數(shù)據(jù)不能被Vue實時監(jiān)聽到，以此出現(xiàn)了數(shù)據(jù)發(fā)生改變但頁面上更新或刪除對應信息框的數(shù)據(jù)毫無反應的現(xiàn)象，此時需要強制更新，重新渲染。

可以在輸入框添加@input=“forceInput()”，然后在methods中添加方法：

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

forceUpdate用來強制渲染，避免data中對象層次太深，Vue框架不自動渲染的情況。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論