Share some commonly used custom instructions in Vuejs (summary)

In Vuejs, customize some instructions to operate on the underlying DOM. The following article summarizes and shares some commonly used custom instruction codes, which can be used directly to improve development efficiency!

[Related recommendation: "vue.js Tutorial"]

1. Element click range expansion command v- expandClick

Using this directive can implicitly expand the click range of the element. Since it is implemented by borrowing pseudo elements, it will not affect the arrangement and layout of the elements on the page.

The parameters that can be passed in are: the range of top, right, bottom and left expansion, unit px, the default expansion is 10px. The code of the directive is as follows:

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)
    }
}

Parameter Attributes:

Then you can use the new v-expandClick property on any element in the template, as follows:

<div v-expandClick="20,30,40,50" @click="glabClickoutside"> 点击范围扩大</div>

2. Text content copy command v-copy

Use this command to copy the text content of an element (the command supports single-click copy v-copy and double-click copy v- copy.dblclick, click icon to copy v-copy.icon (three modes), when no parameters are passed, click copy is used by default. The code of the

directive is as follows:

export default {
  bind (el, binding) {
    // 双击触发复制
    if (binding.modifiers.dblclick) {
      el.addEventListener('dblclick', () => handleClick(el.innerText))
      el.style.cursor = 'copy'
    }
    // 点击icon触发复制
    else if (binding.modifiers.icon) {
      if (el.hasIcon) return
      const iconElement = document.createElement('i')
      iconElement.setAttribute('class', 'el-icon-document-copy')
      iconElement.setAttribute('style', 'margin-left:5px')
      el.appendChild(iconElement)
      el.hasIcon = true
      iconElement.addEventListener('click', () => handleClick(el.innerText))
      iconElement.style.cursor = 'copy'
    }
    // 单击触发复制
    else {
      el.addEventListener('click', () => handleClick(el.innerText))
      el.style.cursor = 'copy'
    }
  }
}

function handleClick (text) {
  // 创建元素
  if (!document.getElementById('copyTarget')) {
    const copyTarget = document.createElement('input')
    copyTarget.setAttribute('style', 'position:fixed;top:0;left:0;opacity:0;z-index:-1000;')
    copyTarget.setAttribute('id', 'copyTarget')
    document.body.appendChild(copyTarget)
  }

  // 复制内容
  const input = document.getElementById('copyTarget')
  input.value = text
  input.select()
  document.execCommand('copy')
  // alert('复制成功')
}

Parameter Attributes:

Then you can use new on any element in the template The v-copy property is as follows:

<div v-copy> 单击复制 </div>
<div v-copy.dblclick> 双击复制 </div>
<div v-copy.icon> icon复制 </div>

3. Element full screen command v-screenfull
Full screen command, click on the element to perform full screen/exit full screen operation. Supports whether to insert element-ui's full-screen icon el-icon-full-screen after the element. The code of the

directive is as follows:

import screenfull from 'screenfull'

export default {
  bind (el, binding) {
    if (binding.modifiers.icon) {
      if (el.hasIcon) return
      // 创建全屏图标
      const iconElement = document.createElement('i')
      iconElement.setAttribute('class', 'el-icon-full-screen')
      iconElement.setAttribute('style', 'margin-left:5px')
      el.appendChild(iconElement)
      el.hasIcon = true
  }
    el.style.cursor = el.style.cursor || 'pointer'
    // 监听点击全屏事件
    el.addEventListener('click', () => handleClick())
  }
}

function handleClick () {
  if (!screenfull.isEnabled) {
    alert('浏览器不支持全屏')
    return
  }
  screenfull.toggle()
}

Parameter Attributes:

Then you can use new on any element in the template v-screenfull property, as follows:

<div v-screenfull.icon> 全屏 </div>

4. Element description instruction v-tooltip

Add a description to the element, just like element-ui's el-tooltip (question mark After the icon is overlaid by the mouse, the description text is displayed).

The code of the directive is as follows:

import Vue from 'vue'
export default function (el, binding) {
    if (el.hasIcon) return
    const iconElement = structureIcon(binding.arg, binding.value)
    el.appendChild(iconElement)
    el.hasIcon = true
}

function structureIcon (content, attrs) {
    // 拼接绑定属性
    let attrStr = ''
    for (let key in attrs) {
        attrStr += `${key}=${attrs[key]} `
    }
    const a = `<el-tooltip content=${content} ${attrStr}><i class="el-icon-question" style="margin:0 10px"></i></el-tooltip>`
    // 创建构造器
    const tooltip = Vue.extend({
        template: a
    })
    // 创建一个 tooltip 实例并返回 dom 节点
    const component = new tooltip().$mount()
    return component.$el
}

Parameter Attributes:

Then you can Use the new v-tooltip property on any element in the command, as follows:

<div v-tooltip:content=&#39;tootipParams&#39;> 提示 </div>

Example:

<div v-tooltip:提示内容为XXX1> 提示1</div>
<div v-tooltip:提示内容为XXX=&#39;tootipParams&#39;> 提示2 </div>

Pass in element-ui supported parameters for the command:

data() {
    return {
        tootipParams: {
            placement: 'top',
            effect: 'light',
        }
    }
}

5. Text exceeds the omission command v-ellipsis

Use this command to automatically change the text content to an omitted form when it exceeds the width (default 100 px). Equivalent to using css:

width: 100px;
whiteSpace: nowrap
overflow: hidden;
textOverflow: ellipsis;

The effect of using the instruction:

The code of the instruction is as follows:

export default function (el, binding) {
    el.style.width = binding.arg || 100 + 'px'
    el.style.whiteSpace = 'nowrap'
    el.style.overflow = 'hidden';
    el.style.textOverflow = 'ellipsis';
}

Parameter Attributes:

Then you can use the new v-ellipsis property on any element in the template, as follows:

<div v-ellipsis:100> 需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本</div>

6. Back to the top command v-backtop
Use this command to return the page or specified element to the top.

Optional specified element, if not specified, the global page will return to the top. Optionally show the backtop element by how many px after the element has been offset, e.g. show the back to top button after scrolling 400px.

The code of the directive is as follows:

export default {
  bind (el, binding, vnode) {
    // 响应点击后滚动到元素顶部
    el.addEventListener('click', () => {
    const target = binding.arg ? document.getElementById(binding.arg) : window
    target.scrollTo({
      top: 0,
      behavior: 'smooth'
      })
    })
  },
  update (el, binding, vnode) {
    // 滚动到达参数值才出现绑定指令的元素
    const target = binding.arg ? document.getElementById(binding.arg) : window
    if (binding.value) {
      target.addEventListener('scroll', (e) => {
        if (e.srcElement.scrollTop > binding.value) {
          el.style.visibility = 'unset'
        } else {
          el.style.visibility = 'hidden'
        }
      })
    }
    // 判断初始化状态
    if (target.scrollTop < binding.value) {
      el.style.visibility = &#39;hidden&#39;
    }
  },
  unbind (el) {
    const target = binding.arg ? document.getElementById(binding.arg) : window
    target.removeEventListener(&#39;scroll&#39;)
    el.removeEventListener(&#39;click&#39;)
  }
}

Parameter Attributes:

Then you can Use the new v-backtop property on any element, as follows, to display the binding instruction element after the element with the id app is scrolled 400px:

<div  v-backtop:app="400"> 回到顶部 </div>

can also be used like this, indicating that the binding instruction is always displayed. element, and is a global page. Back to the top:

<div  v-backtop> 回到顶部 </div>

7. Empty state command v-empty

Use this command to display the default empty state. You can pass in the default image (optional, no image by default), default text content (optional, no data by default), and whether to indicate an empty state (required).

The code of the instruction is as follows:

import Vue from "vue";
export default {
  update (el, binding, vnode) {
    el.style.position = el.style.position || 'relative'
    const { offsetHeight, offsetWidth } = el
    const { visible, content, img } = binding.value
    const image = img ? `<img  src="${img}"    style="max-width:90%"  style="max-width:90%" alt="Share some commonly used custom instructions in Vuejs (summary)" ></img>` : &#39;&#39;
    const defaultStyle = "position:absolute;top:0;left:0;z-index:9999;background:#fff;display:flex;justify-content: center;align-items: center;"
    const empty = Vue.extend({
    template: `<div style="height:${offsetHeight}px;width:${offsetWidth}px;${defaultStyle}">
      <div style="text-align:center">
        <div>${image}</div>
        <div>${content || &#39;暂无数据&#39;}</div>
      </div>
    </div>`
    })
    const component = new empty().$mount().$el
    if (visible) {
      el.appendChild(component)
    } else {
      el.removeChild(el.lastChild)
    }
  },
}

Parameter Attributes:

Then you You can use the new v-empty property on any element in the template, passing in the object emptyValue as follows:

<div style="height:500px;width:500px" v-empty="emptyValue"> 原本内容

需要传入一个参数对象，例如显示文字为：暂无列表，图片路径为 ../../assets/images/blue_big.png，控制标示 visible：

emptyValue = {
  content: '暂无列表',
  img: require('../../assets/images/blue_big.png'),
  visible: true,
},

8、徽标指令 v-badge

使用该指令在元素右上角显示徽标。

支持配置徽标的背景颜色、徽标形状；支持传入徽标上显示的数字。

指令的代码如下：

import Vue from 'vue'

const SUCCESS = '#72c140'
const ERROR = '#ed5b56'
const WARNING = '#f0af41'
const INFO = '#4091f7'
const HEIGHT = 20
let flag = false
export default {
  update (el, binding, vnode) {
    const { modifiers, value } = binding
    const modifiersKey = Object.keys(modifiers)
    let isDot = modifiersKey.includes('dot')
    let backgroundColor = ''
    if (modifiersKey.includes('success')) {
      backgroundColor = SUCCESS
    } else if (modifiersKey.includes('warning')) {
      backgroundColor = WARNING
    } else if (modifiersKey.includes('info')) {
      backgroundColor = INFO
    } else {
      backgroundColor = ERROR
    }

    const targetTemplate = isDot 
        ? `<div style="position:absolute;top:-5px;right:-5px;height:10px;width:10px;border-radius:50%;background:${backgroundColor}"></div>` 
        : `<div style="background:${backgroundColor};position:absolute;top:-${HEIGHT / 2}px;right:-${HEIGHT / 2}px;height:${HEIGHT}px;min-width:${HEIGHT}px;border-radius:${HEIGHT / 2}px;text-align:center;line-height:${HEIGHT}px;color:#fff;padding:0 5px;">${value}</div>`
        
    el.style.position = el.style.position || &#39;relative&#39;
    const badge = Vue.extend({
      template: targetTemplate
    })
    const component = new badge().$mount().$el
    if (flag) {
      el.removeChild(el.lastChild)
    }
    el.appendChild(component)
    flag = true
  }
}

参数 Attributes：

然后你可以在模板中任何元素上使用新的 v-badge property，如下：

<div v-badge.dot.info="badgeCount" style="height:50px;width:50px;background:#999"> </div>

9、拖拽指令 v-drag

使用该指令可以对元素进行拖拽。

指令的代码如下：

export default {
  let _el = el
  document.onselectstart = function() {
    return false  //禁止选择网页上的文字
  }
  
  _el.onmousedown = e => {
    let disX = e.clientX - _el.offsetLeft //鼠标按下，计算当前元素距离可视区的距离
    let disY = e.clientY - _el.offsetTop
    document.onmousemove = function(e){     
      let l = e.clientX - disX
      let t = e.clientY - disY;
      _el.style.left = l + "px"
      _el.style.top = t + "px"
    }
    document.onmouseup = e => {
      document.onmousemove = document.onmouseup = null
    }
    return false
  }
}

然后你可以在模板中任何元素上使用新的 v-drag property，如下：

<div v-drag> 支持拖拽的元素 </div>

10、响应缩放指令 v-resize

使用该指令可以响应元素宽高改变时执行的方法。

指令的代码如下：

export default {
  bind(el, binding) {
    let width = '', height = '';
    function isReize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value();  // 执行传入的方法
      }
      width = style.width;
      height = style.height;
     }
     el.__timer__ = setInterval(isReize, 300); // 周期性监听元素是否改变
  },
  unbind(el) {
    clearInterval(el.__timer__);
  }
}

参数 Attributes：

然后你可以在模板中任何元素上使用新的 v-resize property，如下：

// 传入 resize() 方法
<div v-resize="resize"></div>

11、字符串整形指令 v-format

使用该指令可以修改字符串，如使用 v-format.toFixed 保留两位小数、 v-format.price 将内容变成金额（每三位逗号分隔），可以同时使用，如 v-format.toFixed.price。

例如将数字 243112.331 变成 243112.33，或 243,112.33。

指令的代码如下：

export default {
  update (el, binding, vnode) {
    const { value, modifiers } = binding
    if (!value) return
    let formatValue = value
    if (modifiers.toFixed) {
      formatValue = value.toFixed(2)
    }
    console.log(formatValue)
    if (modifiers.price) {
      formatValue = formatNumber(formatValue)
    }
    el.innerText = formatValue
  },
}



function formatNumber (num) {
  num += '';
  let strs = num.split('.');
  let x1 = strs[0];
  let x2 = strs.length > 1 ? '.' + strs[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2
}

参数 Attributes：

然后你可以在模板中任何元素上使用新的 v-format property，如下：

<div> 123 </div>

如何使用这些指令？

为了便于管理指令，我们将每个指令都存在于单独的 js 文件中。在项目的 src 下建一个 directives 目录，目录下新建 index.js 文件用于引入并注册指令。

├── src
|  ├── directive
|  |  ├── index.js
|  |  ├── backtop.js
|  |  ├── badge.js
|  |  ├── copy.js
|  |  ├── ellipsis.js
|  |  ├── empty.js
|  |  ├── expandClick.js
|  |  ├── screenfull.js
|  |  └── tooltips.js
|  ├── main.js

举个例子：

directives 目录下新建 ellipsis.js 文件：

export default function (el, binding) {
    el.style.width = binding.arg || 100 + 'px'
    el.style.whiteSpace = 'nowrap'
    el.style.overflow = 'hidden';
    el.style.textOverflow = 'ellipsis';
}

directives 的 index.js 文件中引入 ellipsis 指令并注册：

import Vue from 'vue'
import ellipsis from './ellipsis' // 引入指令
// import other directives

const directives = {
  ellipsis
  // other directives
}

Object.keys(directives).forEach(name => Vue.directive(name, directives[name]))

最后在 mian.js 中引入 index.js 文件：

import '@/directives/index'

这样就可以正常使用这些指令了：

import '@/directives/index'

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Share some commonly used custom instructions in Vuejs (summary). For more information, please follow other related articles on the PHP Chinese website!