install与directive

`install(Vue,option)`

Vue.js提供install方法，可用于开发新插件以及全局注册组件等

export default {//vue的构造器，option可选的选项对象install(Vue,option){ 组件指令混入挂载vue原型}
}

全局注册组件

// components.js文件中
import ScreenFull from './ScreenFull'
import TagsView from './TagsView'
export default {install(Vue) {Vue.component('ScreenFull', ScreenFull)Vue.component('TagsView', TagsView)}
}
// main.js文件中
import Component from '@/components'
Vue.use(Component)

`Vue.directive("指令名",ƒunction)`

Vue.directive("指令名",function(el,binding,vnode,oldVnode){})
/* 参数
* @el 指令绑定的元素，可以直接操作DOM
* @binding 一个对象，包含属性
* @vnode vue编译的生成虚拟节点
* @oldVnode 上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
* */
Vue.directive('pin', function(el,binding,vnode,oldvnode) {el.style.background = binding.value //背景颜色
})
/* 钩子函数
* @bind 只调用一次，指令第一次绑定到元素时调用
* @inserted 被绑定元素插入父节点时调用
* @update 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
* @componentUpdated 被绑定元素所在模板完成一次更新周期时调用
* @unbind 只调用一次， 指令与元素解绑时调用
* */
Vue.directive("focus", {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {el.focus();    // 聚焦元素el.value = '初始值'},
});

权限字符指令

// 创建directive文件，包含index.js、hasPermi.js
//index.js中
import hasPermi from './hasPermi'
const install = function(Vue) {Vue.directive('hasRole', hasRole)Vue.directive('hasPermi', hasPermi)
}
export default install// hasPermi.js中
import store from '@/store'
export default {inserted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";//const permissions = store.getters && store.getters.permissions // 登录后获取的当前登录用户的权限字符数组const permissions = ["but"]  if (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}// main.js
import directive from './directive'
Vue.use(directive)// 使用
v-hasPermi="['but']"

弹窗拖拽指令

/*** v-dialogDrag 弹窗拖拽* Copyright (c) 2019 ruoyi*/export default {bind(el, binding, vnode, oldVnode) {const value = binding.valueif (value == false) return// 获取拖拽内容头部const dialogHeaderEl = el.querySelector('.el-dialog__header');const dragDom = el.querySelector('.el-dialog');dialogHeaderEl.style.cursor = 'move';// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);dragDom.style.position = 'absolute';dragDom.style.marginTop = 0;let width = dragDom.style.width;if (width.includes('%')) {width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);} else {width = +width.replace(/\px/g, '');}dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;// 鼠标按下事件dialogHeaderEl.onmousedown = (e) => {// 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;// 获取到的值带px 正则匹配替换let styL, styT;// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);} else {styL = +sty.left.replace(/\px/g, '');styT = +sty.top.replace(/\px/g, '');};// 鼠标拖拽事件document.onmousemove = function (e) {// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）const l = e.clientX - disX;const t = e.clientY - disY;let finallyL = l + styLlet finallyT = t + styT// 移动当前元素dragDom.style.left = `${finallyL}px`;dragDom.style.top = `${finallyT}px`;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}}
};

待续。。。

install与directive相关推荐

(九)前端优化细节和额外知识点
在这里学习到了常见的性能优化和如何将文件打包并且进行上传性能优化包括以下部分组件缓存处理头像不在更新(缓存问题) 实现代码高亮 loading效果登录未遂地址图片懒加载自动聚焦问题组件注 ...
解决debian apt-get upgrade 错误triggers ci file contains unknown directive `interest-noawait'
错误信息如下: Errors were encountered while processing: /var/cache/apt/archives/mime-support_3.54_all.deb ...
Nginx配置报错unknown directive echo的解决
Nginx配置报错unknown directive "echo"的解决实际上,Nginx并没有内置echo这个指令,所以你贸然使用时,自然会提示说无法识别的指令.它是由agen ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
【vue开发】vue插件的install方法
MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑.. ...
How to Install and Configure OpenSSH Server In Linux
标题:在Linux中安装和配置OpenSSH服务器 Install OpenSSH in Linux & 在Linux计算机中安装OpenSSH Being a network admini ...
yolov5安装pip install requirements.txt，pycocotools安装报错
项目场景: 系统:ubuntu16.04 安装yolov5,直接pip install requirements.txt,报错问题描述: 报错信息如下,可见是pycocotools安装错误 Buil ...
php warning: directive,安装Composer PHP Warning: copy(): SSL operation failed with code
报错信息 [root@localhost ~]# php -r "copy('https://install.phpcomposer.com/installer', 'composer-se ...
Windows安装Apache(解决问题Set the 'ServerName' directive globally to suppress this message)
下载Apache 修改tttp.conf文件命令安装http服务 (解决问题Could not reliably determine the server's fully qualified dom ...

install与directive

`install(Vue,option)`

`Vue.directive("指令名",ƒunction)`

install与directive相关推荐

最新文章

热门文章