vue 自定义指令 点击区域放大器
来源:互联网 发布:开放平台源码 编辑:程序博客网 时间:2024/06/06 02:03
在vue的项目开发中一般会使用组件来进行代码复用,但是很多情况下纯粹使用组件会有一定的局限性,我们往往会追求最简洁的方式:
- 如果只是对纯文本进行处理,无疑代码封装成filter过滤器是最好的选择–可参考《vue filter 过滤器》
- 如果是一些全局性的简单动画提示组件或者方法(比如loading组件和axios方法),我们就可以考虑使用plugin插件为实例原型上添加方法以方便随时调用–可参考《vue plugin 插件编写以loading为例》
- 但是如果说我们要进行一些dom的底层操作,那么就是使用指令比较合适了
以图标点击触发区域扩大器为例:
// trigger-area.js/** * trigger-area 图标点击事件触发区域扩大器 * @params {element} el是目标元素 * @parmas {object} options作为控制padding的对象 * 加指令的元素必须是定位元素 * 传递参数的时候,因为考虑到居中问题,建议传递一样的参数值,确保可以居中 * 绑定指令的元素 不能设置overflow属性 否则会失去效果 * * * @example * <div><i v-trigger-area:10*20*30*40></i></div> * v-trigger-area:10 一个值代表上下左右 * v-trigger-area:10*20 两个值对应【上下】【左右】 * v-trigger-area:10*20*30 三个值对应 【上】【左右】【下】 * v-trigger-area:10*20*30*40 四个值对应 【上】【右】【下】【左】 *//** * 自定义创建span节点的函数 * @param {element} $el - 目标dom元素 * @param {object} binding - 指令对象 * @return {VNode} vnode -vue节点对象 */function createArea($el) { // 原生创建一个span 作为插入的虚拟节点 const ficSpan = document.createElement('span') /** * * 控制创建出的节点的样式 * @type {[type]} * 创建之后插入到$el实例中 */ $el.appendChild(ficSpan) return ficSpan}export default { /** * 自定义指令的钩子函数 inserted 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中) * @param {element} $el - 目标dom元素 * @param {object} binding - 指令对象 */ inserted($el, binding) { const pos = window.getComputedStyle($el) // window.console.log(pos.position) if (!pos.position || pos.position === 'static') { $el.style.position = 'relative' } const ficSpan = createArea($el) const argList = binding.arg.split('*') // 获取根节点的字体大小 换算公式 rem = rootFontSize / 100 * 具体值 const rootFontSize = document.documentElement.getAttribute('data-font-size') / 100 const offset = { height: 0, width: 0, } // 测试用例背景色 ficSpan.style.background = 'transparent' if (argList.length === 1) { // 上下左右四个方向都是同样的值 const length = argList[0] * rootFontSize ficSpan.style.padding = `${length}px` offset.height = offset.width = length * 2 } if (argList.length === 2) { const width = argList[0] * rootFontSize const height = argList[1] * rootFontSize // 新元素的padding-top ficSpan.style.paddingTop = `${width}px` // 新元素的padding-bottom ficSpan.style.paddingBottom = `${width}px` // 新元素的padding-left ficSpan.style.paddingLeft = `${height}px` // 新元素的padding-right ficSpan.style.paddingRight = `${height}px` offset.width = width * 2 offset.height = height * 2 } if (argList.length === 3) { const top = argList[0] * rootFontSize const bottom = argList[2] * rootFontSize const width = argList[1] * rootFontSize // 新元素的padding-top ficSpan.style.paddingTop = `${top}px` // 新元素的padding-left ficSpan.style.paddingLeft = `${width}px` // 新元素的padding-right ficSpan.style.paddingRight = `${width}px` // 新元素的padding-bottom ficSpan.style.paddingBottom = `${bottom}px` offset.width = width * 2 offset.height = top + bottom } if (argList.length === 4) { const top = argList[0] * rootFontSize const right = argList[1] * rootFontSize const bottom = argList[2] * rootFontSize const left = argList[3] * rootFontSize // 新元素的padding-top ficSpan.style.paddingTop = `${top}px` // 新元素的padding-right ficSpan.style.paddingRight = `${right}px` // 新元素的padding-bottom ficSpan.style.paddingBottom = `${bottom}px` // 新元素的padding-left ficSpan.style.paddingLeft = `${left}px` offset.width = left + right offset.height = top + bottom } // if (ficSpan) { // 绝对定位在父元素的 ficSpan.style.position = 'absolute' ficSpan.style.top = '50%' ficSpan.style.left = '50%' ficSpan.style.boxSizing = 'border-box' ficSpan.style.marginTop = `${-0.5 * offset.height}px` ficSpan.style.marginLeft = `${-0.5 * offset.width}px` } },}
app.js中将其封装成全局的过滤器:
import Vue from 'vue'import tiggerArea from './tigger-area'Vue.directive('tigger-area', tiggerArea)
阅读全文
0 0
- vue 自定义指令 点击区域放大器
- vue自定义指令-vue-reclick
- 自定义视图点击区域
- vue 自定义指令
- Vue自定义指令-拖拽
- Vue.js--自定义指令
- Vue自定义指令
- vue自定义指令
- vue自定义指令
- vue之自定义指令
- Vue.js--自定义指令
- vue-自定义指令-拖拽
- 14-Vue自定义指令
- Vue.directive 自定义指令
- Vue自定义指令(directive)
- Vue之自定义指令
- Vue之自定义指令
- Vue.js 自定义指令
- POJ 3414 Pots(bfs)
- SIP 返回码解释
- 欢迎使用CSDN-markdown编辑器
- 微信小程序之----session处理
- 监控系统的一般架构
- vue 自定义指令 点击区域放大器
- Java--将字符串中的多个空格换成单个字符
- capture 中总线(BUS)的应用
- 简单的实现微信领取红包界面,按钮旋转动画效果。
- 内置组件 -slot讲解
- Web 服务编程,REST 与 SOAP
- LinuxC学习日常——复合类型及关键字
- Spring Boot使用mybatis连接mysql
- 1103272-1数据手册