inputTags.js内容(从layui官方网站下载后修改的,主要是将限定id改为class(id在html中是唯一的，当需要在同个html页面多处使用时就不能满足需求))

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.configoptions.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'){  //options.elem获取当前输入框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('module/inputTags/inputTags.css')

引用的css路径根据个人放置情况修改

inputTags.css

em{font-style: normal;
}
.tags
{width: 406px;padding: 10px;color: #777;border: 1px solid #d5d5d5;background-color: #fff;
}.tags span{font-size: 12px;font-weight: normal;line-height: 16px;position: relative;display: inline-block;height: 16px;margin-right: 3px;margin-bottom: 3px;padding: 4px 22px 5px 9px;cursor: pointer;transition: all .2s ease 0s;vertical-align: baseline;white-space: nowrap;color: #fff;background-color: #009688;text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}
.tags .close{font-size: 12px;font-weight: bold;line-height: 20px;position: absolute;top: 0;right: 0;bottom: 0;float: none;width: 18px;padding: 0;cursor: pointer;text-align: center;opacity: 1;color: #fff;border: 0 none;background: transparent none repeat scroll 0 0;text-shadow: none;
}
.tags .close:hover{background: #ffb800;
}
.inputTags[type='text'],
.inputTags[type='text']:focus{line-height: 25px;display: inline;width: 150px;margin: 0;padding: 0 6px;border: 0 none;outline: 0 none;box-shadow: none;
}.albtn{line-height: 30px;display: block;width: 100px;height: 30px;margin: 0 auto;cursor: pointer;text-align: center;color: #fff;background: #ffb800;
}

扩展模块引用

//config的设置是全局的layui.config({base: 'module/'   //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名inputTags:'inputTags/inputTags'   //相对于上述 base 目录的子目录(js文件路径，引用文件时不需要加.js后缀)});

html中的基本使用(div的class需包含"tags"，input的class需包含"inputTags")

   <div class="layui-inline"><label class="layui-form-label">白名单_IP：</label><div class="layui-input-inline tags"><input type="text"  class="layui-input inputTags"  id="whiteListIP" placeholder="回车为一项输入"/></div></div><script>//js渲染layui.use(['inputTags'], function () {var inputTags = layui.inputTags;//动态获取数据渲染时内容是一个数组var whiteListIp =['192.168.0.1','192.168.1.1'];//elem为输入框元素inputTags.render({elem:'#whiteListIP',content:whiteListIp});})</script>

效果