Laravel-admin 區域性使用阿里圖示 Iconfont

愛餘生發表於2020-01-20
Laravel阿里

全域性使用：部落格：Laravel 之道特別篇 4： Laravel-admin 關於如何使用圖示神器 Iconfo...
區域性使用：
效果圖
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程式碼。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

愛餘生

相關文章