vue3自定义全局指令（过滤前后空格，输入框自动聚焦，点击复制内容到粘贴板）

背景：产品要求，客户输入框可以输入空格，但提交数据的时候需要过滤前后空格。这就导致了v-model.trim不能用，因为trim会限制用户的输入。

在页面中的用法（因为是全局引入，单页面直接用即可）

// v-trim 可实现正常输入，但离开焦点或者回车，会过滤前后空格
// v-focus 实现打开页面自动聚焦，目前发现单行输入框可以，多文本输入框会报错
<el-input v-model="name" type="text" v-trim v-focus placeholder="请输入" @keyup.enter="getList" />

项目结构：

main.js (指令挂载到全局)

import { createApp } from 'vue'
import App from './App.vue'
import defineDirectives from '@/directive/index

const app = createApp(App)
defineDirectives(app)
app.mount('#app')

directive —> index.js

import $ from 'jquery'

function getInput(el) {
  let inputEle
  if (el.tagName !== 'INPUT') {
    inputEle = el.querySelector('input')
  } else {
    inputEle = el
  }
  return inputEle
}
function dispatchEvent(el, type) {
  const evt = document.createEvent('HTMLEvents')
  evt.initEvent(type, true, true)
  el.dispatchEvent(evt)
}
// 聚焦指令 v-focus
const focus = (app) => {
  app.directive('focus', {
    mounted(el) {
      const children = $(el).find('input')[0]
      $(children).focus()
    }
  })
}
// 过滤前后空格的指令 v-trim
const trim = (app) => {
  app.directive('trim', {
    mounted(el) {
      const inputEle = getInput(el)
      const handler = function(event) {
        const newVal = event.target.value.trim()
        if (event.target.value !== newVal) {
          event.target.value = newVal
          dispatchEvent(inputEle, 'input')
        }
      }
      // 回车后过滤空格(因为输入框可以回车调接口查询，所以这时候单纯的失去焦点过滤不起作用，要对回车键单独做一下处理)
      const keydown = function(event) {
        if (event.keyCode === 13) {
          const newVal = event.target.value.trim()
          if (event.target.value !== newVal) {
            event.target.value = newVal
            dispatchEvent(inputEle, 'input')
          }
        }
      }
      el.inputEle = inputEle
      el._blurHandler = handler
      el._keyHandler = keydown
      inputEle.addEventListener('blur', handler)
      inputEle.addEventListener('keydown', keydown)
    },
    unmounted(el) {
      const { inputEle } = el
      inputEle.removeEventListener('blur', el._blurHandler)
      inputEle.removeEventListener('keydown', el._keyHandler)
    }
  })
}
export default (app) => {
  focus(app)
  trim(app)
}

点击复制内容到粘贴板

1、最简单的方式是引入插件，也比较好用，直接百度就有。
2、手写指令的方式实现复制内容到粘贴板

具体实现效果如图：

代码里面的用法：
vue页面部分

<!-- 复制表格里面的url参数，复制到粘贴板的内容是 URL：具体的值，如果需要直接复制值，去掉前面拼接的字符串即可 -->
<span v-copy="'URL：'+row.url" class="blue-color">{{ row.url || '--' }}</span>

指令页面：

function copyFunction(value) {
  navigator.clipboard.writeText(value)
  ElMessage.success('成功复制到粘贴板!')
}
const copy = (app) => {
  app.directive('copy', {
    mounted(el, binding) {
      el.addEventListener('click', () => copyFunction(binding.value))
    },
    unmounted(el, binding) {
      el.removeEventListener('click', () => copyFunction(binding.value))
    }
  })
}

export default (app) => {
  copy(app)
}

会出现线上环境报错找不到writeText的问题，解决方案参考：

文章链接
菜鸟一枚，发现有问题的欢迎评论指导。