井井客

搜索

vue模拟右键菜单并在光标位置插入值

这是披着VUE旗子的JS代码,核心的是oncontextmenu事件以及DOM元素的selectionStart属性。

vue模拟右键菜单并在光标位置插入值

因为我自己的代码是混在一起的,实在不太好整个贴出来,所以分两步开始说一下大致情况,只为抛砖引玉,如果不懂的话可以拍砖~

首先说一下右键菜单的事件:oncontextmenu。这个是Js的事件,而非常棒的是VUE也能支持,使用@contextmenu就能够使用了,但是别忘了加上VUE事件修饰符prevent,另外看情况决定是否加上stop。例如这样:

<textarea type="text" @contextmenu.prevent.stop='showRight' ref='addSmsInput' v-model='textInput'></textarea>

请原谅我的取名废吧。。。但是忽略我的取名,细心的小伙伴发现,在textarea除了事件,我还使用了"ref"和"v-model"。

ref是为了使用获取元素的selectionStart属性(用来获取光标位置的索引)而绑定的,因为VUE返回的对象中并没有这个属性,所以只能使用原生来处理,也就是通过VUE中的$refs对象来使用原生DOM的方法与属性。

核心的内容就这么多,其它的就是VUE一些相关的代码了。

模拟的右键菜单,我使用的是ul列表

<ul class="right-menu" :style='{left:rightMenu.left+"px",top:rightMenu.top+"px"}' v-show='rightMenu.status'>
  <li v-for='(item,index) of rightMenu.list' @click='setMenuAdd(index)'>{{item.name}}</li>
</ul>

相关的事件则如下:

showRight(event){
  this.rightMenu.status = true
  this.rightMenu.left = event.clientX
  this.rightMenu.top = event.clientY - this.rightMenu.list.length*37
  //37是样式中一个li所用的高度
  this.rightMenu.cursur = this.$refs.addSmsInput.selectionStart || this.textInput.length
  //selectionStart兼容性略差,上面这句是为了保证在该属性不可用时也能插入文本到结尾
},
setMenuAdd(index){
  this.rightMenu.status = false
  if(index !== null){
    this.textInput = this.setMenuStr(this.textInput,this.rightMenu.cursur,this.rightMenu.list[index].value)
  }
},
setMenuStr(str,index,value){
  var start = str.substring(0,index),
      end = str.substring(index,str.length)
  return start+value+end
},

初始的一些数据如下:

rightMenu:{
  status:false,
  top:0,
  left:0,
  cursur:-1,
  list:[
    {name:'名字',value:'$(name)'},
    {name:'性别',value:'$(sex)'},
    {name:'年龄',value:'$(age)'},
    {name:'工作',value:'$(work)'}
  ]
},
textInput:''

而一开始在绑定事件的时候加上stop则是为了阻止冒泡,因为预想的是当在任意位置右键或者点击时隐藏掉模拟的菜单:

@click='setMenuAdd(null)' @contextmenu ='setMenuAdd(null)' 

可能我写得比较乱,但是实际的思路还是满简单的。有问题欢迎拍砖~

文章TAG:vue,js

作者:井井客原创来源:原创
本文标题:vue模拟右键菜单并在光标位置插入值
本文链接:/c/11276.html

上一篇:JQ简易版图片预览功能(仅支持到IE9)
下一篇:将一段数字从右到左每隔三位插入一个逗号

文章分类

相关阅读

随便看看