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/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-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 = 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的问题，解决方案参考：

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

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

Vue3（撩课学院）笔记04-高阶API-mixin混入，mixin自定义属性，全局配置mixin，自定义全局指令，自定义局部指令，自定义指令传入数据，teleport传送门
1.Mixin混入将课复用代码独立出来用于复用通过创建Mixin对象将复用代码放在Mixin对象中在根组件中添加mixins属性,通过数组来存放多个minxin对象(也就是把minin内容混入根 ...
vue中自定义全局指令报错
我主要从三个方面来检查 1.首先检查是否拼写错误,尽量粘贴,不要手写 2.区分好变量和字符串的差别 <p v-color="'red'">全局指令</p> ...
vue验证input(自然数，正整数，小数)自定义全局指令
我的项目是基于Vue和Element-ui的,如果朋友们没有用element-ui,请把代码中的el.children[0].value替换为el.value即可用了这个指令,验证一些常规的数字更加 ...
Vue指令_常用vue指令_自定义全局指令_自定义局部指令---vue工作笔记0016
然后我们开始去看vue中的指令,以及自定义指令可以看到这里列出了他给的一些指令. 大部分我们不常用而且有些我们用过了,比如 v-bind 一般我们省略,然后剩下一个: 来使用就可以了.
html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...
富文本编辑器相信很多程序员都用过,但是如何自己制作一个仿富文本的编辑器来解决一些简单的或自定义的需求呢?下面给大家共享一个使用JavaScript实现在textarea光标处插入指定文本内容以及字符串 ...
vue自定义全局和局部指令
一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类 1.全局指令 2.局部指令 3.自定义全局指令格式 ...
Vue2.0 内置指令directives 与全局配置过滤filters
内置指令directives 除了核心功能默认内置的指令 (例如 v-model 和 v-show),Vue 也允许注册自定义指令. 你仍然需要对普通 DOM 元素进行底层操作 ...
Vue3 自定义指令：ClickOutside（点击当前区域之外的位置）
哈喽,大家好,我是 SuperYing.今天我们聊一个 Vue3 自定义指令 - ClickOutside,顾名思义,就是处理点击当前区域之外的位置的场景. Vue 指令首先,我们先来回顾一下 Vu ...
vue自定义防抖节流指令的实现全局指令定义和使用-案例
出于业务需求需要做按钮的点击防抖,开始的打算是二次封装 element-ui的el-button来实现的,然后就做了,但又觉得这样不够简洁,然后就看看广大的掘友大都是怎么做的呢,关于防抖节流的处理,发 ...

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

点击复制内容到粘贴板

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

最新文章

热门文章