简体转繁体工具开发

2020-07-10 07:47

又是一个Vue做的小网页。网页功能本身很简单，修修改改加起来的时间也就两三天。但是花了几个礼拜的时间去编写那些文字转换的条目和提示……

文字相关的部分没什么好说的。和专业的项目比如BYVoid大神的opencc以及字幕组大神维护的繁化姬相比，这个只是一个玩具。非要自夸一下的话就是我这个完全是在网页端运行的，没有服务器，无需网络传输。

代码上面踩的坑倒是可以记录一下：

转化后的文字这部分，最开始的方案是一边解析转化、一边生成html代码，直接渲染。遇到多选字就生成一个<a> tag，其他字就直接添加到当前的<span> tag里。但是这样的话，这些<a> tag的事件绑定就很难办，因为它们是在网页第一次渲染结束之后动态产生的，它们携带的Vue绑定全部都无效。所以后来改成了将解析后的字存在一个数组里，数组作为数据源绑定到文字输出框，在输出时决定如何渲染。这样更符合数据驱动的理念。

原本打算用Bootstrap的dropdown组件来做那个弹出菜单，后来发现做不到，因为dropdown组件和触发它的tag必须放在同一个节点下，这个节点就是文字输出框，它的内容是与数据绑定的，没有简单的办法额外插一个组件进来。后来没有用dropdown组件（因此也省去了加载JQuery和另外两个js文件的麻烦），是自己做了一个position-absolute的<div>，在交互事件发生时手动显示和隐藏，以及获取和设置它的相对位置。

这个自制的dropdown还需要实现点击外面时关闭菜单的功能。没想到更好的办法，只好给网页右侧区整个添加了一个点击事件。然后发现这个事件在我点击多选字和菜单的时候也会被触发，显然是pop up上去的。解决方法是在<a> tag上设置v-on:click="..."Vue绑定事件的同时，再设置一个onclick="event.stopPropagation(); return false"。event.stopPropagation()是阻止事件pop up，return false是阻止<a> tag试图跳转到href定义的网址（href="[[HASH]]"），进而导致页面刷新。也就是阻止<a> tag原生的行为。其实如果去掉href属性或者将其留空也能实现这个功能，但这样一来tag的样式就会发生变化。

以上可以看出，Vue允许v-on:click="..."和onclick="..."同时存在，二者都会起效。