Tag 标签

实用方式

Tags标签常用在兴趣、分类、条件等多选情况中。使用ax-tag表示内容标签,如果需要以容器形式放置标签,请使用ax-tags包裹。

单个Tag标签
多个Tag标签 以ax-tags包裹 风格统一 参数统一
                                    <span class="ax-tag">单个Tag标签</span>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags">
                                        <span class="ax-tag">多个Tag标签</span>
                                        <span class="ax-tag">以ax-tags包裹</span>
                                        <span class="ax-tag">风格统一</span>
                                        <span class="ax-tag">参数统一</span>
                                    </div>
                         

主题颜色

使用ax-tag表示内容标签。本框架一共定义了7种颜色标签,分别是primary、success、danger、warning、info、question、text、brief和ignore,使用theme属性即可定义该Tag标签主题颜色,例如theme="primary"。标签可以用span也可以使用其他标签,加上默认白色一共可用8种主题颜色。详细说明和举例如下:

                                <span class="ax-tag">默认</span>
                                <span class="ax-tag" theme="primary">中国</span>
                                <span class="ax-tag" theme="success">操作成功!</span>
                                <span class="ax-tag" theme="error">很危险!</span>
                                <a href="###" class="ax-tag" theme="warning">提示注意!</a>
                                <a href="###" class="ax-tag" theme="question">这是一个疑问!</a>
                                <a href="###" class="ax-tag" theme="info">名词解释</a>
                                <a href="###" class="ax-tag" theme="text">正文标签</a>
                                <a href="###" class="ax-tag" theme="brief">灰色标签</a>
                                <a href="###" class="ax-tag" theme="ignore">浅灰色文字提示</a>
                     

如果使用ax-tags标签包裹,那么可通过theme属性统一设定风格,例如theme="prmary",同单个Tag一样一共可以使用8种主题风格。

中国 新加坡 澳大利亚 俄罗斯
                            <div class="ax-tags" theme="primary">
                                <span class="ax-tag">中国</span>
                                <span class="ax-tag">新加坡</span>
                                <span class="ax-tag">澳大利亚</span>
                                <span class="ax-tag">俄罗斯</span>
                            </div>
                         

无边标签

ax-tag追加borderless属性可以实现无边Tag;对ax-tags追加borderless属性可统一设定无边Tag。

唐朝 宋朝
元朝 明朝 清朝
                                    <span class="ax-tag" theme="primary" borderless>唐朝</span>
                                    <a href="###" class="ax-tag" theme="light" borderless>宋朝</a>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags" borderless theme="warning">
                                        <span class="ax-tag">元朝</span>
                                        <span class="ax-tag">明朝</span>
                                        <span class="ax-tag">清朝</span>
                                    </div>
                         

圆角标签

ax-tag追加corner="round"属性可以实现圆角Tag;对ax-tags追加corner="round"属性可统一设定圆角Tag。

唐朝 宋朝
元朝 明朝 清朝
                                    <span class="ax-tag" theme="primary" corner="round">唐朝</span>
                                    <a href="###" class="ax-tag" theme="light" corner="round">宋朝</a>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags" corner="round">
                                        <span class="ax-tag">元朝</span>
                                        <span class="ax-tag">明朝</span>
                                        <span class="ax-tag">清朝</span>
                                    </div>
                         

方角标签

ax-tag追加corner="square"属性可以实现直角Tag;对ax-tags追加corner="square"属性可统一设定圆角Tag。

唐朝 宋朝
元朝 明朝 清朝
                                    <span class="ax-tag" theme="primary" corner="square">唐朝</span>
                                    <a href="###" class="ax-tag" theme="light" corner="square">宋朝</a>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags" corner="square">
                                        <span class="ax-tag">元朝</span>
                                        <span class="ax-tag">明朝</span>
                                        <span class="ax-tag">清朝</span>
                                    </div>
                         

关闭按钮

如果需要使用关闭按钮,在ax-tag标签尾部加入<i remove></i>即可

中国 新加坡 澳大利亚
                                    <span class="ax-tag">中国<i remove></i></span>
                                    <span class="ax-tag" theme="primary">新加坡<i remove></i></span>
                                    <a href="###" class="ax-tag" theme="error">澳大利亚<i remove></i></a>
                         

在ax-tag尾部加入<s remove></s>表示另外一种关闭方式。

中国 新加坡 澳大利亚
                                    <span class="ax-tag">中国<s remove></s></span>
                                    <span class="ax-gutter"></span>
                                    <span class="ax-tag" theme="primary">新加坡<s remove></s></span>
                                    <span class="ax-gutter"></span>
                                    <a href="###" class="ax-tag" theme="light">澳大利亚<s remove></s></a>
                         

紧凑尺寸

为了能与input或textarea配合使用,设计了紧凑尺寸Tag,给ax-tag标签追加compact属性即可;如果是ax-tags浮层包裹则对浮层追加compact属性。

由于紧凑型标签大大缩小了间隙,所以已经不适合使用s标签做关闭按钮,只可使用i做标签按钮。

中国 新加坡 澳大利亚
印度 土耳其 南非
                                <span class="ax-tag" compact>中国<i remove></i></span>
                                <span class="ax-tag ax-primary" compact>新加坡<i remove></i></span>
                                <a href="###" class="ax-tag" theme="error" compact>澳大利亚<i remove></i></a>
                                <div class="ax-break"></div>
                                <div class="ax-tags" compact>
                                    <span class="ax-tag">印度<i remove></i></span>
                                    <span class="ax-tag">土耳其<i remove></i></span>
                                    <span class="ax-tag">南非<i remove></i></span>
                                </div>
                      

纯文本风格

为了能与用户自定义的布局合理搭配,可使用无边框和无边距的纯文本风格。使用对插件使用text:true参数或对ax-tags节点追加text属性即可。

澳大利亚 巴西 新加坡
土耳其 俄罗斯 英国
印度 沙特阿拉伯 南非
                            <div class="ax-tags" text>
                                <span class="ax-tag">澳大利亚<i remove></i></span>
                                <span class="ax-tag">巴西<i remove></i></span>
                                <span class="ax-tag">新加坡<i remove></i></span>
                            </div>
                            <div class="ax-break"></div>
                            <div class="ax-tags" text>
                                <span class="ax-tag">土耳其<s remove></s></span>
                                <span class="ax-tag">俄罗斯<s remove></s></span>
                                <span class="ax-tag">英国<s remove></s></span>
                            </div>
                            <div class="ax-break"></div>
                            <div class="ax-tags" compact text>
                                <span class="ax-tag">印度<i remove></i></span>
                                <span class="ax-tag">沙特阿拉伯<i remove></i></span>
                                <span class="ax-tag">南非<i remove></i></span>
                            </div>
                      

插件使用方法

如果需要对批量创建Tags,并对Tags进行添加和删除操作,此时则需要以插件的形式创建实例。插件运行方式有两种:

  • ax*属性:对ax-tags标签使用axTags属性并填写content参数即可按默认参数运行插件。
  • js实例:通过new axTags('#ID',{content:''})方式创建实例运行。
  •                                             <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚'"></div>
                                                <div class="ax-break"></div>
                                                <div id="jsTags"></div>
                                            
  •                                             new axTags('#jsTags',{
                                                    content:'菲律宾,丹麦,波兰'
                                                });
                                            

数据源

参数content接收数据源,支持四种数据格式,这些数据格式通过内置函数转换后会成为标准的数组数据格式,通过内部变量this.content可查看。

  • 一个字符串,也就是Tag的内容,如果用英文逗号隔开则会创建多个Tag(参数separator定义了分隔符)
  • 一个对象,格式是{value:'',theme:''},其中value也就是Tag的内容是必填的,theme选填
  • 字符串数组,格式是['','',''],每一项字符串都是Tag的内容
  • 对象数组,格式是[{value:'',theme:''},{}],每一项都包含value和theme属性,当然theme是选填
                                <div class="ax-tags" axTags="content:'中国'"></div>
                                <div class="ax-break"></div>
                                <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚'"></div>
                                <div class="ax-break"></div>
                                <div class="ax-tags" axTags="content:{value:'南非',theme:'warning'}"></div>
                                <div class="ax-break"></div>
                                <div class="ax-tags" axTags="content:['英国','瑞士','俄罗斯']"></div>
                                <div class="ax-break"></div>
                                <div class="ax-tags" axTags="content:[{value:'印度',theme:''},{value:'巴基斯坦',theme:'info'}]"></div>
                            

主题颜色

使用主题颜色的方式有两种:

  • 1、使用theme参数,支持以上8中主题颜色
  • 2、对content参数填入对象数组,单独对每个Tag进行主题颜色定义
                                <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',theme:'primary"></div>
                                <div class="ax-break"></div>
                                <div class="ax-tags" axTags="content:[{value:'德国',theme:'danger'},{value:'意大利',theme:'warning'}]"></div>
                                    

风格定制

除了使用theme改变颜色之外,还可以通过以下参数改变风格:

  • borderless:设定标签是否为无边框状态,默认false,可设为true去掉边框
  • compact:设定标签是否为紧凑状态,默认false,可设为true让标签之间紧凑排列以便于与input和textarea配合使用
  • corner:设定标签边缘形态,默认为空即3px的小圆角;设为round则为大圆角;设为square则为方角
                                    <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',theme:'primary',borderless:true"></div>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',compact:true"></div>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',corner:'round'"></div>
                                    <div class="ax-break"></div>
                                    <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',corner:'square'"></div>
                                    

变量和操作方法

本插件有系列内部成员变量和内部操作方法,用户根据这些变量和方法可以自由操作实例,据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。


内部成员变量如下:

  • this.destroyed:是否销毁状态,true或false
  • this.targetDom:Tag父节点,也即ax-tags节点
  • this.content:Tags对象数组,包含了id、value、theme、dom等属性
  • this.maxIndex:最大索引值,新增Tag的id属性值将以此为基数
  • this.contentProxy:this.content的代理,返回{proxy:'',instance:''}
    • proxy:this.content的代理对象,需要联动监听则操作该属性,否则直接操作this.content即可
    • instance:axObserve的代理实例,可使用on方法进行监听,详细用法请点击这里

内部操作方法如下:

  • this.update(setting, callback):更新所有参数,支持两个参数:
    • setting:必填项,对象类型,用户自定义的参数
    • callback:选填项,回调函数,无参数:
  • this.add(obj, callback):增加Tags,支持两个参数:
    • obj:必填项,支持4种格式,格式与插件参数content一致
    • callback:选填项,回调函数,支持一个参数即新增项:
  • this.remove(obj, callback):删除Tags,支持两个参数:
    • obj:必填项,支持多种格式,详细说明如下:
      • 一个字符串:即查找Tag的内容
      • 一个数字:即查找Tag的id索引
      • 一个DOM节点:即查找Tag的DOM节点
      • 一个对象,对象中有id或value或dom属性:即通过这些属性依次查找,直到找到第一个为止
      • 数组,每一项可以是以上四种类型,以进行批量删除
    • callback:选填项,回调函数,支持一个参数即删除项:
  • this.clear(callback):清除所有Tags,支持一个参数即callback回调,回调函数无参数。
  • this.destroy(callback):销毁实例,支持回调函数,回调无参数:

全局操作方法如下:

  • axInstance:每个new实例都会自动加入到全局实例合集当中,通过该方法可获取实例,继而使用实例的内部变量和内部操作方法。关于axInstance使用方法请点击这里
在回调函数中this均指向实例本身,所以在回调函数中通常可使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数

删除Tag

删除标签的方法有三种:

  • 1、使用removable:true,即显示标签删除按钮,点击删除按钮可删除该标签。
  • 2、使用this.remove()方法删除指定的Tag,可批量删除;参数说明如上。
  • 3、使用this.clear()方法删除所有Tags;参数说明如上。
  •                                     <div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',removable:true"></div>
                                        <div class="ax-break"></div>
                                        <div class="ax-tags" id="removeIns"></div>
                                        <div class="ax-break"></div>
                                        <a href="###" class="ax-btn ax-primary" id="removeOneBtn">删除“丹麦”</a>
                                        <a href="###" class="ax-btn ax-primary" id="removeMoreBtn">删除“意大利,巴西,俄罗斯”</a>
                                        <a href="###" class="ax-btn ax-primary" id="clearBtn">删除全部</a>
                                        <a href="###" class="ax-btn ax-primary" id="removeViewBtn">查看剩余Tags</a>
                                            
  •                                             let removeOneBtn = document.querySelector('#removeOneBtn'),
                                                    removeMoreBtn = document.querySelector('#removeMoreBtn'),
                                                    clearBtn = document.querySelector('#clearBtn'),
                                                    removeViewBtn = document.querySelector('#removeViewBtn'),
                                                    removeIns = new axTags('#removeIns', {
                                                        content: '菲律宾,丹麦,波兰,荷兰,意大利,巴西,俄罗斯,印度',
                                                        removable: true,
                                                    });
                                                removeOneBtn.onclick = () => {
                                                    removeIns.remove('丹麦', () => {
                                                        console.log('删除了“丹麦”')
                                                    });
                                                }
                                                removeMoreBtn.onclick = () => {
                                                    removeIns.remove('意大利,巴西,俄罗斯', () => {
                                                        console.log('删除了“意大利,巴西,俄罗斯”')
                                                    });
                                                }
                                                clearBtn.onclick = () => {
                                                    removeIns.clear(() => {
                                                        console.log('全部删除了')
                                                    });
                                                }
                                                removeViewBtn.onclick = () => {
                                                    console.log(removeIns.content);
                                                }
                                            

新增Tag

通过this.add()方法新增Tags节点,可添加单个和多个Tags;参数说明如上。

  •                                             <div class="ax-tags" id="addIns"></div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-primary" id="addOneBtn">增加“丹麦”</a>
                                                <a href="###" class="ax-btn ax-primary" id="addMoreBtn">增加“意大利,巴西,俄罗斯”</a>
                                                <a href="###" class="ax-btn ax-primary" id="addViewBtn">查看所有Tags</a>
                                            
  •                                             let addOneBtn = document.querySelector('#addOneBtn'),
                                                    addMoreBtn = document.querySelector('#addMoreBtn'),
                                                    clearBtn = document.querySelector('#clearBtn'),
                                                    addViewBtn = document.querySelector('#addViewBtn'),
                                                    addIns = new axTags('#addIns', {
                                                        content: '菲律宾,丹麦,波兰,荷兰,意大利,巴西,俄罗斯,印度',
                                                        removable: true,
                                                    });
                                                addOneBtn.onclick = () => {
                                                    addIns.add('丹麦', () => {
                                                        console.log('删除了“丹麦”')
                                                    });
                                                }
                                                addMoreBtn.onclick = () => {
                                                    addIns.add('意大利,巴西,俄罗斯', () => {
                                                        console.log('删除了“意大利,巴西,俄罗斯”')
                                                    });
                                                }
                                                clearBtn.onclick = () => {
                                                    addIns.clear(() => {
                                                        console.log('全部删除了')
                                                    });
                                                }
                                                addViewBtn.onclick = () => {
                                                    console.log(addIns.content);
                                                }
                                            

行内编辑

插件默认只能通过add和remove方法进行添加和删除操作,将设置参数eidt.enable:true开启行内编辑,使用表现如下:

  • 1、输入内容后,按下回车键可新增Tag;如果输入的字符带有分隔符比如英文逗号则会创建多个Tag,如果不带分隔符则会创建一个Tag
  • 2、当表单域内容为空,按下删除键则会选中最后一个Tag,此时最后一个Tag会高亮显示
  • 3、当表单域内容为空,当Tag已经处于选中状态,此时如果再按一下删除键则会删除最后一个Tag,按下其他任意按键会取消选中状态
  •                                             <div class="ax-tags" id="editIns"></div>
                                            
  •                                             new axTags('#editIns', {
                                                    content: '菲律宾,波兰,荷兰,印度',
                                                    removable: true,
                                                    edit:{enable:true}
                                                });
                                            

使用表单域

如果不需要行内编辑方式,而需要通过外部的input进行编辑,那么需要设置两个参数:

  • edit,设为true开启可编辑功能
  • input,input或textarea表单域节点,可填#id、.className或节点。表现效果如行内编辑一致
  •                                             <div class="ax-tags" id="inputIns"></div>
                                                <div class="ax-break"></div>
                                                <input type="text" placeholder="输入字符串..." id="inputBtn" />
                                            
  •                                             new axTags('#inputIns', {
                                                    content: '菲律宾,波兰,荷兰,印度',
                                                    removable: true,
                                                    edit:{enable:true,input: '#inputBtn'}
                                                });
                                            

禁止添加相同的

插件默认可以添加任何文本的tag,但是有些情况需要禁止添加相同label/value的tag,可设置参数unique为true禁止添加相同的tag。

  •                                             <div class="ax-tags" id="uniqueIns"></div>
                                            
  •                                             new axTags('#uniqueIns', {
                                                    content: '菲律宾,波兰,荷兰,印度',
                                                    edit: { enable: true },
                                                    removable: true,
                                                    unique:true,
                                                });
                                            

销毁实例

通过使用this.destroy(callback)方法销毁实例,支持回调函数,回调无参数;销毁后可通过init初始化重新启用。

销毁后将不能再使用删除功能以及add、remove、clear和update方法。

  •                                     <div id="insDestroy"></div>
                                        <div class="ax-break"></div>
                                        <a href="###" class="ax-btn ax-primary" id="btnDestroy">销毁</a>
                                        <a href="###" class="ax-btn ax-primary" id="btnInit">初始化</a>
                                            
  •                                             let insDestroy = new axTags('#insDestroy', {
                                                    content: '菲律宾,波兰,荷兰,印度',
                                                    removable: true,
                                                }),
                                                    btnDestroy = document.querySelector('#btnDestroy'),
                                                    btnInit = document.querySelector('#btnInit');
                                                btnDestroy.onclick = function () {
                                                    insDestroy.destroy(function () {
                                                        alert('销毁了实例!')
                                                    });
                                                }
                                                btnInit.onclick = function () {
                                                    insDestroy.init();
                                                }
                                            

在创建实例的时候会自动添加到全局实例合集当中;如果填写了实例名insName,那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里

  •                                             <div axTags='insName:"big",content:"中国,新加坡,澳大利亚",removable:true'></div>
                                                <div class="ax-break"></div>
                                                <div axTags='insName:"small",content:"俄罗斯,印度,美国",removable:true'></div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-primary" id="destroyBig">销毁big实例</a>
                                                <a href="###" class="ax-btn ax-primary" id="destroySmall">销毁small实例</a>
                                                <a href="###" class="ax-btn ax-primary" id="viewAll">查看实例合集</a>
                                                <a href="###" class="ax-btn ax-primary" id="initAll">重新启用</a>
                                            
  •                                             let destroyBig = document.querySelector('#destroyBig'),
                                                    destroySmall = document.querySelector('#destroySmall'),
                                                    viewAll = document.querySelector('#viewAll'),
                                                    initAll = document.querySelector('#initAll');
                                                destroyBig.onclick = function () {
                                                    axInstance.destroy('big');
                                                }
                                                destroySmall.onclick = function () {
                                                    axInstance.destroy('small');
                                                }
                                                viewAll.onclick = function () {
                                                    //只查看有name的实例合集
                                                    console.log(axInstance.data.filter(i => i.name && i.type === 'tags'));
                                                }
                                                initAll.onclick = function () {
                                                    //重新初始化以启用
                                                    let items = axInstance.data.filter(i => (i.name === 'big' || i.name === 'small') && i.type === 'tags');
                                                    items.forEach(i => {
                                                        i.instance.init();
                                                    });
                                                }
                                            

监听事件

本插件有若干监听方法,以on为关键字,参数中监听格式为:new instance({onShow:function(){}});实例后监听格式是:instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下:

  • onInit 初始化后执行,无参数
  • onAdd/add 打开窗口前执行,支持一个参数,即新增项
  • onRemove/remove 窗口隐藏前执行,支持两个参数,即删除项(数组)和删除项对应的索引(数组)
  • onUpdate/update 参数更新前执行,无参数
  • onClear/clear 全部清除前执行,无参数
  • onDestroy/destroy 销毁后执行,无参数

演示实例显示结果使用了console.log方法,请按下F12按键打开开发者工具中的“控制台”查看监听效果。

  •                                             <div id="insOn"></div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-primary" id="addOn">增加</a>
                                                <a href="###" class="ax-btn ax-primary" id="removeOn">删除</a>
                                                <a href="###" class="ax-btn ax-primary" id="settingOn">更新参数</a>
                                                <a href="###" class="ax-btn ax-primary" id="clearOn">全部删除</a>
                                                <a href="###" class="ax-btn ax-primary" id="destroyOn">销毁</a>
                                                <a href="###" class="ax-btn ax-primary" id="initOn">初始化</a>
                                            
  •                                             let insOn = new axTags('#insOn', {
                                                    content: '菲律宾,波兰,荷兰,印度',
                                                    removable: true,
                                                    onInit: () => {
                                                        console.log('初始化了!')
                                                    }
                                                }),
                                                    addOn = document.querySelector('#addOn'),
                                                    removeOn = document.querySelector('#removeOn'),
                                                    settingOn = document.querySelector('#settingOn'),
                                                    clearOn = document.querySelector('#clearOn'),
                                                    destroyOn = document.querySelector('#destroyOn'),
                                                    initOn = document.querySelector('#initOn');
                                                addOn.onclick = () => {
                                                    insOn.add('中国,马来西亚');
                                                }
                                                removeOn.onclick = () => {
                                                    insOn.remove('波兰,印度');
                                                }
                                                clearOn.onclick = () => {
                                                    insOn.clear();
                                                }
                                                settingOn.onclick = () => {
                                                    insOn.update({
                                                        content: '意大利,巴西,俄罗斯,印度',
                                                        theme: 'danger',
                                                    });
                                                }
                                                destroyOn.onclick = () => {
                                                    insOn.destroy();
                                                }
                                                initOn.onclick = () => {
                                                    insOn.init();
                                                }
                                                insOn.on('add', () => {
                                                    console.log('增加了!');
                                                }).on('remove', () => {
                                                    console.log('删除了!');
                                                }).on('clear', () => {
                                                    console.log('全部清空了!');
                                                }).on('update', () => {
                                                    console.log('参数更新了!');
                                                }).on('destroy', () => {
                                                    console.log('销毁了!')
                                                });
                                            

添加和删除劫持

参数onBeforeAdd是添加前监听函数,支持一个参数即当前添加的label文本;通过onBeforeAdd参数可劫持input的add事件,使用该参数需要使用add方法手动添加tag。

参数onBeforeRemove是删除前监听函数,支持一个参数即当前要删除的项;通过onBeforeRemove参数可劫持input的remove事件,使用该参数需要使用remove方法手动删除tag。

  •                                             <div id="insStop"></div>
                                            
  •                                             new axTags('#insStop', {
                                                    content: '菲律宾,波兰,荷兰,印度',
                                                    removable: true,
                                                    edit: { enable: true },
                                                    onBeforeAdd: function (data) {
                                                        console.log('当前数据:', data);
                                                        new axDialog({
                                                            content: '确定新增tag么?',
                                                            confirm: {
                                                                callback: () => {
                                                                    this.add(data);
                                                                }
                                                            }
                                                        }).show();
                                                    },
                                                    onBeforeRemove: function (data) {
                                                        console.log('当前数据:', data);
                                                        new axDialog({
                                                            content: '确定删除tag么?',
                                                            confirm: {
                                                                callback: () => {
                                                                    this.remove(data);
                                                                }
                                                            }
                                                        }).show();
                                                    }
                                                });
                                            

参数选项

            insName: '',//实例名称,对axInstance有用
            content: '',//数据源,支持四种格式,包括:一个字符串/对象,一个字符串数组/一个对象数组
            theme: '',//主题风格,可填primary、error、success、danger、warning、question、info、text、brief和ignore,默认为空
            borderless: false,//是否显示边框,默认false显示,可选择true不显示
            compact: false,//是否使用紧凑风格,默认false不使用,可选择true使用
            text: false,//是否使用纯文本风格,默认false不使用,可选择true使用
            corner: '',//设置单个Tag的圆角,可填round则是圆角,square则是方角,默认为空即是radiu:3px的小圆角
            className: '',//其他样式类,多个用空格分开
            removeNode: 'i',//关闭按钮的节点名,默认是i,可选择s
            removable: false,//是否出现关闭按钮并可关闭,默认false不可关闭,可选择true可关闭
            separator: ',',//字符串数据分隔符,默认为英文逗号
            unique: false,//是否要求添加同唯一值的tag,默认fase不要求,可选择true要求
            emptyShow: true,//是否显示空状态,默认true显示,可选择false不显示
            emptyTip: '还没有创建标签!',//空提示
            edit: {
                enable: false,//是否显示行内input,默认false不显示,可选择true显示
                addable: true,//是否可通过回车新增tag,默认true允许,可选择false不允许
                deletable: true,//是否可通过del键删除tag,默认true允许,可选择false不允许
                input: '',//默认行内编辑,如果需要外部编辑则需要设置该参数,可以是#id、.className、[name]或输入表单节点,通常是input或textarea
                placeholder: '输入关键字...',//input的提示文字
            },
            breakpoints: {},//使用断点以适配终端,详情查看ax-utils-other.php页面
            onInit: '',//回调函数,初始化后执行,无参数
            onBeforeAdd: '',//使用input添加之前执行,支持一个参数即添加label文本值
            onAdd: '',//回调函数,添加后执行,支持一个参数即增加的对象
            onBeforeRemove: '',//使用input删除之前执行,支持一个参数即删除的项
            onRemove: '',//回调函数,删除后执行,支持一个参数即删除的对象
            onUpdate: '',//回调函数,参数更新后执行,无参数
            onUClear: '',//回调函数,清零新后执行,无参数
            onDestroy: '',//回调函数,销毁后执行,无参数
                            
以axMenu插件为例,如果在元素上通过ax*使用属性,需要使用类似json的写法,属性不需要使用引号,如果值是字符串需要使用引号包裹,如果值是数字、布尔值、null或undefined不需要引号;比如要设置active,那么在元素的ax*属性中应该这样书写:axMenu="active:2"