@pavlik2000

UPD. Как использовать сторонний js файл в VueJs?

UPD. добавил исходники Html и скриптов.
Привет.
Изучаю компоненты в VueJs. Простой компонент уже могу создавать. Решил расширить знания, но возникла трудность:
Есть простая html страница, которую взял за образец и которую хочу перевести в Vue component
https://codesandbox.io/embed/waves-cff0x
Но когда создаю компонент - ничего не происходит.
Мои действия:
Подключаю основной файл sine-waves.min.js
А, код из файла script.js:
spoiler
var waves = new SineWaves({
  el: document.getElementById('waves'),
  
  speed: 5,
  
  ease: 'SineInOut',
  
  wavesWidth: '75%',
  
  waves: [
    {
      timeModifier: 4,
      lineWidth: 5,
      amplitude: -25,
      wavelength: 25
    }
    
  ],
 
  // Called on window resize
  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");
    
    var index = -1;
    var length = this.waves.length;
	  while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }
    
    // Clean Up
    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

- помещаю в Sinus.vue
Вот код компонента Sinus.vue:
spoiler
<template>
<div>
    <canvas ref="waves"></canvas>
    <h1>Компонент</h1>
</div>
</template>

<script>
    import "@/js/sine-waves.min.js"
    export default {


    mounted(){

        let waves = new SineWaves({
            el: document(this.$refs.waves),

            speed: 5,

            ease: 'SineInOut',

            wavesWidth: '75%',

            waves: [

                {
                    timeModifier: 4,
                    lineWidth: 5,
                    amplitude: -40,
                    wavelength: 40
                }
            ],

            // Called on window resize
            resizeEvent: function() {
                var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
                gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
                gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
                gradient.addColorStop(1,"rgba(255, 255, 25, 0");

                var index = -1;
                var length = this.waves.length;
                while(++index < length){
                    this.waves[index].strokeStyle = gradient;
                }

                // Clean Up
                index = void 0;
                length = void 0;
                gradient = void 0;
            }
        });
    }
    };
</script>

Никак не могу разобраться - как правильно добавлять сторонние файлы? В Html - просто прописал пути размещения и работает.
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
Не знаю что там у sine-waves, но походу обёртка в модуле криво написана, но у вас ошибка в компоненте
el: document(this.$refs.waves),

document это функция чтоле?

https://codesandbox.io/s/vue-template-04x15
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
arioch77
@arioch77
веб-разработчик
При export/import объекта в Vue(Nuxt) содержимое объекта дополняется служебными данными — как сделать правильно? - почитайте ответы и комментарии к ним - вроде как это та же самая проблема, просто немного с другого ракурса
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы