写一个可插入自定义标签的 Textarea 组件

2020-03-03 09:51:38

参考连接 写一个可插入自定义标签的 Textarea 组件

- “插入自定义标签是什么鬼?”

- “比如你要插入一个<wise></wise>的标签...”

- “什么情况下会有这种需求?”

- “得罪了产品的情况下...”

 

一、需求背景

某天,产品找到我,发生了如下对话

PM:“哇,研发小哥哥你今天好帅啊~”

我:“说人话。”

PM:“我有一个需求。”

我:“我不听。”

PM:“我们要给用户发送模版消息。”

我:“找后端小姐姐啊。”

PM:“后端小姐姐让你在编辑这个字段的时候,标记对应的模版词组。

我:“怎么标记?”

PM:“然后我希望在删除这个模版词组的时候,可以整个删除。

我:“怎么删除?!”

PM:“整个删除。”

我:(打开抽屉,亮出我的四十米长刀)

PM:(楚楚可怜的看着我)

我:“做不了。”

PM:(伸出一根手指)

我:“这需求我接了。”

 

十年后...

仓库地址:https://github.com/wisewrong/vue-tag-textarea

 

二、输入功能实现

为了实现这个功能,我最先想的是改造一个 <textarea>

然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性

这是一个 html5 的属性,可以让元素内容可编辑

<p contenteditable="true">这是一个可编辑的段落。</p>

但这样改造之后的输入框,在粘贴的时候会带上文本格式,即富文本

所以最后我放弃了该属性,采用 CSS 的解决方案:-webkit-user-modify

这个属性有四个可选值:

read-only:默认值,元素只读,不可编辑;

read-write:可以编辑,支持富文本;

read-write-plaintext-only:可以编辑,不支持富文本;

write-only:使元素仅用于编辑(几乎没有浏览器支持)

 

所以最后我给输入框添加了这样一行 CSS 属性:

-webkit-user-modify: read-write-plaintext-only !important;

 

三、实现单向绑定

一个常规的输入框组件,父组件可以通过 v-model 指令双向绑定数据

v-model 其实是一个语法糖,它向子组件传递一个 value 属性,并接收一个 input 事件

所以对于父组件来说:

等价于:

 

而子组件为了支持 v-model,需要在 props 里定一个 value 属性

 

并且在合适的时候触发 this.$emit('input', value)

 

在这个 tag-textarea 组件中,我在输入框上监听 input 事件,获取元素内的 innerHTML,并暴露给父组件

 

到这里,还仅仅实现了单项绑定——子组件的值改变时,父组件的值随之改变

要实现真正意义上的双向绑定,还有一段路要走

 

四、完成双向绑定

首先需要在 data 定义一个 currentText

如果是普通的输入框,直接在输入框元素上使用 v-text="currentText

然后在 watch 中监听 value 的变化,实时更新 currentText,就能实现双向绑定

 

但这个 textarea 返回的是 html,v-text 是不能用了

如果用 v-html 的话,在输入的时候,光标会一直跳到最前方,最后我采用了以下方案:

在 data 添加一个 isLocked 用于记录锁定状态 

在 mounted() 的时候,通过 dom 操作初始化数据 

在聚焦和失焦的时候修改锁定状态

看,很简单吧,没有人会受伤的世界 一个基本的 textarea,完成了

 

五、插入标签

创建标签并不难,可如何让这个标签插入到光标所在的位置?

于是 Selection 对象闪亮登场,它记录了拖蓝的文本范围,或插入符号的当前位置

通过 Selection 对象可以获取到 Range 对象,然后使用 Range.insertNode() 方法,在目标位置插入标签

在 mounted() 中监听 selectionchange 事件,添加对应的处理函数,并在 beforeDestroy() 的时候卸载

在处理函数中,记录当前的 range

 

添加标签的时候,首先通过 document.createElement() 创建标签,然后插入节点

 

六、删除标签

删除分为光标位于标签外和标签内两种情况

首先是当光标在标签外的时候,有一个取巧的办法

给模版标签添加样式,将 -webkit-user-modify 设置为 read-only

这样在删除的时候,因为无法编辑,就会直接删除整个 dom 节点

 

当光标位于标签内的时候,会稍微复杂一点

首先需要监听 click 事件,当点击模版标签的时候,记录其 id

然后监听 keydown.delete 事件,如果选中了标签,就使用 removeChild() 删除标签

 

以上,就已经满足了产品的基本需求

不过既然是开发组件,就需要做一些适合组件开发的优化

比如 props 、slot 、 css样式等,这里就不多赘述了


  • 2021-02-03 16:59:59

    iOS 静态库和动态库全分析

    库就是程序代码的集合,将 N 个文件组织起来,是共享程序代码的一种方式。从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行。

  • 2021-02-03 17:01:30

    iOS库 .a与.framework区别

    静态库:连接时完整地拷贝至可执行文件中,被屡次使用就有多份冗余拷贝。 动态库:连接时不复制,程序运行时由系统动态加载到内存,供程序调用,系统只加载一次,多个程序共用,节省内存。

  • 2021-02-03 17:13:58

    iOS - 封装静态库

    静态库:链接时完整的拷贝至可执行文件中,被多次使用就有多份冗余拷贝,.a的静态库 .framework的静态库

  • 2021-02-03 17:16:07

    iOS 中的动态库、静态库和 framework

    首先来看什么是库,库(Library)说白了就是一段编译好的二进制代码,加上头文件就可以供别人使用。 什么时候我们会用到库呢?一种情况是某些代码需要给别人使用,但是我们不希望别人看到源码,就需要以库的形式进行封装,只暴露出头文件。另外一种情况是,对于某些不会进行大的改动的代码,我们想减少编译的时间,就可以把它打包成库,因为库是已经编译好的二进制了,编译的时候只需要 Link 一下,不会浪费编译时间。

  • 2021-02-03 17:17:53

    iOS 同一个工程下打包不同的app

    应用图标,启动画面,应用启动后的首页都不一样。 有些课程(例如公务员考试和高考)是有目标考试的概念,不同的目标考试大纲是不一样的。拿高考来举例,北京的高考和上海的高考,就有着完全不一样的考试大纲。高考的文科和理科,又有着完全不同的考试科目。 有些课程会有一些自定义的界面,例如高考的应用可以设置昵称,有些课程的真题练习中是有推荐真题模块的,而有些课程又没有。 有些课程有扫描答题卡功能,有些课程有考前冲刺功能,有些课程有大题专项查看功能,而有些课程又没有上述功能。另外还有一些微小细节,但是解决方法和类似,所以就不一一展开说明。

  • 2021-02-04 14:02:30

    window软件界面找不到了跑到屏幕外面去了

    一般可以这样操作,按Alt+空格,然后按M,然后用上下左右键把窗口移动到能看到的地方,再按回车。有些第三方的软件可能不能用,大部分都可以这样做。

  • 2021-02-04 14:08:13

    基于 Electron 的爬虫框架 Nightmare

    Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服务器。其基于浏览器的应用方式可以极方便的做各种响应式的交互,接下来介绍下关于 Electron 上衍生出的框架 Nightmare

  • 2021-02-04 20:13:02

    iOS framework制作及使用(包含xib和图片)

    静态库与动态库简介: 静态库:链接使用时完整地拷贝至可执行文件中 动态库:链接时不复制,程序运行时由系统动态加载到内存,供程序调用,系统只加载一次 本文制作framework对应xcode版本:10.1