鼠标右键以及封装实例

这次因为在客服端做右键添加跟进消息,故深入了解一下右键自定义菜单的东西,首先浏览器自带右键,我们需要禁止浏览器右键默认事件(都放在页面加载完毕后执行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 与手动挂载—— m o u n t 我 们 在 写 v u e . j s 时 , 不 论 用 c d n 的 方 式 还 是 在 w e b p a c k 里 面 使 用 n p m 引 入 的 v u e . j s , 都 会 有 一 个 跟 节 点 , 并 且 创 建 一 个 实 例 , 所 有 h t m l 里 面 一 般 只 有 一 个 根 节 点 < d i v i d = " a p p " > < / d i v > , 通 过 v u e − r o u t e r 来 切 换 页 面 , 这 时 候 假 如 我 们 要 使 用 一 个 组 件 渲 染 时 , 这 样 我 们 写 的 组 件 就 别 在 当 前 根 节 点 下 替 换 当 前 的 自 定 义 标 签 , 这 样 常 规 的 组 件 使 用 方 式 , 只 能 在 规 定 的 地 方 渲 染 组 件 , 这 样 的 话 , 在 一 些 特 殊 场 景 下 就 比 较 局 限 了 , 例 如 : 组 件 的 模 版 是 通 过 后 台 调 用 接 口 从 服 务 端 获 取 的 , 需 要 它 动 态 渲 染 实 现 类 似 原 生 的 w i n d o w . a l e r t ( ) 的 提 示 框 组 件 , 它 的 位 置 是 在 < b o d y > 下 , 而 非 < d i v i d = " a p p " > , 并 且 不 会 通 过 常 规 的 组 件 自 定 义 标 签 的 形 式 使 用 , 而 是 像 J S 调 用 函 数 一 样 使 用 。 一 般 来 说 , 在 我 们 访 问 页 面 时 , 组 件 就 已 经 渲 染 就 位 了 , 对 于 场 景 1 , 组 件 的 渲 染 是 异 步 的 , 甚 至 预 先 不 知 道 模 版 是 什 么 。 对 于 场 景 2 , 其 实 并 不 陌 生 , 在 j Q u e r y 时 代 , 通 过 操 作 D O M , 就 很 容 易 实 现 , 但 是 现 在 使 用 的 v u e 这 种 数 据 驱 动 视 图 的 M V V M 的 框 架 , 我 们 就 要 使 用 v u e 的 思 路 来 解 决 问 题 , 这 时 候 , V u e . e x t e n d 和 v m . mount 我们在写vue.js时,不论用cdn的方式还是在webpack里面使用npm引入的vue.js,都会有一个跟节点,并且创建一个实例,所有html里面一般只有一个根节点

,通过vue-router来切换页面,这时候假如我们要使用一个组件渲染时,这样我们写的组件就别在当前根节点下替换当前的自定义标签,这样常规的组件使用方式,只能在规定的地方渲染组件,这样的话,在一些特殊场景下就比较局限了,例如: 组件的模版是通过后台调用接口从服务端获取的,需要它动态渲染 实现类似原生的window.alert()的提示框组件,它的位置是在 下,而非
,并且不会通过常规的组件自定义标签的形式使用,而是像 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 m o u n t 接 下 来 我 们 说 一 下 , 在 创 建 一 个 V u e 实 例 是 , 都 会 有 一 个 选 项 e l , 来 指 定 实 例 的 根 节 点 , 如 果 不 写 e l 选 项 , 那 组 件 就 处 于 未 挂 载 状 态 。 V u e . e x t e n d 的 作 用 , 就 是 基 于 V u e 的 构 造 器 , 创 建 一 个 ‘ 子 类 ’ , 它 的 参 数 跟 n e w V u e 的 基 本 一 样 , 但 d a t a 要 跟 组 件 一 样 , 是 个 函 数 , 再 配 合 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(). m o u n t ( ) ; 这 一 步 , 我 们 调 用 了 mount(); 这一步,我们调用了 mount();mount 方法对组件进行了手动渲染,但他仅仅是被渲染好了,并没有挂载到节点上,也就显示不了组件。此时的component 已经是一个标准的vue组件实例,因此它的 e l 属 性 也 可 以 被 访 问 : d o c u m e n t . b o d y . a p p e n d C h i l d ( c o m p o n e n t . el属性也可以被访问: document.body.appendChild(component. el访document.body.appendChild(component.el)
当然,除了body,你也可以挂载到其他节点上。
m o u n t 也 有 一 些 快 捷 的 的 挂 载 方 式 , 一 下 两 种 都 是 可 以 的 : / / 在 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. m o u n t ( ) ; d o c u m e n t . b o d y . a p p e n d C h i l d ( c o m p o n e n t . 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 中移除。

你可能感兴趣的:(随笔知识总结)