laravel-admin局部使用阿里图标Iconfont
2020-01-17 本文已影响0人
杏花_我不想活了
全局使用：https://learnku.com/articles/20437
局部使用：
效果图
image.png
表单代码如下
$form->html(view('admin.form.aliIcon', ['icons' => $this->icons()]), '图标');
private function icons()
{
$css = file_get_contents('http://at.alicdn.com/t/font_828026_xxxxxxxxx.css');
preg_match_all('/icon.+:/', $css, $matches);// eg: 73 => "icon-car:"
$icons = [];
$matches = $matches[0];
foreach ($matches as $match){
$icon = substr($match, 0, strlen($match) - 1);
$icons[] = [
'id' => $icon,
'text' => $icon
];
}
return $icons;
}
html代码如下
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<style>
.icon_li {
display: inline-block;
width: 15px;
height: 15px
}
</style>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_828026_xxxxxxx.css">
</head>
<body>
<div>
<input id="icon" name="icon" value="" class="form-control icon" placeholder="图标选择" type="text">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">图标选择
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@foreach ($icons as $icon)
<li value="{{$icon['id']}}" class="icon_li" role="presentation">
<i class="iconfont {{$icon['text']}}" style="font-size: 12px;"></i>
</li>
@endforeach
</ul>
</div>
{{--<select>
@foreach ($icons as $icon)
<option value ={{$icon['id']}}>
<i class="iconfont {{$icon['text']}}" style="font-size: 12px;"></i>
</option>
@endforeach
</select>--}}
</div>
<script src="http://at.alicdn.com/t/font_828026_xxxxxx.js"></script>
<script>
$('.icon_li').click(function () {
$('#icon').val($(this).attr('value'))
})
</script>
</body>
</html>
总结：前端水平垃圾，出此下策。我用php代码正则匹配阿里图标css链接里的图标class名，生成数组。通过laravel-admin自带的html组件来渲染出所有的图标，html-select标签不支持显示icon，所以这里选择bootstrap的下拉菜单。其他的都是简单的php，html代码。
