# 元素点击范围扩展指令 v-expandClick

# v-expandClick

使用该指令可以扩展元素的点击范围,由于借用伪元素实现,故不会影响元素在页面上的排列布局。

可传入的参数为:上右下左扩展的范围,单位 px,默认向外扩展 10px

# 代码 Code

export default function (el, binding) {
    const s = document.styleSheets[document.styleSheets.length - 1]
    const DEFAULT = -10 // 默认向外扩展10px
    const ruleStr = `content:"";position:absolute;top:-${top || DEFAULT}px;bottom:-${bottom || DEFAULT}px;right:-${right || DEFAULT}px;left:-${left || DEFAULT}px;`
    const [top, right, bottom, left] = binding.expression && binding.expression.split(',') || []
    const classNameList = el.className.split(' ')
    el.className = classNameList.includes('expand_click_range') ? classNameList.join(' ') : [...classNameList, 'expand_click_range'].join(' ')
    el.style.position = el.style.position || "relative"
    if (s.insertRule) {
        s.insertRule('.expand_click_range::before' + '{' + ruleStr + '}', s.cssRules.length)
    } else { /* IE */
        s.addRule('.expand_click_range::before', ruleStr, -1)
    }
}

# 参数 Attributes

参数 说明 默认值 类型 可选
top, right, bottom, left 上右下左扩展宽度(逗号分割),
单位px
10,10,10,10 String 可填

# 使用 Usage

然后你可以在模板中任何元素上使用新的 v-expandClick property,如下:

<div v-expandClick="20,30,40,50" @click="glabClickoutside"> 点击范围扩大</div>
上次更新: 5/11/2021, 5:45:21 PM