vue自定义全局指令v-emoji限制input输入表情和特殊字符
问题:
- 后台不提供富文本存储,所以emoji表情入库会报错
- 需求要求前端在输入的时候过滤掉表情符号
- 全局的input 和富文本textarea输入框都需要过滤emoji表情
分析:
1.每一个input写事件写正则校验代码量实在太多了还很麻烦;所以想用自定义全局指令,就不需要每个用到的地方都去引入了。
2.emoji太多了,并且输入法的emoji、mac自带的emoji 、windows自带的emoji是不一致的。全部emoji列出来一一过滤替换实在不现实,后来发现emoji表情都是2个字符的长度,其他键盘输入都是一个字符的长度。因此用字符长度来校验可行
3.需要在输入的时候过滤掉表情符号,那么就需要在(keyup)键盘触发的时候监听触发过滤事件
js实现输入框监听方法 common/utils/emoji'
const findEle = (parent, type) => { return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}
const trigger = (el, type) => { // 给元素绑定事件const e = document.createEvent('HTMLEvents')e.initEvent(type, true, true)el.dispatchEvent(e)
}const emoji = {// el:指令所绑定的元素,可以用来直接操作 DOM。// vnode:Vue 编译生成的虚拟节点bind: function (el, binding, vnode) { // 指令第一次绑定到元素时调用// 判断是否是emoji图标const isEmoji = char => {// 表情都是2个字符return char.length > 1;}const emoji2empty = str => { // emoji图标都替换成空字符串‘’return Array.from(str).filter(c => !isEmoji(c)).join('')}let $inp = findEle(el, 'input') || findEle(el, 'textarea') // 判断绑定元素是否是input输入框或者富文本输入框el.$inp = $inp $inp.handle = function () {let val = $inp.value$inp.value = emoji2empty(val) // 监听输入框的emoji图标转换成空trigger($inp, 'input')}$inp.addEventListener('keyup', $inp.handle) // el添加键盘监听事件keyup$inp.addEventListener('blur', $inp.handle) // el添加键盘失焦事件blur},unbind: function (el) { // 只调用一次,指令与元素解绑时调用。el.$inp.removeEventListener('keyup', el.$inp.handle) el.$inp.removeEventListener('blur', el.$inp.handle)},
}
export default emoji
入口文件引入emoji并且全局注入指令
Vue.directive( id, [definition] )
id: 为指令唯一id
{Function | Object} [definition] 注册的指令
一个指令定义对象可以几个钩子函数 (均为可选):这里使用到bind和unbind
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
unbind:只调用一次,指令与元素解绑时调用。
基础用法
<el-inputv-emojiv-bind="control"v-model="value"maxlength="99" >
import emoji from '@/utils/emoji'
相关文章:
vue自定义全局指令v-emoji限制input输入表情和特殊字符
问题: 后台不提供富文本存储,所以emoji表情入库会报错需求要求前端在输入的时候过滤掉表情符号全局的input 和富文本textarea输入框都需要过滤emoji表情 分析: 1.每一个input写事件写正则校验代码量实在太多了还很麻烦;所以想用…...
Excel 5s内导入20w条简单数据(ExecutorType.BATCH)Mybatis批处理的应用
文章目录 Excel 5s内导入20w条数据1. 生成20w条数据1.1 使用Excel 宏生成20w条数据1.2 生成成功 2. ExecutorType:批量操作执行器类型2.1 ExecutorType.SIMPLE2.2 ExecutorType.BATCH2.3 ExecutorType.REUSE 3. 20w条数据直接插入数据库3.1 使用ExecutorType.SIMPLE…...
【期刊】IEEE系列指定期刊模版下载(LaTeX或者Word)全网最细教程
IEEE旗下有很多期刊,例如: IEEE Transactions on Pattern Analysis and Machine Intelligence IEEE Transactions on Cybernetics IEEE Transactions on Neural Networks and Learning Systems IEEE Transactions on Industrial Informatics IEEE Tra…...
损失函数和评估函数
损失函数和目标函数定义 损失函数是用于衡量模型在训练过程中预测结果与实际结果之间的差异的函数。它通过计算模型的预测值与实际值之间的距离或差异来 quantitatively 表示模型的性能好坏。损失函数通常被用作优化算法(如梯度下降)的目标函数,通过最小化损失函数来调整模…...
第四章 文件管理 四、文件的物理结构(文件分配方式)
目录 一、文件块,磁盘块 二、连续分配 1、定义: 2、计算方式: 3、注意: 4、优点: 5、缺点: 6、总结 三、链接分配----隐式链接 1、定义: 2、如何实现逻辑块号转物理块号 3、优点&…...
解析外贸开发信的结构?营销邮件书写技巧?
做外贸的开发信结构是怎样的?写外贸邮件的注意事项? 外贸开发信是国际贸易中至关重要的一环,它不仅是与潜在客户建立联系的第一步,也是一种有效的市场推广工具。蜂邮EDM将深入解析外贸开发信的结构,帮助您更好地理解如…...
Linux的命令基本格式
因为对服务器来讲,图形界面会占用更多的系统资源,而且会安装更多的服务、开放更多的端口,这对服务器的稳定性和安全性都有负面影响。其实,服务器是一个连显示器都没有的家伙,要图形界面干十么?说到这里&…...
数据库Redis(二):基本数据类型
Redis中采用Key-Value键值对的形式将数据存储在数据库中,首先介绍Redis中针对键Key的操作命名。 Redis键Key相关命令 # 查看当前库所有key keys * # 判断某个key是否存在 exists <key> # 查看你的key是什么类型 type <key> # 删除指定的key数据 …...
mysql第四次作业
目录 数据表介绍 --1.学生表Student(SId,Sname,Sage,Ssex)--SId 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表Course(CId,Cname,TId)--CId 课程编号,Cname 课程名称,TId 教师编号 --3.教师表Teacher(TId,Tname)--TId 教师编号,Tname 教师姓名 --4.成绩…...
kubesphere 一键部署K8Sv1.21.5版本
1. 在centos上的安装流程 1.1 安装需要的环境 yum install -y socat conntrack ebtables ipset curl1.2 下载KubeKey #电脑必须可以访问github,很重要。不然安装过程会出问题 curl -sfL https://get-kk.kubesphere.io | VERSIONv1.2.1 sh - chmod x kk1.3 开始安…...
设计模式(12)状态模式
参考【设计模式】用Java实现状态模式_java 状态模式_卷帘的博客-CSDN博客 一、介绍: 1、状态模式:是一种行为设计模式,它允许对象在内部状态发生改变时改变其行为。该模式将对象的行为包装在不同的状态类中,使得对象的行为可以根…...
C#WPFPrism框架模块化应用实例
本文实例演示C#WPFPrism框架模块化应用实例。 首先创建WPF项目,修改App相关文件内容,以便使用prism。 一、添加模块 解决方案中添加ModuleA和ModuleB两个项目 删除不用的窗体,添加自定义窗体 修改ModuleA和ModuleB的输出类型...
ES6之Set集合(通俗易懂,含实践)
Set是什么?它的方法有哪些?它在实例开发中有什么作用? 让我为大家介绍一下吧! ES6提供了新的数据结构 Set(集合) 。它类似于数组,但成员的值是唯一的,常用于数组去重。 创建方法: let s new S…...
深度学习标注工具(包括自动标注)总结——持续更新
首次记录日期2023年10月24日 名称 导出格式支持形状地址1 anylabeling 支持yolov5和v8,自动标注的软件 沿物体轮廓分割 https://github.com/vietanhdev/anylabeling 2 RectLabel 使用Core ML模型自动标记图像 对象、属性、热键和快速标签的设置。 以PASCAL VOC …...
阿里云核心产品list
计算: 01函数计算(Function Compute)全托管serverless计算服务,不需要管理服务器等基础设施,只需要编写代码并上传。 02云服务器(Elastic Compute Service)云计算服务 03GPU云服务(G…...
矢量图形编辑软件 illustrator 2023 mac 中文软件特点
illustrator 2023 mac是一款矢量图形编辑软件,用于创建和编辑排版、图标、标志、插图和其他类型的矢量图形。 illustrator 2023 mac软件特点 矢量图形:illustrator创建的图形是矢量图形,可以无限放大而不失真,这与像素图形编辑软…...
vue按特定字符串切割后端传输的图片路径
一、分隔字符 /userfiles/1/attachment/null/2023/10/13967b6b8332413f92ab67735873aa76.jpg|/userfiles/1/attachment/null/2023/10/17fd6e2c16144e66b8cd3ec495e6745f.png 后端传来图片的路径是按照 | 进行分隔的 首先在return中定义数组 在methods中添加分隔方法 //将查询…...
Spring底层原理(三)
Spring底层原理(三) Bean的生命周期 SpringBootApplication public class Application {public static void main(String[] args) {ConfigurableApplicationContext context SpringApplication.run(Application.class, args);context.close();} }Slf4j Component public cla…...
ElementPlus表格中的背景透明
ElementPlus表格中的背景透明 最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体。可以参考的资料非常少,大部分都是ElmentUI的方法,在…...
【会议征稿通知】2024第四届神经网络、信息与通信工程国际学术会议(NNICE 2024)
2024第四届神经网络、信息与通信工程国际学术会议(NNICE 2024) 2024 4th International Conference on Neural Networks, Information and Communication Engineering 2024第四神经网络、信息与通信工程国际学术会议(NNICE 2024࿰…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...
