layui tags.js 的使用

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

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

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

 6  　　tag.on('click(tags)', function (data) {
 7         var b = data.elem.context.attributes[2].value;
 8         var a = b.indexOf('layui-btn-primary');
 9         var rContent = this.innerText;
 8         if (a != -1) {
 9         //选中
10            data.elem.context.classList.remove("layui-btn-primary");
11            if (rContent == '其他原因') {
12                that.otherReason(a);
13            } else {
14                 reasonContent.push(rContent);
15            }
16         } else {
17         //不选中
18            data.elem.context.classList.add("layui-btn-primary");
19            reasonContent.remove(rContent);
20            if (rContent == '其他原因') {
21            that.otherReason(a);
22         }
23      }
24  )}

 1 //其他原因
 2     var otherReason = function (data) {
 3         if (data != -1) {
 4             //选中
 5             let newItem = document.createElement('input');
 6             newItem.className = 'layui-input';
 7             newItem.id = 'otherInput';
 8             newItem.name = 'otherInput';
 9             newItem.setAttribute("placeholder", "请输入其他原因");
10             newItem.setAttribute("lay-verify", "required");
11             // newItem.innerHTML = html;
12             $('#content').append(newItem);
13         } else {
14             //不选中
15             $('#otherInput').remove();
16         }
17     };