layui tags.js 的使用

<div class="layui-btn-container tag" lay-filter="tags">
   <script type="text/html" template lay-url="/admin/exam/getExamReasonList" lay-done="layui.data.done(d);">
       {{# layui.each(layui.data('reason').reasoncontent,function(index,item){ }}
           <button lay-id="{{index}}" type="button" class="tag-item">{{item}}</button>
       {{# }) }}
   </script>
</div>

 1 var that = this;
 2 var reasonContent = [];
 3 layui.use(['tag'], function () {

    var tag = layui.tag;
    tag.render("tags");

 　　tag.on('click(tags)', function (data) {
        var b = data.elem.context.attributes[2].value;
        var a = b.indexOf('layui-btn-primary');
        var rContent = this.innerText;
        if (a != -1) {
        //选中
           data.elem.context.classList.remove("layui-btn-primary");
           if (rContent == '其他原因') {
               that.otherReason(a);
           } else {
                reasonContent.push(rContent);
           }
        } else {
        //不选中
           data.elem.context.classList.add("layui-btn-primary");
           reasonContent.remove(rContent);
           if (rContent == '其他原因') {
           that.otherReason(a);
        }
     }
 )}

//其他原因
    var otherReason = function (data) {
        if (data != -1) {
            //选中
            let newItem = document.createElement('input');
            newItem.className = 'layui-input';
            newItem.id = 'otherInput';
            newItem.name = 'otherInput';
            newItem.setAttribute("placeholder", "请输入其他原因");
            newItem.setAttribute("lay-verify", "required");
            // newItem.innerHTML = html;
            $('#content').append(newItem);
        } else {
            //不选中
            $('#otherInput').remove();
        }
    };