在线考试系统菜单管理使用图标组件-蒲公英云

在线考试系统菜单管理使用图标组件

图标组件，这个内容一般用到的地方比较少，但是在权限系统里面并不陌生，在添加菜单的时候，就会用到图标组件，如果单纯是手动输入组件的名称。那肯定很悲催，所有在考试系统里面，这个选择图标的的功能，就必须得实现。那怎么实现呢，其实实现起来也非常的简单。

（1）引入对于的JS文件

<link rel="stylesheet" th:href="@{/static/js/plugins/icon/bootstrap-iconpicker.css}">
<script type="text/javascript"  th:src="@{/static/js/plugins/icon/bootstrap-iconpicker.js}">     </script>

（2）在页面中添加input输入框

<!-- 角色描述-->
   <div class="form-group">
        <label class="control-label" >菜单图标：</label>
        <input type="text" class="form-control" name="icon" id="a_icon">
    </div>

(3) 在页面进行初始化

$("#a_icon").iconpicker();

(4)最终效果
在这里插入图片描述
如果你想自定义图标，也非常的容易哟
在源码里面可以看到数组

var Iconpicker = function (element, options) { 
     this.$element = $(element);
     this.options  = $.extend({ }, Iconpicker.DEFAULTS, this.$element.data());
     this.options  = $.extend({ }, this.options, options);
   };
   Iconpicker.ICONSET = { 
       mdi : [
           'access-point',
           'access-point-network',
           'account',
           'account-alert',
           'account-box',
           'account-box-outline',
           'account-card-details',
           定义你的图标名称
           ]