标签文档 - layui.tag

模块加载名称: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 取消删除操作。
});