如何在 riot 标签中包含外部 css 和 javascript？

Question

我想为轮播创建一个标签，但我只想在网站上使用此标签时加载 CSS 和 Javascript 文件，但我只能让它工作如果我将它添加到我网站的 <body>。

有没有办法只加载标签中的 is？

我的标签示例（仅当我将 css 和 .js 文件移动到网站正文时才有效：

<carousel>
  <div class="row" hide="{$gg.filterApplied || $gg.redeem.redeemInProgress()}">
    <div class="col-sm-12">
      <div class="logos text-center">
        <div class="divider"></div>
        <div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div><h3>3</h3></div>
          <div><h3>4</h3></div>
          <div><h3>5</h3></div>
          <div><h3>6</h3></div>
        </div>
        <div class="divider"></div>
      </div>
    </div>
  </div>

  <style scoped>
    @import url("//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css")
  </style>

  <script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <script>
    var self = this;
    self.mixin(SharedMixin)
  </script>
</carousel>

Answer 1

我遇到了类似的问题，我是这样解决的。

我在标签中添加了一个方法，使用 mixin，在运行时加载资源，我在触发挂载之前调用它，传递 css 和 js 文件的列表。

它使用了jQuery的函数getScript。

loadResources(css, js, callback){
    for(var i = 0; i < css.length; i++){
        if(css[i] !== ''){
            var link = document.createElement('link');
            link.setAttribute("rel", "stylesheet");
            link.setAttribute("type", "text/css");
            link.setAttribute("href", css[i]);
            document.getElementsByTagName("head")[0].appendChild(link);
        }
    }
    var jsProgress = 0;
    for(var j = 0; j < js.length; j++){
        $.getScript(js[j], function () {
            if (++jsProgress == js.length && typeof callback !== 'undefined') callback();
        });
    }
}

如何在 riot 标签中包含外部 css 和 javascript？

how to include external css and javascript in riot tag?

riot.js