tag标签文档

元素功能的开启只需要加载Tag模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tag元素块，那么Tag模块会自动赋予她该有的功能。

<div class="layui-btn-container tag" >
  <button lay-id="11" type="button" class="tag-item">网站设置</button>
  <button lay-id="22" type="button" class="tag-item">用户管理</button>
  <button lay-id="33" type="button" class="tag-item">权限分配</button>
  <button lay-id="44" type="button" class="tag-item">商品管理</button>
  <button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>

前提是你要加载tag模块

 //config的设置是全局的
  layui.config({
    base: './modules/' //假设这是你存放拓展模块的根目录
  }).extend({ //设定模块别名
    tag: 'tag' //如果 tag.js 是在根目录，也可以不用设定别名
  }).use('tag', function(){
  var tag = layui.tag;

  //一些事件监听
  tag.on('click(demo)', function(data){
      console.log('点击');
      console.log(this); //当前Tag标题所在的原始DOM元素
      console.log(data.index); //得到当前Tag的所在下标
      console.log(data.elem); //得到当前的Tag大容器
    });
});

我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：

<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">…</div>

tag模块支持的元素如下表：

属性名	可选值	说明
lay-filter	任意字符	事件过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较类似的。
lay-allowClose	true	是否允许标签关闭。默认不允许，即不用设置该属性
lay-newTag	true	是否允许标签新增。默认不允许，即不用设置该属性

基础方法允许你在外部主动对元素发起一起操作，目前tag模块提供的方法如下：

方法名	描述
var tag = layui.tag;	tag模块的实例返回的tag变量为该实例的对象，携带一些用于元素操作的基础方法
tag.on(filter, callback);	用于元素的一些事件监听
tag.add(filter, options);	用于新增一个Tag标签参数filter：tag标签的 lay-filter="value" 过滤器的值（value）参数options：设定可选值的对象，目前支持的选项如下述示例： tag.add('demo', { text: '标签的内容' ,id: '标签的lay-id属性值' });
tag.delete(filter, layid);	用于删除指定的Tag标签参数filter：tag元素的 lay-filter="value" 过滤器的值（value）参数layid：标签的属性 lay-id 的值 tag.delete('demo', 'xxx'); //删除 lay-id="xxx" 的这一标签

跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时tag的相关功能将不会对其有效，你必须手工执行 tag.init(filter, {}) 方法即可。也可以用 tag.render(filter, {}}); 方法替代

第一个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。

【HTML】
<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
  …
</div>
【JavaScript】
//比如当你动态插入了标签，这时你需要重新去对它进行渲染
$('[lay-filter="test"]').append('<button lay-id="111" type="button" class="tag-item">新增标签111</button>');
tag.render("test"); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增
//……

第二个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：

参数（options）值	描述
likeHref	css 样式所在路径
skin	样式
tagText	标签新增提示文本

tag.init(); //更新全部
tag.render("test",{
      skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
      tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
    }); //重新对标签进行渲染
//……

语法：tag.on('event(过滤器值)', callback);

目前tag模块所支持的事件如下表：

event	描述
click	监听Tag标签点击事件
add	监听Tag标签新增事件
delete	监听Tag标签删除事件

默认情况下，事件所监听的是全部的元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：<div class="layui-btn-container tag" lay-filter="test">

tag.on('click(test)', function(data){
  console.log(data);
});

Tag标签点击时触发，回调函数返回一个object参数，携带两个成员：

tag.on('click(filter)', function(data){
      console.log(this); //当前Tag标签所在的原始DOM元素
      console.log(data.index); //得到当前Tag的所在下标
      console.log(data.elem); //得到当前的Tag大容器
});

Tag标签新增时触发，回调函数返回一个object参数，携带三个成员：

tag.on('add(filter)', function(data){
      console.log(this); //当前Tag标签所在的原始DOM元素
      console.log(data.index); //得到当前Tag的所在下标
      console.log(data.elem); //得到当前的Tag大容器
      console.log(data.othis); //得到新增的DOM对象
      //return false; //返回false 取消新增操作。
});

Tag标签删除时触发，回调函数返回一个object参数，携带两个成员：

tag.on('delete(filter)', function(data){
      console.log(this); //当前Tag标签所在的原始DOM元素
      console.log(data.index); //得到当前Tag的所在下标
      console.log(data.elem); //得到当前的Tag大容器
      //return false; //返回false 取消删除操作。
});

外置模块

标签文档 - layui.tag

外置模块

 标签文档 - layui.tag

标签文档 - layui.tag