Визуализация временной шкалы vis js in vue: - невозможно применить фон другого цвета к vis-item-box через прагматически - PullRequest
Новая
       53

Визуализация временной шкалы vis js in vue: - невозможно применить фон другого цвета к vis-item-box через прагматически

1 голос
/ 23 января 2020

Я использую визуализацию временной шкалы, используя vis js in Vue. Я хочу прагматично менять динамически цвета элемента-коробки. Я пытался применить новый css, но не смог успешно. Я создал отдельный класс css для двух цветов, один из которых зеленый, а другой красный, но при запуске этой программы она не будет переопределена для существующего css класса .vis-item.

введите изображение описание здесь Vuejs framework и vis js

ниже мой код здесь, 

<script>
import { Timeline } from 'vue2vis';
import "vue2vis/dist/vue2vis.css";
import moment  from 'moment';
export default {
    name: 'TimelineVisu',
    components:{
        Timeline
    },
    data() {
            return {
                    groups: [],
                    items: [],
                    options: {
                    editable: false,
                    tooltip: {followMouse: true}
                        }                       
        }
    },
   created() {
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var groupCount = 3;
    var itemCount = 20;
    // create a data set with groups
    var names = ['John', 'Alston', 'Lee', 'Grant'];
    for (var g = 0; g < groupCount; g++) {
      this.groups.push({
        id: g,
        content: names[g]
      });
    }
    // create a dataset with items
    for (var i = 0; i < itemCount; i++) {
      var start = now.clone().add(Math.random() * 200, 'hours');
      var group = Math.floor(Math.random() * groupCount);
      this.items.push({
        id: i,
        group: group,
        content: 'item ' + i +
          ' <span class="" style="color:green;">(' + names[group] + ')</span> <br/> vinod',
        start: start,
        type: 'box',
        className: 'green', //green or yellow
        title:'Testing tool tip index' + i     
      });
    }
   }
}
</script>
<style scoped>

.yellow {
    background-color: red !important;   
  }

.green {
    background-color: green !important;   
  }
 

</style>
<template>
    <div>
      
      <timeline ref="timeline"
    :items="items"
    :groups="groups"
    :options="options"
    >
    </timeline>
    </div>
</template>

1 Ответ

1 голос
/ 23 января 2020

попробуйте использовать /deep/ или ::v-deep для создания шаблона дочернего компонента (html) 

/deep/ .classname{
    your css 
}

или 

::v-deep .classname{
    your css    
}

ссылка: https://vue-loader.vuejs.org/guide/scoped-css.html#deep -selectors

...