背景：产品要求，客户输入框可以输入空格，但提交数据的时候需要过滤前后空格。这就导致了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/indexconst app = createApp(App)defineDirectives(app)app.mount('#app')
directive —> index.js
import $ from 'jquery'function getInput(el) {let inputEleif (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-focusconst focus = (app) => {app.directive('focus', {mounted(el) {const children = $(el).find('input')[0]$(children).focus()}})}// 过滤前后空格的指令 v-trimconst 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 = newValdispatchEvent(inputEle, 'input')}}// 回车后过滤空格(因为输入框可以回车调接口查询，所以这时候单纯的失去焦点过滤不起作用，要对回车键单独做一下处理)const keydown = function(event) {if (event.keyCode === 13) {const newVal = event.target.value.trim()if (event.target.value !== newVal) {event.target.value = newValdispatchEvent(inputEle, 'input')}}}el.inputEle = inputEleel._blurHandler = handlerel._keyHandler = keydowninputEle.addEventListener('blur', handler)inputEle.addEventListener('keydown', keydown)},unmounted(el) {const {inputEle } = elinputEle.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的问题，解决方案参考：
文章链接
菜鸟一枚，发现有问题的欢迎评论指导。
