鼠标右键以及封装实例

本文探讨了如何禁用浏览器默认的右键菜单并实现自定义的contextmenu事件处理。通过示例代码展示了在不同浏览器中阻止右键事件的方法。接着介绍在Vue中如何封装一个实例,利用Vue的extend和mount方法动态渲染组件,特别是在需要在非常规位置和异步情况下使用组件的场景。文章提供了一个简单的.vue组件作为右键菜单的例子,并展示了如何在JavaScript中创建和挂载这个组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这次因为在客服端做右键添加跟进消息,故深入了解一下右键自定义菜单的东西,首先浏览器自带右键,我们需要禁止浏览器右键默认事件(都放在页面加载完毕后执行DOMContentLoaded链接)
document.oncontextmenu = function(){  return false;}
在兼容DOM的浏览器中,使用event.preventDefault();在IE中,将event.returnValue的值设置为false。 IE、chrome、Frifox、Opera、Safari
// 注销掉全局右键返回的方法
document.body.addEventListener(‘contextmenu’, function (event) {
if (window.navigator.userAgent.includes(‘Firefox’)) {
event.preventDefault()
} else {
window.event.returnValue = false
}
})
这样我们可以自定义在页面中触发contextmenu事件,一般需要阻止contextmenu冒泡。
因为contextmenu 事件属于鼠标事件,所以其事件对象中包含于光标位置有关的所有属性。
posobj: { left: event.pageX, top: event.pageY},
以上为右键处理事件,下面简单介绍一下,如何封装一个实例:
这时候我们需要我用业务上不长使用的两个API,
Vue 的构造器——extend 与手动挂载——mount我们在写vue.js时,不论用cdn的方式还是在webpack里面使用npm引入的vue.js,都会有一个跟节点,并且创建一个实例,所有html里面一般只有一个根节点<divid="app"></div>,通过vue−router来切换页面,这时候假如我们要使用一个组件渲染时,这样我们写的组件就别在当前根节点下替换当前的自定义标签,这样常规的组件使用方式,只能在规定的地方渲染组件,这样的话,在一些特殊场景下就比较局限了,例如:组件的模版是通过后台调用接口从服务端获取的,需要它动态渲染实现类似原生的window.alert()的提示框组件,它的位置是在<body>下,而非<divid="app">,并且不会通过常规的组件自定义标签的形式使用,而是像JS调用函数一样使用。一般来说,在我们访问页面时,组件就已经渲染就位了,对于场景1,组件的渲染是异步的,甚至预先不知道模版是什么。对于场景2,其实并不陌生,在jQuery时代,通过操作DOM,就很容易实现,但是现在使用的vue这种数据驱动视图的MVVM的框架,我们就要使用vue的思路来解决问题,这时候,Vue.extend和vm.mount 我们在写vue.js时,不论用cdn的方式还是在webpack里面使用npm引入的vue.js,都会有一个跟节点,并且创建一个实例,所有html里面一般只有一个根节点<div id="app"></div> ,通过vue-router来切换页面,这时候假如我们要使用一个组件渲染时,这样我们写的组件就别在当前根节点下替换当前的自定义标签,这样常规的组件使用方式,只能在规定的地方渲染组件,这样的话,在一些特殊场景下就比较局限了,例如: 组件的模版是通过后台调用接口从服务端获取的,需要它动态渲染 实现类似原生的window.alert()的提示框组件,它的位置是在 <body> 下,而非 <div id="app">,并且不会通过常规的组件自定义标签的形式使用,而是像 JS 调用函数一样使用。 一般来说,在我们访问页面时,组件就已经渲染就位了,对于场景1,组件的渲染是异步的,甚至预先不知道模版是什么。对于场景2,其实并不陌生,在jQuery时代,通过操作DOM,就很容易实现,但是现在使用的vue这种数据驱动视图的MVVM的框架,我们就要使用vue的思路来解决问题,这时候,Vue.extend 和 vm.mountvue.jscdnwebpack使npmvue.jshtml<divid="app"></div>,vuerouter使使window.alert()<body><divid="app">使JS使访12jQueryDOM使vueMVVM使vueVue.extendvm.mount 语法就派上用场了。
首先我们先为右键书写一个.vue的组件菜单,注意我们需要通过js来调用当前实例,所以不要实例里面书写props等,在我们书写完成之后,我们可以调用extends(
extends选项允许声明扩展另一个组件,而无需使用 Vue.extend。
通过外部增加对象的形式,对构造器进行扩展。它和混入mixins非常的类似。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。)
来在一个js文件作为一个入口导出一个实例
Vue.extend mount接下来我们说一下,在创建一个Vue实例是,都会有一个选项el,来指定实例的根节点,如果不写el选项,那组件就处于未挂载状态。Vue.extend的作用,就是基于Vue的构造器,创建一个‘子类’,它的参数跟newVue的基本一样,但data要跟组件一样,是个函数,再配合mount 接下来我们说一下,在创建一个Vue实例是,都会有一个选项el,来指定实例的根节点,如果不写el选项,那组件就处于未挂载状态。Vue.extend的作用,就是基于Vue的构造器,创建一个‘子类’,它的参数跟new Vue的基本一样,但data要跟组件一样,是个函数,再配合mountVueelelVue.extendVuenewVuedatamount,就可以让组件渲染,并且挂载到任意指定的节点上,比如body。

import Vue from ‘vue’
const AlertCompoent = Vue.extend({
template: ‘

{{messge}}
,
ddata(){
return{
message: ‘hello,Aresns’
}
}
)
这一步,我们创建了一个构造器,这个过程就可以解决异步获取template模版的问题,下面要手动渲染组件,并把它挂载到body下:
const component = new AlertComponent().mount();这一步,我们调用了mount(); 这一步,我们调用了mount();mount 方法对组件进行了手动渲染,但他仅仅是被渲染好了,并没有挂载到节点上,也就显示不了组件。此时的component 已经是一个标准的vue组件实例,因此它的el属性也可以被访问:document.body.appendChild(component.el属性也可以被访问: document.body.appendChild(component.el访document.body.appendChild(component.el)
当然,除了body,你也可以挂载到其他节点上。
mount也有一些快捷的的挂载方式,一下两种都是可以的://在mount 也有一些快捷的的挂载方式,一下两种都是可以的: // 在mount//mount 里写参数来指定挂载的节点
new AlertComponent().KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲app) // 不用mount,直接在创建实例时指定el选项
new AlertComponent({el:’#app’})
实现同样的效果,除了用 extend 外,也可以直接创建 Vue 实例,并且用一个 Render 函数来渲染一个 .vue 文件:
import Vue from ‘vue’;
import Notification from ‘./notification.vue’;
const props = {}; // 这里可以传入一些组件的 props 选项
const Instance = new Vue({
render (h) {
return h(Notification, {
props: props
});
}
});
const component = Instance.mount();document.body.appendChild(component.mount(); document.body.appendChild(component.mount();document.body.appendChild(component.el);
这样既可以使用 .vue 来写复杂的组件(毕竟在 template 里堆字符串很痛苦),还可以根据需要传入适当的 props。渲染后,如果想操作 Render 的 Notification 实例,也是很简单的:
const notification = Instance.$children[0];
因为 Instance 下只 Render 了 Notification 一个子组件,所以可以用 $children[0] 访问到。
需要注意的是,我们是用 $mount 手动渲染的组件,如果要销毁,也要用 $destroy 来手动销毁实例,必要时,也可以用 removeChild 把节点从 DOM 中移除。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值