标签组件探索

本文最后更新于:2021年6月29日 晚上

最近在改版的时候,遇到一个标签插入的小需求,没错,就像下图显示的那样:
需求样式

刚开始想着不就一个简单的标签组件,很简单的嘛,可是后来发现越简单的东西,可能需要考虑的用户体验,还有本身组件的可扩展性都是需要仔细斟酌的。

在踩了坑之后,决定把这个标签逻辑重构,形成单独的标签组件,以方便日后的复用

标签组件功能及逻辑

在决定做成组件之前,又重新看了之前的代码,然后思考了一下一个标签组件到底需要什么功能,才能保证这个组件的可扩展性高,用户体验又好呢,于是就规划了一下这个组件可以有的功能点:

功能

  1. 标签插入去重
  2. 可设定空格或回车输入
  3. 限制可插入标签数
  4. 是否有需屏蔽标签
  5. 是否有推荐标签
  6. 删除标签方法(回退、点击删除)
  7. 各种提示的自定义

逻辑

  1. 初始化,判断已有标签数,并设置可插入的剩余标签数
  2. 设置 input 的 placeholder 提示,根据用户希望使用的插入方式设置文案
  3. 插入标签,如果标签为必填项,则判断是否有输入文字,如果没有,则提示必填标签文案
  4. 键盘按了设定的插入按键后,开始遍历已有的标签,已存在标签则无法插入,并提示
  5. 键盘按了设定的插入按键后,判断标签字数是否超过限定字数(这里待定,也可以直接用 max-length 来限定)
  6. 键盘按了设定的插入按键后,如果可以插入标签,则插入后清空输入框内容并获取焦点
  7. 按回退键,或直接点击标签可以进行删除,删除之后,如果必填标签,判断标签数量是否为 0,为 0 则提示必填标签文案

标签组件基本架构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function (window) {
var TagSdk = function () {
return;
};
/**
* @description 扩展参数对比
* @param {object} target - 目标对象
* @param {object} source - 源对象
* @returns {object} - 合成的对象
*/
TagSdk.prototype.extend = function (target, source) {
for (var p in source) {
if (source.hasOwnProperty(p)) {
target[p] = source[p];
}
}
return target;
};
TagSdk.prototype.xxx = function () {};
})(window, document);

组件说明

  • 开始使用,默认参数如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/** 初始化
* @param opts 参数
* @param {number} insertType - 输入标签的方式,13为回车,32为空格,如果选择32,则输入的标签不能允许有空格
* @param {number} maxTag - 允许插入的标签数量
* @param {number} maxTagLength - 标签字数限制
* @param {string} maxTagTip - 可插入标签数量提示容器
* @param {string} alertTag - 标签相关提示容器,如果为alert,则直接弹出系统提示框
* @param {string} hotTag - 推荐标签
* @param {string} inputTag - 输入标签为空的提示
* @param {string} lengthError - 超过限制标签数量提示
* @param {string} exitError - 标签去重提示
* @param {bollean} emptyFlag - 是否必须填标签
*/
TagSdk.tagInit({
insertType: 13,
maxTag: 20,
maxTagLength: 20,
maxTagTip: 'tag-num',
alertTag: 'tag-alert',
hotTag: 'tag-hot',
inputTag: 'tag-input',
inputError: '请输入标签',
numError: '已超过限制标签数',
exitError: '已存在标签',
emptyFlag: false,
});
  • 删除功能
    按回退键,或直接点击标签进行删除

项目链接