网站建设 微信营销如何做网站刷题

当前位置： 首页 > news >正文

网站建设 微信营销,如何做网站刷题,青岛网站备案,市场营销策划方案范文文章目录 前言一、Vue3指令钩子函数二、自定义指令的两种方式1.局部使用例子1#xff1a;鉴权例子2#xff1a;拖拽 2.全局使用例子1#xff1a;监听宽高指令例子2#xff1a;监听是否出现在视口 总结 前言 此文章主要讲了vue3中自定义指令的使用#xff0c;以及一些WebA… 文章目录 前言一、Vue3指令钩子函数二、自定义指令的两种方式1.局部使用例子1鉴权例子2拖拽 2.全局使用例子1监听宽高指令例子2监听是否出现在视口 总结 前言 此文章主要讲了vue3中自定义指令的使用以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用。 一、Vue3指令钩子函数 created 元素初始化beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用beforeUpdate 元素被更新前调用updated 元素被更新后调用beforeUnmount 元素移除前调用unmounted 元素被移除后调用 vue2中的指令钩子函数有 bind、inserted、update、componentUpdated、unbind 二、自定义指令的两种方式 利用Directive可以创建自定义指令 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例子1鉴权 script setup langts import {Directive} from vue;// 用户id localStorage.setItem(userId,smz) // mock后台数据 const permission [smz:shop:edit,// smz:shop:create,smz:shop:delete ] const userId localStorage.getItem(userId) as string const vHasShow:DirectiveHTMLElement,string (el,bingding){// 当后台返回的权限列表中没有对应的权限则将其隐藏if (!permission.includes(userId:bingding.value)){// 这里感觉还要对用户在控制台的操作做一些操作防止用户直接改样式// 监听用户对改元素的操作在改变其值时进行样式添加el.style.display none} } /scripttemplate div classbtnsbutton v-has-showshop:create创建/buttonbutton v-has-showshop:edit编辑/buttonbutton v-has-showshop:delete删除/button /div /template例子2拖拽 这里使用拖拽需要改变拖拽的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例子1监听宽高指令 /** 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)} }例子2监听是否出现在视口 vite提供了批量导入的方法 import.meta.glob eager: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){} }总结 此文章主要讲了vue3中自定义指令的使用以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用