怎么样做网站代,个人做网站创业,怎么建设商业网站,浙江省工程建设信息网文章目录 Vue3 directive的钩子函数在setup内定义局部指令生命周期钩子参数详解函数形式简写案例1 --- 自定义拖拽指令案例2 --- 图片懒加载指令 Vue3 directive的钩子函数
created 元素初始化的时候beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用b… 文章目录 Vue3 directive的钩子函数在setup内定义局部指令生命周期钩子参数详解函数形式简写案例1 --- 自定义拖拽指令案例2 --- 图片懒加载指令 Vue3 directive的钩子函数
created 元素初始化的时候beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用beforeUpdate 元素被更新之前调用update 这个周期方法被移除 改用updatedbeforeUnmount 在元素被移除前调用unmounted 指令被移除后调用 只调用一次
Vue2 指令 bind inserted update componentUpdated unbind
在setup内定义局部指令
必须以 vNameOfDirective 的形式来命名本地自定义指令以使得它们可以直接在模板中使用。
templatebutton clickshow !show开关{{show}} ----- {{title}}/buttonDialog v-move-directive{background:green,flag:show}/Dialog
/templateconst vMoveDirective: Directive {created: () {console.log(初始化);},beforeMount(...args: Arrayany) {// 在元素上做些操作console.log(初始化一次);},mounted(el: any, dir: DirectiveBindingValue) {el.style.background dir.value.background;console.log(初始化);},beforeUpdate() {console.log(更新之前);},updated() {console.log(更新结束);},beforeUnmount(...args: Arrayany) {console.log(args);console.log(卸载之前);},unmounted(...args: Arrayany) {console.log(args);console.log(卸载完成);},
};生命周期钩子参数详解 第一个 el 当前绑定的DOM 元素 第二个 binding instance使用指令的组件实例。 value传递给指令的值。例如在 v-my-directive“1 1” 中该值为 2。 oldValue先前的值仅在 beforeUpdate 和 updated 中可用。无论值是否有更改都可用。 arg传递给指令的参数(如果有的话)。例如在 v-my-directive:foo 中arg 为 “foo”。 modifiers包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar 中修饰符对象为 {foo: truebar: true}。 dir一个对象在注册指令时作为参数传递。例如在以下指令中 第三个 当前元素的虚拟DOM 也就是Vnode 第四个 prevNode 上一个虚拟节点仅在 beforeUpdate 和 updated 钩子中可用
函数形式简写
你可能想在 mounted 和 updated 时触发相同行为而不关心其他的钩子函数。那么你可以通过将这个函数模式实现
templatedivinput v-modelvalue typetext /A v-move{ background: value }/A/div
/templatescript setup langts
import A from ./components/A.vue
import { ref, Directive, DirectiveBinding } from vue
let value refstring()
type Dir {background: string
}
const vMove: Directive (el, binding: DirectiveBindingDir) {el.style.background binding.value.background
}
/scriptstyle
/style案例1 — 自定义拖拽指令
!--* Author: qfuli* Date: 2023-10-19 10:04:21* LastEditors: qfuli* LastEditTime: 2023-10-26 15:04:29* Description: Do not edit* FilePath: /ts-learning/vite-project/src/components/docPage/11-directive/拖拽案例.vue
--
templatediv v-move classboxdiv classheader/divdiv内容/div/div/templatescript langts setupimport { Directive} from vue// 指令名称必须以 vxxx 的形式来命名本地自定义指令以使得它们可以直接在模板中使用。
const vMove: Directive {mounted(el:HTMLElement){let moveEl el.firstElementChild as HTMLElement;let parentEl el as HTMLElement;const mouseDown (e:MouseEvent){//鼠标点击物体那一刻相对于物体左侧边框的距离点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离console.log(e.clientX, e.clientY, -----起始, el.offsetLeft);let X e.clientX - el.offsetLeft;let Y e.clientY - el.offsetTop;const move (e:MouseEvent){let left e.clientX - X;let top e.clientY - Y;console.log(parentEl.offsetHeight);if(left moveEl.offsetWidth/2 document.body.offsetWidth){left document.body.offsetWidth - moveEl.offsetWidth/2;}else if(left - moveEl.offsetWidth/2 0){left moveEl.offsetWidth/2 }if(top - parentEl.offsetWidth/2 0){top parentEl.offsetWidth/2}else if(top parentEl.offsetHeight/2 document.body.offsetHeight){top document.body.offsetHeight - parentEl.offsetHeight/2}el.style.left left px;el.style.top top px;}document.addEventListener(mousemove, move);document.addEventListener(mouseup, () {document.removeEventListener(mousemove, move);});}moveEl.addEventListener(mousedown, mouseDown);}
}/scriptstyle
html,body{margin: 0;padding: 0;height: 100%;
}/style
style scoped langscss.box {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;border: 1px solid #ccc;.header {height: 20px;background: black;cursor: move;}
}
/style
案例2 — 图片懒加载指令
!--* Author: qfuli* Date: 2023-10-26 15:16:10* LastEditors: qfuli* LastEditTime: 2023-10-26 15:49:09* Description: Do not edit* FilePath: /ts-learning/vite-project/src/components/docPage/11-directive/图片懒加载.vue
--
templatedivdiv v-foritem in arrimg height500 :data-indexitem v-lazyitem width360 alt/div/div
/templatescript langts setupimport { Directive } from vue
// import.meta.glob 是vite提供的// glob是懒加载模块
// let module {
// xx:import(xxxx)
// }// glob {eager:true} 静态加载模块
// import xx from xx//这样方便我们批量加载静态资源
let imageList:Recordstring,{default:string} import.meta.glob(./images/*.*,{eager:true})
console.log(imageList,imageList)
let arr Object.values(imageList).map(vv.default)// 指令
let vLazy:DirectiveHTMLImageElement,string async (el,binding){let url await import(/assets/vue.svg);console.log(url,url)el.src url.default//观察元素是否在可视区域let observer new IntersectionObserver((entries){console.log(entries,entries[0],el);// intersectionRatio 大于0表示可见的比例 1是全可见if (entries[0].intersectionRatio 0) {setTimeout(() {el.src binding.value;observer.unobserve(el)}, 1000)}})observer.observe(el);
}
/scriptstyle scoped/style
