Vuetife перезаписывает компоненты в областях видимости - PullRequest
Новая
       22

Vuetife перезаписывает компоненты в областях видимости

0 голосов
/ 16 января 2019

Я создаю приложение, используя Vuetify. Один компонент должен отображать расписание, созданное с использованием dxhtmlScheduler. Но глобальные стили Vuetify перезаписывают локальные стили dxhtmlScheduler, поэтому расписание отображается некорректно. Как сделать так, чтобы стили dxhtmlScheduler у определенного компонента имели более высокий приоритет, чем стили Vuetify? 

<template >

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
  <div class="dhx_cal_prev_button">&nbsp;</div>
  <div class="dhx_cal_next_button">&nbsp;</div>
  <div class="dhx_cal_today_button"></div>
  <div class="dhx_cal_date"></div>
  <div class="dhx_cal_tab" name="day_tab"></div>
  <div class="dhx_cal_tab" name="week_tab"></div>
  <div class="dhx_cal_tab" name="month_tab"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>


</template>

<script>
import 'dhtmlx-scheduler'


export default {
name: "Scheduler",
mounted() {
  scheduler.init("scheduler_here");
   }
}
</script>

<style   scoped>
    @import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>

1 Ответ

0 голосов
/ 31 января 2019

Разметка, сгенерированная dhtmlxScheduler, находится за пределами области видимости vue, поэтому я не думаю, что стили с областями видимости будут работать с ней.

Попробуйте удалить атрибут scoped из вашего объявления стиля 

<style>
    @import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>

Вот связанная проблема github https://github.com/vuejs/vue-loader/issues/559

Объяснение :

Vue добавляет специальный атрибут data-v-xxxxxxx к html-элементам, созданным вашим компонентом.

Vue css-loader, в свою очередь, изменяет селекторы в области видимости css для явного соответствия элементов внутри вашего компонента и ничего за пределами.

Так что .dhx_cal_event_line { background: blue; } в dhtmlscheduler.css становится .dhx_cal_event_line[data-v-xxxxxxx] { backtround: blue; } при загрузке на страницу. Предполагается, что такой стиль влияет только на компонент с соответствующим значением атрибута data-v.

Проблема в том, что DOM-элементы dhtmlxscheduler создаются библиотечным кодом вне знания компонента vue, у них нет атрибутов vue data-v-xxxxxxx, поэтому селекторы css в области больше не соответствуют им.

Таким образом, вам придется загружать планировщик css в качестве глобального стиля.

Возможно, есть лучшее решение, но, к сожалению, я его не знаю.

...