[JavaScript知识库]vue 自定义指令练习

1. v-copy

一些 自定义指令里面钩子函数需要互相交流的值 挂载在 el 上

const copy = {
  bind (el, binding) {
    // 一些 自定义指令里面钩子函数需要互相交流的值 挂载在 el 上
    el.$value = binding.value
    el.handle = () => {
      // 创建textarea标签
      const textarea = document.createElement('textarea')
      // 设置相关属性
      textarea.readOnly = 'readonly'
      textarea.style.position = 'fixed'
      textarea.style.top = '-99999px'
      // 把目标内容赋值给它的value属性
      textarea.value = el.$value
      // 插入到页面
      document.body.appendChild(textarea)
      // 调用onselect()方法
      textarea.select()
      // 把目标内容复制进剪贴板, 该API会返回一个Boolean
      const res = document.execCommand('Copy')
      res && console.log('复制成功，剪贴板内容：' + el.$value)
      // 移除textarea标签
      document.body.removeChild(textarea)
    }
    // 绑定click事件
    el.addEventListener('click', el.handle)
  },
  // 当传进来的值更新时
  componentUpdated (el, binding) {
    // 更新el的value值，click的时候获取最新的值
    el.$value = binding.value
  },
  unbind(el) {  
    el.removeEventListener('click', el.handle)
  }
}

export default copy

?生命周期钩子：

// 在组件的 VNode 更新时调用
update(el,binding,vnode,oldVnode){
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated(el,binding,vnode,oldVnode){
},

2. v-input

对 input 输入框输入的值进行校验

（1）只允许输入数字

<input v-input:number />
<input v-input:maxSize="16" />

此时 binding 的值

冒号 后面的 值 是 arg

const input = {
  // binding 直接赋值结构
  bind (el, { arg, value }) {
    el.$handle = (el) => {
      // 判断类型
      if (arg === 'number') {
        el.value = el.value.replace(/[^\d]/, '')
      } else if (arg === 'maxSize') {
        el.value = el.value.slice(0, value)
      }
    }
    // 监听变化
    el.addEventListener('input', () => {
      el.$handle(el)
    })
  }
}

export default input

3. vue-clampy?

<p v-clampy="3">Long text to clamp here</p>
<!-- Long text to...-->

代码：

const Clampy = {
  bind (el, { value }) {
    const arr = el.innerHTML.split(' ')
    if (arr.length > value) {
      el.innerHTML = arr.slice(0, value).join(' ') + '...'
    }
  }
}

export default Clampy