layui标签输入框inputTags

「爱情、让人受尽委屈。」 2022-02-27 01:44 453阅读 0赞

layui标签输入框inputTags

样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]

--------------------

目录结构：

![在这里插入图片描述][20190326151956989.png]

--------------------

页面代码：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>inputTags</title>
    		<link rel="stylesheet" href="plugins/layui/css/layui.css" />
    
    	</head>
    
    	<body>
    		<div class="tags" id="tags">
    			<input type="text" name="" id="inputTags" placeholder="回车生成标签" autocomplete="off">
    		</div>
    	</body>
    
    </html>
    <script type="text/javascript" src="plugins/layui/layui.js"></script>
    <script> layui.config({ base: 'js/', }).use(['inputTags'], function() { var inputTags = layui.inputTags; inputTags.render({ elem: '#inputTags', //定义输入框input对象 content: [], //默认标签 aldaBtn: true, //是否开启获取所有数据的按钮 done: function(value) { //回车后的回调 console.log("刚刚输入标签===="+value) } }) }) </script>

--------------------

\*\*inputTags.js\*\*

/* * @Author: layui-2 * @Date: 2018-08-31 11:40:42 * @Last Modified by: layui-2 * @Last Modified time: 2018-09-04 14:44:38 */
    layui.define(['jquery','layer'],function(exports){ 
      "use strict";
      var $ = layui.jquery,layer = layui.layer
      
    
      //外部接口
      ,inputTags = { 
        config: { }
    
        //设置全局项
        ,set: function(options){ 
          var that = this;
          that.config = $.extend({ }, that.config, options);
          return that;
        }
    
        // 事件监听
        ,on: function(events, callback){ 
          return layui.onevent.call(this, MOD_NAME, events, callback)
        }
        
      }
    
       //操作当前实例
      ,thisinputTags = function(){ 
        var that = this
        ,options = that.config;
    
        return { 
          config: options
        }
      }
    
      //字符常量
      ,MOD_NAME = 'inputTags'
    
    
      // 构造器
      ,Class = function(options){ 
        var that = this;
        that.config = $.extend({ }, that.config, inputTags.config, options);
        that.render();
      };
    
       //默认配置
      Class.prototype.config = { 
        close: false  //默认:不开启关闭按钮
        ,theme: ''   //背景:颜色
        ,content: [] //默认标签
        ,aldaBtn: false //默认配置
      };
    
      // 初始化
      Class.prototype.init = function(){ 
        var that = this
        ,spans = ''
        ,options = that.config
        ,span = document.createElement("span"),
        spantext = $(span).text("获取全部数据").addClass('albtn');
        if(options.aldaBtn){ 
          $('body').append(spantext)
        }
        
        $.each(options.content,function(index,item){ 
          spans +='<span><em>'+item+'</em><button type="button" class="close">×</button></span>';
          // $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>');
        })
        options.elem.before(spans)
        that.events()
      }
    
      Class.prototype.render = function(){ 
        var that = this
        ,options = that.config
        options.elem = $(options.elem);
        that.enter()
      };
    
      // 回车生成标签
      Class.prototype.enter = function(){ 
        var that = this
        ,spans = ''
        ,options = that.config;
        options.elem.focus();
        options.elem.keypress(function(event){   
          var keynum = (event.keyCode ? event.keyCode : event.which);  
          if(keynum == '13'){   
            var $val = options.elem.val().trim();
            if(!$val) return false;
            if(options.content.indexOf($val) == -1){ 
              options.content.push($val)
              that.render()
              spans ='<span><em>'+$val+'</em><button type="button" class="close">×</button></span>';
              options.elem.before(spans)
            }
            options.done && typeof options.done === 'function' && options.done($val);
            options.elem.val('');
          }   
        })
      };
      
      //事件处理
      Class.prototype.events = function(){ 
         var that = this
        ,options = that.config;
        $('.albtn').on('click',function(){ 
          console.log(options.content)
        })
        $('#tags').on('click','.close',function(){ 
          var Thisremov = $(this).parent('span').remove(),
          ThisText = $(Thisremov).find('em').text();
          options.content.splice($.inArray(ThisText,options.content),1)
        })
      };
    
      //核心入口
      inputTags.render = function(options){ 
        var inst = new Class(options);
        inst.init();
        return thisinputTags.call(inst);
      };
      exports('inputTags',inputTags);
    }).link('css/inputTags.css')

更多参考layui第三方组件 [inputTags.js][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: /images/20220227/01816f1827a94facb41ea8cd85ebce6e.png
[20190326151956989.png]: /images/20220227/0a42709726c54e2c98cbe4d24370a8c8.png
[inputTags.js]: https://fly.layui.com/extend/inputTags/