Vue和Rainyday.js

Question

I tried to find the way to use Vue and rainyday.js but I couldn't find anything related. 我试图找到使用Vue和rainyday.js的方法，但是找不到任何相关的东西。 How can I implement rainyday.js with Vue? 如何使用Vue实现rainyday.js？

<body onload="run();">
    <img id="background" alt="background" src="" />
</body>
<script src="./js/rainyday.min.js"></script>
<script>
    function run() {
        var image = document.getElementById('background');
        image.onload = function () {
            var engine = new RainyDay({
                image: this
            });
            engine.rain([
                [1, 2, 8000]
            ]);
            engine.rain([
                [3, 3, 0.88],
                [5, 5, 0.9],
                [6, 2, 1]
            ], 100);
        };
        image.crossOrigin = 'anonymous';
        image.src = 'http://i.imgur.com/N7ETzFO.jpg';
    }
</script>

I modified run function into mounted but it doesn't work 我将run功能修改为已mounted但无法正常工作

Answer 1

i tried below approach and it works. 我尝试下面的方法，它的工作原理。

Download rainyday.js library from this path . 从此路径下载rainyday.js库。 Import rainyday.js via <script> in your index.html 通过index.html中的<script>导入rainyday.js

This makes RainyDay class available in global scope. 这使得RainyDay class在全球范围内可用。 Now you can use RainyDay class in any of the vue components 现在您可以在任何vue组件中使用RainyDay class

Vue component (App.vue for example)

Vue和Rainyday.js

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-12 08:02:17

Vue和Rainyday.js

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-12 08:02:17

解决方案1
1 已采纳 2018-01-12 08:02:17