использовать версию материала-значков Vuetify внутри цели веб-компонента vue.js - PullRequest
Новая
       32

использовать версию материала-значков Vuetify внутри цели веб-компонента vue.js

0 голосов
/ 01 июня 2019

Как правильно включить стили значков материала Vuetify внутри веб-компонента, чтобы он был доступен в тени без каких-либо внешних ссылок в родительском (поскольку веб-компоненты не имеют index.html)?

Я нацеливаюсь на туалет вот так:

vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'

Итак, все библиотеки / иконки CSS должны существовать внутри mycomponent.vue.

Я пытался добавить ссылку на значки материалов внутри шаблона компонента

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">

Я также пытался использовать различные инструкции на этой странице

пока что, кажется, ничего не работает, когда веб-компонент включен во внешнюю страницу. Все, что вы видите, это буквы имени значка, а не значка. 

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'md'
})

это НЕ работает, потому что веб-компонент не содержит экземпляр Vue. (то есть в родительском приложении vue). И я просто экспортирую один компонент .vue.

Я ожидаю, что значки будут работать внутри веб-компонента без каких-либо внешних зависимостей в родительском элементе.

Ответы [ 4 ]

0 голосов
/ 07 июня 2019

Наконец-то все заработало, просто добавив тег ссылки к cdn внутри тега шаблона моего файла mycomponent.vue.

Это единственный способ, которым я смог заставить его работать у ребенка в другом туалете.Так что мой vue build wc в детстве работает на wact встроенном wact!Рамки Агностик!

0 голосов
/ 05 июня 2019

Я боролся с этим уже несколько дней, и, насколько я могу судить, импорт значков в файл app.vue через cdn приводит к состоянию гонки во встроенном компоненте, то есть шрифт загружен, но не вступает в силу.

Единственное решение, которое я нашел до сих пор, - убедиться, что там, где вы используете свой компонент, вы ссылаетесь на значки там.

Опять же, возможно, не самый лучший способ, но он работает, тем не менее.

Я думаю, что поддержка Vuetify в туалете, сделанная в данный момент, плохая. Существует много других проблем с оформлением, таких как поле выбора подкачки, отображаемое в произвольном месте для сетки данных. Насколько я могу судить, это связано со стилем позиционирования, используемым vuetify. Многие элементы используют position: absolute, что хорошо при сборке в собственном приложении vue, однако при нацеливании на веб-композицию добавляются div-оболочки, которые полностью отбрасывают эти элементы.

Я короток, если я не являюсь вальсом, я думаю, что поддержка vuetify в туалете в настоящее время плохая, и это позор, потому что я наслаждаюсь vuetify, поскольку он абстрагирует пользовательский интерфейс от пользователя

0 голосов
/ 05 июня 2019

Не используя vue, я мог бы дать неправильный совет:

При использовании теневого DOM единственный способ, которым мне удалось получить шрифты значков (@fontface) для надежного отображения в браузерах, - это добавить<link rel="stylesheet" href="path/to/icon.css" type="text/css"> в <head> документа HTML.

Каждый теневой DOM / компонент также должен будет импортировать один и тот же файл CSS.

К сожалению, идея независимого компонента нарушает идею..

0 голосов
/ 05 июня 2019

Я использую Vue Cli для создания веб-компонентов. Я провел некоторое исследование относительно того, как добавить css-загрузчик. Он ожидает, что он будет в vue.config.js, как это ... 

module.exports = {
css: {
loaderOptions: {
  css: {
    import:true
  }
}
}
}

В любом случае, он все равно выдает ошибку во время npm build serve. Итак, этот подход явно не сработал. В проекте Vue Cli нет веб-пакета как такового. Таким образом, очень сложно понять, каким инструкциям следовать, Vuetify является проблемой.

Учитывая инструкции Vuetify здесь, https://vuetifyjs.com/en/framework/icons#component-icons Я не знаю, как реализовать это с помощью vue.config.js css-loader.

Мне нужен кто-то, кто знает, как добавить значок материала Vuetify по умолчанию в файл * .vue, который может быть нацелен на туалет.

...