Vue | 指令实现自动填充英文名功能
- 背景:应用系统中存在多个创建实体表单,表单填写时,在填写中文名称后,要填写对应的英文名作为标识或数据库查询索引。
- 需求:填写中文名的同时,系统自动生成英文名并填充到表单中,辅助用户操作,节约操作时间。
实现效果
方案调研
对需求进行分析后,对于如何将中文名翻译成英文字符串,调研以下方案:
- 调用翻译引擎
优点:翻译准确,对于短句也能翻译
缺点:部署难度大,需要捆绑翻译引擎 - 调用开放API(谷歌翻译/百度翻译等)
优点:能完成翻译功能
缺点:可能需要付费/开发者帐号等,需要集成成本,需要私有化部署版本时(无法连接外网)可能无法实现 - 使用音译插件(参考:https://github.com/dzcpy/transliteration)
优点:轻量,集成简单,有一定可扩展性,可离线
缺点:无法翻译,只能音译(会将“你好”翻译成“ni_hao”而不是“hello"),使标识的可读性和语义性下降。
以上三种仅为中转英的方法不同,均可实现功能。本次方案暂使用第三种。
实现方案
- 分析:该功能需要增加到多个表单中,如果为每个需要添加的组件都增加相应逻辑,侵入性较强,也不好维护。
- 逻辑提炼:
- 为中文名的输入框绑定监听事件,监听输入,取得该input框输入的值
- 将第一步中获得的中文值转化成英文字符串
- 将英文字符串写入到英文名输入框中
思路: 为表单添加vue
自定义指令,通过取子节点(根据虚拟节点层级,vnode
的子级)的方法,获取到需要操作的dom元素,再在指令逻辑中进行逻辑处理。
代码实现
指令定义
- 定义
v-transliterate
指令(vue自定义指令的定义和使用可参考官方文档,此处不做赘述) transliterate.js
import { transliterate as tr, slugify } from 'transliteration'
export default {inserted(el, binding, vnode) {let sourceInputEl = vnode.componentInstance.$children.find(item => item.prop === 'name').$children[1].$el.children[0]let targetInputEl = vnode.componentInstance.$children.find(item => item.prop === 'key').$children[1].$el.children[0]let isFirstInput = true;sourceInputEl.addEventListener('keyup', () => {// 判断当前标识是否已填写,若已填写,则不再根据中文名称生成let isEmpty = !targetInputEl.value;if (isEmpty || !isFirstInput) {// 一定延迟处理,用户使用几乎无感知setTimeout(() => {let transValue = slugify(sourceInputEl.value, { separator: '_' });let inputEvt = new InputEvent('input', {inputType: 'insertText',data: transValue,dataTransfer: null,isComposing: false});targetInputEl.value = transValue;targetInputEl.dispatchEvent(inputEvt);isFirstInput = false;}, 500);}})}
}
注意事项
1、transValue的生成可根据前面所说的不同方案,更改生成的方法。
2、两个input 元素是根据prop来筛选的,代码中硬编码为”name“ -中文名 和”key“ 英文名,可根据需求调整,也可以根据指令方法入参的binding赋值。由于本项目中所有表单prop都是固定的,所以没有写相应逻辑。
3、keyup
事件可根据需求更改为blur
事件,对于调用后台api获值,可考虑改为blur,降低频繁请求。
4、执行targetInputEl.value = transValue;
后,页面上显示已经改变,但点击保存表单时仍然会触发空值校验,怀疑是因为该赋值没有刷新到虚拟节点的model中,故而使用 targetInputEl.dispatchEvent(inputEvt);
方法模拟输入事件,触发值的刷新。
5、isEmpty
空值校验,避免用户在填写表单时先填写了英文名,再填写中文名时,英文名被覆盖。逻辑一般限定标识生成后就不允许修改,该方法也规避了修改时的英文名跟着中文名修改的问题。
6、使用transliterate
可定义配置字典,实现常用中-英单词的翻译,但仍然无法替代翻译引擎。配置逻辑参考github上的README即可。
slugify.config({ replace: [['世界','world'],['你好','hello']] });
指令使用
需要用该功能的地方,在表单元素增加该指令即可。
总结
以上就是实现全过程,如果有更好的实现方法,请留言告诉我哦~
Vue | 指令实现自动填充英文名功能相关推荐
- 浏览器自动填充数据,Cookie清除不了?,这是因为某些浏览器设置了,自动填充账户名密码,造成cookie没有删除的假像。
一.原因分析 1.查看Cookie是否真的被清除掉了 2.原来是浏览器设置了自动填充密码 二.代码展示: 虽然这个地方清除了,但是由于某些浏览器设置了,自动填充账户名密码,造成cookie没有删除的假 ...
- 根据谐音自动转换英文名的网站~如何起一个流行、有意义的英文名?你的英文名有什么内在意义吗?
今天发现自己的英文名有点low,想重新起一个.百度一搜,发现起名的网站真不少,定睛一看,起个名字要几十块?爱了爱了. 于是我花了半天时间研究,综合了网上的资源,写出这篇攻略. ps:已经有英文名的也可 ...
- android自动填充包名,debug/release 修改包名,取不同包名下的agconnect-services.json 文件...
问题描述 我在打多渠道包的时候,我需要区分debug版本,release版本,其中涉及到包名的不同,我使用release编译的时候,发现如下错误信息.这个原因是因为你的agconnect-servic ...
- vue防止浏览器自动填充以及记住密码
当我们使用input,浏览器会对带有type="password"的input进行记住密码. 解决方法: 一,input的type改为text,然后修改样式 vue代码 <e ...
- vue解决输入框自动填充问题
//文本输入框 <el-inputv-model.trim="phone"autocomplete="off"placeholder="请输入手 ...
- vue element-ui elementUi 邮箱自动补全 邮箱自动填充
<el-autocompletev-model="form.user.email":fetch-suggestions="querySearchEmail" ...
- 【Mybatis系列】之插件—自动填充字段插件,再也不需要手动填写或者耦合业务了!
Mybatis是一个非常流行的Java ORM框架,它为开发者提供了一种简单的方式来操作关系型数据库.Mybatis插件是Mybatis的一个重要扩展功能,它允许开发者通过自定义插件来增强Mybati ...
- koa mysql 按钮级权限_Vue 指令实现按钮级别权限管理功能
在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考. 当前用户的权限列表储存在 store 里,也可以是其他地方. 指令 // src/directives/ ...
- PC端浏览器自动填充账号密码输入框问题该如何解决?
项目场景: 个人中心界面有个子菜单--修改支付密码,可以进行支付密码设置和修改. 问题描述 修改支付密码页面有三个输入框,第1个是type="text"的文本类型输入框,最后2个是 ...
最新文章
- NeurIPS提前看 | 四篇论文,一窥元学习的最新研究进展
- Python入门(三)变量类型及数据类型转换
- mac 设计表结构_模具设计丨问题点检表、全套标准件结构分布,值得转发
- long转时间 unity_Unity3D如何获取时间戳或北京时间
- CSU 1116 Kingdoms
- core控制器属性注入的用处_asp.net-core – 如何使用Autofac和ASP.NET Core在控制器上启用属性注入?...
- 云服务器里面安装虚拟服务器,云服务器里面安装虚拟服务器
- 简析边缘数据中心技术
- 数据结构视频教程哪个好
- usb为什么计算机无法识别网络,电脑的usb网卡无法识别怎么办
- Stm32中英文手册官网免费
- Mybatis 官网地址
- 华科智标_停车场定位导航反向寻车系统
- 有一个棋盘,有64个方格,在第一个方格里面放1粒芝麻重量是0.00001kg,第二个里面放2粒,第三个里面放4,棋盘上放的所有芝麻的重量。
- chrome修改摄像头权限_如何在Chrome中更改网站的摄像头和麦克风权限
- leetcode 416:分割等和子集
- PHP: switch结构
- 一款相见恨晚SCI论文写作神器-phrasebank-润色英文表达
- 运维监控工具排名(前10名介绍)
- 互联网日报 | 理想汽车登陆纳斯达克;苏宁易购会员数量突破6亿;高德地图上线“司机公厕”...
热门文章
- linux 系统 Shell语言 基础
- mybatis:Error preparing statement. Cause: java.lang.NullPointerException
- pdf文档页码怎么添加?分享这几个pdf加页码方法给你
- 中国人工智能学会通讯——AI时代的若干伦理问题及策略 1.1人工智能时代正在加速到来,算法决策开始兴起...
- linux 多个csv合并成一个csv
- Lesson16基于消息的异步套接字聊天室程序 VS2013 VC++深入详解 孙鑫
- 蓬莱小课:数据分析岗面试又问到MySQL索引?怎么回答看完你就明白了
- 使用python实现微信小程序自动签到2.0
- 《麦肯锡方法》第5章 组建团队-思维导图
- 基于eNSP的企业PON入云网络模拟