新增了关键词检测

新增了手动暂停的恢复
2024-11-29 15:45:29 +08:00
parent 31dd9cf1a1
commit e4e5696b70
11 changed files with 298 additions and 33 deletions
--- a/Web/js/inputTag.js
+++ b/Web/js/inputTag.js
@@ -0,0 +1,170 @@
+/*
+ * Name: inputTag
+ * Author: cshaptx4869
+ * Project: https://github.com/cshaptx4869/inputTag
+ */
+(function (define) {
+    define(['jquery'], function ($) {
+        "use strict";
+
+        class InputTag {
+
+            options = {
+                elem: '.fairy-tag-input',
+                theme: ['fairy-bg-red', 'fairy-bg-orange', 'fairy-bg-green', 'fairy-bg-cyan', 'fairy-bg-blue', 'fairy-bg-black'],
+                data: [],
+                removeKeyNum: 8,
+                createKeyNum: 13,
+                permanentData: [],
+                sortable: false
+            };
+            get elem() {
+                return $(this.options.elem);
+            }
+
+            get copyData() {
+                return [...this.options.data];
+            }
+
+            constructor(options) {
+                this.render(options);
+            }
+
+            render(options) {
+                this.init(options);
+                this.listen();
+            }
+            setData(data){
+                this.options.data=data;
+                this.init(this.options)
+            }
+
+            init(options) {
+                var spans = '', that = this;
+                this.options = $.extend(this.options, options);
+                !this.elem.attr('placeholder') && this.elem.attr('placeholder', '添加标签');
+                $.each(this.options.data, function (index, item) {
+                    spans += that.spanHtml(item);
+                });
+                this.elem.before(spans);
+            }
+
+            listen() {
+                var that = this;
+
+                this.elem.parent().on('click', 'a', function () {
+                    that.removeItem($(this).parent('span'));
+                });
+
+                this.elem.parent().on('click', function () {
+                    that.elem.focus();
+                });
+
+                this.elem.keydown(function (event) {
+                    var keyNum = (event.keyCode ? event.keyCode : event.which);
+                    if (keyNum === that.options.removeKeyNum) {
+                        if (!that.elem.val().trim()) {
+                            var closeItems = that.elem.parent().find('a');
+                            if (closeItems.length) {
+                                that.removeItem($(closeItems[closeItems.length - 1]).parent('span'));
+                                event.preventDefault();
+                            }
+                        }
+                    } else if (keyNum === that.options.createKeyNum) {
+                        that.createItem();
+                        event.preventDefault();
+                    }
+                });
+                this.elem.blur(function () {
+                    that.createItem();
+                });
+                if (this.options.sortable) {
+                    Sortable.create(this.elem.parent()[0], {
+                        handle: 'span',
+                        onSort: function (event) {
+                            that.options.data = that.elem.parent()
+                                .find('span.fairy-tag>span')
+                                .map(function (index, item) {
+                                    return $(item).text();
+                                }).toArray();
+
+                            that.onChange($(event.item).children('span').text(), 'sort');
+                        }
+                    });
+                }
+            }
+
+            createItem() {
+                var value = this.elem.val().trim();
+
+                if (this.options.beforeCreate && typeof this.options.beforeCreate === 'function') {
+                    var modifiedValue = this.options.beforeCreate(this.copyData, value);
+                    if (typeof modifiedValue == 'string' && modifiedValue) {
+                        value = modifiedValue;
+                    } else {
+                        value = '';
+                    }
+                }
+
+                if (value) {
+                    if (!this.options.data.includes(value)) {
+                        this.options.data.push(value);
+                        this.elem.before(this.spanHtml(value));
+                        this.onChange(value, 'create');
+                    }
+                }
+
+                this.elem.val('');
+            }
+
+            removeItem(target) {
+                var that = this;
+                var closeSpan = target.remove(),
+                    closeSpanText = $(closeSpan).children('span').text();
+                var value = that.options.data.splice($.inArray(closeSpanText, that.options.data), 1);
+                value.length === 1 && that.onChange(value[0], 'remove');
+            }
+
+            randomColor() {
+                return this.options.theme[Math.floor(Math.random() * this.options.theme.length)];
+            }
+
+            spanHtml(value) {
+                return '<span class="fairy-tag fairy-anim-fadein ' + this.randomColor() + '">' +
+                    '<span>' + value + '</span>' +
+                    (this.options.permanentData.includes(value) ? '' : '<a href="#" title="删除标签">&times;</a>') +
+                    '</span>';
+            }
+
+            onChange(value, type) {
+                this.options.onChange && typeof this.options.onChange === 'function' && this.options.onChange(this.copyData, value, type);
+            }
+
+            getData() {
+                return this.copyData;
+            }
+
+            clearData() {
+                this.options.data = [];
+                this.elem.prevAll('span.fairy-tag').remove();
+            }
+        }
+
+        return {
+            render(options) {
+                return new InputTag(options);
+            }
+        }
+    });
+}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
+    var MOD_NAME = 'inputTag';
+    if (typeof module !== 'undefined' && module.exports) { //Node
+        module.exports = factory(require('jquery'));
+    } else if (window.layui && layui.define) {
+        layui.define('jquery', function (exports) { //layui加载
+            exports(MOD_NAME, factory(layui.jquery));
+        });
+    } else {
+        window[MOD_NAME] = factory(window.jQuery);
+    }
+}));