企业官网建设流程全解析

哪个建站系统适合外贸网站建设,wordpress 微信服务号,如何开一个微信公众号,网络空间安全培训机构Vue官方提供很多指令#xff0c;比如#xff1a;v-model#xff0c;v-show#xff0c;v-if#xff0c;v-on等#xff0c;他们都以v-开头。当这些指令不能满足实际开发需求时#xff0c;我们可以自定义指令#xff0c;包括全局自定义指令和局部自定义指令。聚焦于底层DO…Vue官方提供很多指令比如v-modelv-showv-ifv-on等他们都以v-开头。当这些指令不能满足实际开发需求时我们可以自定义指令包括全局自定义指令和局部自定义指令。聚焦于底层DOM操作用于修改元素的样式、操作DOM、处理事件等。一、指令封装1、 v-dialogDragWidth: 拖拽 el-dialog 弹窗宽度拖大、 拖小import Vue from vue // v-dialogDragWidth: 弹窗宽度拖大 拖小 Vue.directive(dialogDragWidth, { bind(el, binding, vnode, oldVnode) { const dragDom binding.value.$el.querySelector(.el-dialog) el.onmousedown (e) { // 鼠标按下计算当前元素距离可视区的距离 const disX e.clientX - el.offsetLeft document.onmousemove function(e) { e.preventDefault() // 移动时禁用默认事件 // 通过事件委托计算移动的距离 const l e.clientX - disX dragDom.style.width ${l}px } document.onmouseup function(e) { document.onmousemove null document.onmouseup null } } } })2、v-lazy 图片懒加载监听scroll事件并计算元素位置import Vue from vue // v-lazy: 图片懒加载 Vue.directive(lazy, { inserted(el, binding) { const observer new IntersectionObserver((entries) { if (entries[0].isIntersecting) { el.src binding.value observer.unobserve(el) } }) observer.observe(el) } })二、指令使用1、在 utils 中新建 directives.js 文件2、main.js中导入import ‘./utils/directives.js’3、使用指令的地方加入 dialogDragWidth 、v-lazyel-dialog :visible.syncdialogVisible v-dialogDragWidth // ...... /el-dialog img v-lazydetail.imageUrl三、指令扩展1. 指令钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted被绑定元素插入父节点时调用 (仅保证父节点存在但不一定已被插入文档中)。update所在组件的 VNode 更新时调用但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind只调用一次指令与元素解绑时调用。每个钩子函数有以下参数el指令所绑定的元素可以用来直接操作 DOM。binding一个对象包含以下 propertyname指令名不包括 v- 前缀。value指令的绑定值例如v-my-directive1 1 中绑定值为 2。oldValue指令绑定的前一个值仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression字符串形式的指令表达式。例如 v-my-directive1 1 中表达式为 1 1。arg传给指令的参数可选。例如 v-my-directive:foo 中参数为 foo。modifiers一个包含修饰符的对象。例如v-my-directive.foo.bar 中修饰符对象为 { foo: true, bar: true }。vnodeVue 编译生成的虚拟节点。oldVnode上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用。代码实现import Vue from vue Vue.directive(tooltip,{ bind(el, binding) { // 当指令绑定到 HTML 元素上时触发.**只调用一次适合进行一次性初始化** console.log(bind triggerd) el.style.position relative const tooltip document.createElement(div) tooltip.className tooltip tooltip.textContent binding.value el._tooltip tooltip document.body.appendChild(tooltip) }, inserted(el, binding) { // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app)**.但不保证,父元素已经插入了 DOM 文档.**。若父元素初始为 display:none获取的尺寸可能不准确需结合MutationObserver监听显示状态变化。 console.log(inserted triggerd) const rect el.getBoundingClientRect() el._tooltip.style.cssText position: absolute; left: ${rect.left rect.width/2}px; top: ${rect.top - 30}px; }, updated(el, binding) { // 所在组件的VNode更新时调用. 但会忽略首次绑定 console.log(updated triggerd) if (binding.value ! binding.oldValue) { el._tooltip.textContent binding.value } }, componentUpdated(el, binding) { // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 console.log(componentUpdated triggerd) // 适合在子组件更新后重新计算位置 const rect el.getBoundingClientRect() // 更新tooltip位置... }, unbind(el, binding) { // 只调用一次指令与元素解绑时调用. 必须进行资源释放若忘记移除事件监听器或全局对象会导致内存泄漏 console.log(unbind triggerd) if (el._tooltip) { document.body.removeChild(el._tooltip) delete el._tooltip } } })四、指令参数传参1、传递静态参数在自定义指令中传递静态参数静态参数是指在指令绑定时已知的参数值。在HTML标签上使用指令时使用冒号:来传递静态参数。例如自定义指令叫做”v-dialogDragWidth”我们可以通过这样的方式传递一个静态参数div v-dialogDragWidth:argvalue/div给 v-dialogDragWidth 指令传递了一个名为”arg”的静态参数它的值为”value”。我们可以在自定义指令的定义中通过”bind”钩子函数获取传入的参数并在绑定元素上进行相应的操作Vue.directive(dialogDragWidth, {bind: function(el, binding) {console.log(binding.arg); // 输出argconsole.log(binding.value); // 输出value// 在这里可以对绑定元素进行操作}});2、传递动态参数动态参数是指在指令绑定时不确定的参数值根据不同的情况动态改变。在Vue中我们可以使用方括号[]来传递动态参数div v-dialogDragWidth:[arg]value/div或者div v-dialogDragWidth:[arg1,arg2,arg3]value/div我们给” v-dialogDragWidth ”指令传递了一个动态参数它的值为”value”。在Vue实例中我们可以在数据中定义”arg”的值并在渲染的时候动态改变它。例如data: {arg: dynamicArg}当数据中的”arg”发生变化时指令中的动态参数也会相应地改变。在自定义指令的定义中我们可以通过表达式来获取动态参数的值。Vue.directive(dialogDragWidth, {bind: function(el, binding) {console.log(binding.arg); // 输出dynamicArgconsole.log(binding.value); // 输出value// 在这里可以对绑定元素进行操作}});3、传参场景使用通过对象形式动态传递参数实现更灵活的权限控制// 使用方式el-button v-permission:{您没有删除权限}delete删除/el-button// 数据处理Vue.directive(permission, {bind(el, binding) {const { value, arg } binding // value:权限字符串arg:错误提示if (!checkPermission(value)) {el.style.display noneel._permissionDenied arg || 无权限访问}}})