江苏工信部网站备案查询,网站打开速度很慢,青岛的互联网公司,网站备案年审一、Vue2
1. 指令钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)#xff1a;
bind 只调用一次#xff0c;指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted 被绑定元素插入父节点时调用 (仅保证父节点存在#xff0c;但不一定已…一、Vue2
1. 指令钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)
bind 只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted 被绑定元素插入父节点时调用 (仅保证父节点存在但不一定已被插入文档中)。update 所在组件的 VNode 更新时调用但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变也可能没有。componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind 只调用一次指令与元素解绑时调用。
Vue.directive(gqs,{bind() {// 当指令绑定到 HTML 元素上时触发.**只调用一次**console.log(bind triggerd)},inserted() {// 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app)**.但不保证,父元素已经插入了 DOM 文档.**console.log(inserted triggerd)},updated() {// 所在组件的VNode更新时调用.console.log(updated triggerd)},componentUpdated() {// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。console.log(componentUpdated triggerd)},unbind() {// 只调用一次指令与元素解绑时调用.console.log(unbind triggerd)}})1.2 钩子函数参数
指令钩子函数会被传入以下参数
el 指令所绑定的元素可以用来直接操作 DOMbinding 一个对象包含以下属性 name指令名不包括 v- 前缀。 value指令的绑定值例如v-my-directive“1 1” 中绑定值为 2。 oldValue指令绑定的前一个值仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression字符串形式的指令表达式。例如 v-my-directive“1 1” 中表达式为 “1 1”。arg传给指令的参数可选。例如 v-my-directive:foo 中参数为 “foo”。 modifiers一个包含修饰符的对象。例如v-my-directive.foo.bar 中修饰符对象为 { foo: true, bar: true }。 vnodeVue 编译生成的虚拟节点。 oldVnode上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用。除了 el 之外其它参数都应该是只读的切勿进行修改。如果需要在钩子之间共享数据建议通过元素的 dataset 来进行。
1.3 指令简写
当绑定指令的元素的状态发生改变时(这里主要是指元素绑定的vue数据发生改变时),仍然会触发指令中的 update 函数. 那么我们可以利用指令的简写形式,来做一些有意思的事情.核心思想就是: 当一个HTML元素设置了指令,那么在这个元素的状态发生改变时(由vue数据变化带来的带来的监控),我们可以利用update()钩子函数监控到这个元素的变化,然后根据需要做一些其他的事情. 案例使用官方指定的指令简写模式:
Vue.directive(color-swatch, function (el, binding) {el.style.backgroundColor binding.value
})当元素的状态发生改变时,就会触发 update
1.4 小结几点
使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-在使用指令的HTML元素上,我们需要加上 v-
input typetext v-focus placeholder我有v-focus,所以,我获取了焦点/
Vue.directive(‘focus’,{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数. el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input el 就等价于 document.getElementById(‘el.id’)… 可以利用 $(el) 无缝连接 jQuery
2. vue-cli中定义全局指令
2.1 main.js
import Vue from vue
import App from ./App.vue
import router from ./router
import store from ./store// 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.
Vue.directive(my-color,(el) {el.style.color redel.style.backgroundColor yellow
})new Vue({router,store,render: h h(App)
}).$mount(#app)
2.2 相应组件
templateinput typetext v-my-color
/template
2.3 实现效果 3. vue-cli中定义局部指令
3.1 相应组件
templateinput typetext v-modeltext placeholder仅可填入正整数数字 v-my-text{key:text,maxval:1000}
/template
script
export default {data(){return {text:,}},
directives:{myText:{bind(el,binding,vnode) {el.handler function() {el.value el.value.replace(/\D/g, )//根据设置的规则进行判断处理if(binding.value.maxval el.value parseInt(binding.value.maxval)){el.value parseInt(binding.value.maxval);}//根据指令调取位置设置的规则Key进行全局上文赋值vnode[context][binding.value.key] el.value;}el.addEventListener(input, el.handler)},},}
}
/script
3.2 简写模式
templateinput typetext v-modeltext placeholder仅可填入正整数数字 v-my-text{key:text,maxval:1000}
/template
script
export default {data(){return {text:,}},directives:{myText:(el,binding,vnode) {el.handler function() {el.value el.value.replace(/\D/g, )//根据设置的规则进行判断处理if(binding.value.maxval el.value parseInt(binding.value.maxval)){el.value parseInt(binding.value.maxval);}//根据指令调取位置设置的规则Key进行全局上文赋值vnode[context][binding.value.key] el.value;}el.addEventListener(input, el.handler)},},
}
/script4. 应用场景
4.1 表单校验
背景开发中遇到的表单输入常常会限制特殊字符的输入 以满足安全性测试的要求。 // emoji.js
import Vue from vue;// 禁止输入特殊字符
Vue.directive(emoji, {bind: function (el, binding, vnode) {// 正则规则可根据需求自定义const regRule /[~^!#$€£₤%^*()_\-?:{}|.\/;\\[\]·~……#¥%*\-{}|《》“”【】‘]/im;let $inp findEle(el, input) || findEle(el, textarea);el.$inp $inp;$inp.handle function (event) {let val $inp.value;$inp.value val.replace(regRule, );trigger($inp, input);}$inp.addEventListener(keyup, $inp.handle);},unbind: function (el) {el.$inp.removeEventListener(keyup, el.$inp.handle);}
});const findEle (parent, type) {return parent.tagName.toLowerCase() type ? parent : parent.querySelector(type)
};const trigger (el, type) {const e document.createEvent(HTMLEvents);e.initEvent(type, true, true);el.dispatchEvent(e);
};在 main.js 中引入该自定义组件
import /directives/emoji.js;
在组件中使用 在需要校验的输入框多行文本框加上 v-emoji 即可
el-input v-emojiv-modelcontent placeholder请输入
/el-input
4.2 一键 Copy的功能
首先建一个 js 文件v-copy.js。定义一个对象。 指令实际就是一个对象
import { Message } from ant-design-vue;const vCopy { // 名字爱取啥取啥/*bind 钩子函数第一次绑定时调用可以在这里做初始化设置el: 作用的 dom 对象value: 传给指令的值也就是我们要 copy 的值*/bind(el, { value }) {el.$value value; // 用一个全局属性来存传进来的值因为这个值在别的钩子函数里还会用到el.handler () {if (!el.$value) {// 值为空的时候给出提示我这里的提示是用的 ant-design-vue 的提示你们随意Message.warning(无复制内容);return;}// 动态创建 textarea 标签const textarea document.createElement(textarea);// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘同时将 textarea 移出可视区域textarea.readOnly readonly;textarea.style.position absolute;textarea.style.left -9999px;// 将要 copy 的值赋给 textarea 标签的 value 属性textarea.value el.$value;// 将 textarea 插入到 body 中document.body.appendChild(textarea);// 选中值并复制textarea.select();// textarea.setSelectionRange(0, textarea.value.length);const result document.execCommand(Copy);if (result) {Message.success(复制成功);}document.body.removeChild(textarea);};// 绑定点击事件就是所谓的一键 copy 啦el.addEventListener(click, el.handler);},// 当传进来的值更新的时候触发componentUpdated(el, { value }) {el.$value value;},// 指令与元素解绑的时候移除事件绑定unbind(el) {el.removeEventListener(click, el.handler);},
};export default vCopy;2. 到这里一键 Copy 的功能就实现了最后再说一嘴怎么将自定义指令注册到全局再新建一个 js directives.js 文件来注册所有的全局指令。
import copy from ./v-copy;
// 自定义指令
const directives {copy,
};
// 这种写法可以批量注册指令
export default {install(Vue) {Object.keys(directives).forEach((key) {Vue.directive(key, directives[key]);});},
};3.最后在 main.js 中这样引入
import Vue from vue;
import Directives from ./directives;Vue.use(Directives);
4.3 按钮级别权限控制
权限控制分为页面级别和按钮级别这两种思路基本是一致的。页面级别用户登录后获取用户role将role和路由表每个页面的需要的权限作比较生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后在前端用v-if手动判断来区分不同权限对应的按钮的。。按钮级别用户登录后获取用户role在前端用 v-if 或者封装一个自定义指令手动判断来区分不同权限对应的按钮的。思路登录当用户填写完账号和密码后向服务端验证是否正确验证通过之后服务端会返回一个token拿到token之后将token存贮到sessionStorage中保证刷新页面后能记住用户登录状态前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息如用户角色用户权限用户名等等信息。权限验证通过token获取用户对应的role自定义指令获取路由meta属性里btnPermissions(注meta.btnPermissions是存放按钮权限的数组在路由表里配置)然后判断role是否在btnPermissions数组里若不在即删除该按钮DOM。
import Vue from vue/**权限指令**/
const has Vue.directive(has, {bind: function (el, binding, vnode) {// 获取页面按钮权限let btnPermissionsArr vnode.context.$route.meta.btnPermissions;if (!Vue.prototype.$_has(btnPermissionsArr)) {el.parentNode.removeChild(el);}}
});
// 权限检查方法
Vue.prototype.$_has function (value) {let isExist false;// 获取用户按钮权限
/**buttons: [cuser.detail,cuser.update,cuser.delete,btn.User.add,btn.User.remove,btn.User.update,btn.User.assgin,btn.Role.assgin,btn.Role.add,btn.Role.update,btn.Role.remove,],*/let btnPermissionsStr sessionStorage.getItem(btnPermissions);if (btnPermissionsStr undefined || btnPermissionsStr null) {return false;}if (value.includes(btnPermissionsStr)) {isExist true;}return isExist;
};
export {has}在main.js文件引入文件
import has from ./public/js/btnPermissions.js; 2.页面中按钮只需加v-has即可
el-button clickeditClick typeprimary v-has编辑/el-button
二、Vue3指令钩子函数
created 元素初始化beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用beforeUpdate 元素被更新前调用updated 元素被更新后调用beforeUnmount 元素移除前调用unmounted 元素被移除后调用
vue2中的指令钩子函数有 bind、inserted、update、componentUpdated、unbind 1.局部使用 接收两个参数 el表示当前组件实例 dir表示传入的参数以及函数 DirectiveBinding与返回参数一致使用来约束类型
export interface DirectiveBindingV any {instance: ComponentPublicInstance | null;value: V;oldValue: V | null;arg?: string;modifiers: DirectiveModifiers;dir: ObjectDirectiveany, V;
}
使用如下:
script setup langts
import {Directive, DirectiveBinding} from vue;
import A from ./A.vue;
type Dir {background:string
}
const vMove:Directive {created(){console.log(------created-------)},beforeMount(){console.log(------beforeMount-------)},mounted(el:HTMLElement,dir:DirectiveBindingDir){console.log(------mounted-------)el.style.background dir.value.background},beforeUpdate(){console.log(------beforeUpdate-------)},updated(){console.log(------updated-------)},beforeUnmount(){console.log(------beforeUnmount-------)},unmounted(){console.log(------unmounted-------)}
}
/scripttemplate
A v-move:aaa.smz{background:red}/
/template案例拖拽
这里使用拖拽需要改变拖拽的position因为不改变则修改元素位置不起作用 static 该关键字指定元素使用正常的布局行为即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 script setup langts
/*** Element.firstElementChild只读属性返回对象第一个子元素没有则返回Null* Element.clientX:只读属性,元素距离视口左边的距离中心点* Element.offsetLeft只读属性元素左上角距离视口左边的距离* Element.offsetWidth:元素宽度* Element.offsetHeight:元素高度* window.innerWidth可视窗宽度* window.innerHeight可视窗高度*/
import {Directive, DirectiveBinding} from vue;const vDrea:Directiveany,void (el:HTMLElement,binding:DirectiveBinding){let gap 10let moveElement:HTMLDivElement el.firstElementChild as HTMLDivElementconst mouseDown (e:MouseEvent){console.log(window.innerHeight)let X e.clientX - el.offsetLeftlet Y e.clientY - el.offsetTopconst move (e:MouseEvent){let x e.clientX - Xlet y e.clientY - Y//超出边界判断if (xgap){x 0}if (ygap){y 0}if (x window.innerWidth -el.offsetWidth -gap){x window.innerWidth -el.offsetWidth}if (y window.innerHeight - el.offsetHeight-gap){y window.innerHeight - el.offsetHeight}el.style.left x pxel.style.top y px}// 鼠标移动document.addEventListener(mousemove,move)//松开鼠标document.addEventListener(mouseup,(){//清除移动事件document.removeEventListener(mousemove,move)})}//鼠标按下moveElement.addEventListener(mousedown,mouseDown)
}
/scripttemplatediv v-drea classboxdiv classheader/divdiv内容/div/div
/templatestyle langless scoped
.box{position: fixed;width: 300px;height: 250px;border: solid 1px black;.header{height: 30px;background-color: black;}
}
/style2.全局使用
定义好全局指令文件其中需要导出指令钩子函数
/*** el:监听的dom元素* binding: 回调事件*/
export default {mounted(el,binding) {//将dom与回调的关系塞入mapmap.set(el,binding.value)//监听el元素的变化ob.observe(el)},unmounted(el) {//取消监听ob.unobserve(el)}
}在main.ts文件中添加以下代码 挂载指令省略‘v-’前缀
import sizeDireect from ../src/directs/resize指令封装/sizeDireect
app.directive(size-ob, sizeDireect)
使用 在需要监听的标签上使用命令 v-size-obhandle其中handle为回调函数其中返回的参数为尺寸信息 div classdir v-size-obhandle
案例监听是否出现在视口 vite提供了批量导入的方法 import.meta.globeager:true表示静态导入 let imageList: Recordstring,{default: string} import.meta.glob(../../../assets/images/*.*,{eager:true})
let arr Object.values(imageList).map(vv.default)
/*** IntersectionObserver:监听元素与视口交叉的API* 返回一个监听集合集合每一项有intersectionRatio表示在视口存在的比例*/
export default {// ts-ignoreasync mounted(el,binding){const def await import(../../assets/vue.svg)el.src def.defaultlet ob new IntersectionObserver((entries) {if (entries[0].intersectionRatio 0){el.src binding.valueOf()ob.unobserve(el)}})ob.observe(el)},unmounted(el){}
}
案例监听宽高指令
/*** ResizeObserver 监听元素变化的API* entries 元素变化的数组集合* entry 每个被监听的元素 其中包含的属性有* borderBoxSize边框盒尺寸* contentBoxSize内容盒尺寸* contentRect:内容区域矩形信息 DOMRectReadOnly {x: 0, y: 0, width: 3800, height: 3800, top: 0, …}* devicePixelContentBoxSize:DPR尺寸* target哪一个元素发生变化*/
const ob new ResizeObserver((entries){for (const entry of entries) {// 获取dom元素的回调const handler map.get(entry.target)//存在回调函数if (handler){// 将监听的值给回调函数handler({width: entry.borderBoxSize[0].inlineSize,height: entry.borderBoxSize[0].blockSize})}}
})
/*** map:存储dom与回调函数的映射关系* 使用WeakMap防止内存溢出*/
const map new WeakMap();
/*** el:监听的dom元素* binding: 回调事件*/
export default {mounted(el,binding) {//将dom与回调的关系塞入mapmap.set(el,binding.value)//监听el元素的变化ob.observe(el)},unmounted(el) {//取消监听ob.unobserve(el)}
}主要讲了vue3中自定义指令的使用以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用
