Vue Element использует подробное руководство по значкам (сторонняя сторона)

Библиотека значков, которая поставляется с element-ui, все еще недостаточно полная, и по-прежнему необходимо вводить сторонние значки. У меня всегда были проблемы при ее использовании. Я ссылался на некоторые учебники и подробно записывал их.

Для нас первым выбором, конечно же, является библиотека иконок Али.

Руководство:

1. Откройте иконку Али, зарегистрируйтесь > логин > управление иконками > мой проект

Icon Management> Мой проект, нажмите

Новый проект

Не стесняйтесь писать название проекта. Префикс Обратите внимание, имя не совпадает с именем значка, поставляемого с element-ui (префикс: el-icon).

После настройки нажмите New

Обратите внимание на префикс. После настройки нажмите New

Теперь давайте вернемся на домашнюю страницу значка Али и щелкнем в нужной библиотеке значков.Поскольку пакетного импорта в корзину нет, обычно необходимо переходить к одному за другим, что занимает слишком много времени, поэтому, пожалуйста. введите следующий код в консоли для пакетного импорта


                                                    

                                                        
var icons = document.querySelectorAll('.icon-gouwuche1');

                                                        
 var auto_click = function(i) { 
                                                            if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };

                                                        
auto_click(0);

Затем нажмите Enter, он добавит все иконки этой галереи в корзину.

Нажмите на корзину на странице

Нажмите на значок корзины в правой части страницы.

Добавьте значки в только что созданный проект.

Добавить к

Установите fontClass, затем загрузите на локальный

Скачать на локальную, разархивировать

После распаковки вы получите эти файлы, откройте файл, обведенный на картинке

Добавьте следующий код, обратите внимание: el-icon-therth — это префикс значка, который вы установили ранее, а перед вторым el-icon-therth стоит пробел.


                                                

                                                    
[class^="el-icon-third"], [class*=" el-icon-third"]
                                                        /*这里有空格*/
                                                    

                                                    
{ font-family: "iconfont" !important;

                                                    
font-size: 16px;

                                                    
font-style: normal;

                                                    
-webkit-font-smoothing: antialiased;

                                                    
-moz-osx-font-smoothing: grayscale; }

Данные в зеленом поле должны соответствовать

2. После настройки выше, откройте проект vue, я создал папку значков в src-assets и скопировал все файлы поверх

Внедрить css в main.js

не забудь принести

затем перезапуститеnpm run devодин раз

3. Откройте проект в значке Ali и скопируйте нужный код значка.

Код значка:el-icon-ump-qianniudaidise

Use, два ссылочных метода, такие же, как метод use, который поставляется с элементом

Конечный эффект:

Суммировать

Вышеизложенное представляет собой подробное объяснение учебника по значкам Vue Element, представленного редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку веб-сайта Scripting House!

Вам также может быть интересна статья: