Question

我正在尝试实现与Angular here中相同的功能，但要在 Vue.JS （2.6+）中实现。

我正在尝试使用Twitch API for embedding a Stream，它仅通过以下内联HTML显示用法：

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

与Angular相同，我们当然不能在Vue组件中使用Script标签。

因此，我想知道在Vue中利用此Twitch Embed插入Vue应用程序内部的最佳方法是什么？ （我同意将其嵌入JS或组件的HTML）

Answer 1

您需要像其他库一样导入抽搐库。如果您没有在npm中找到它，则可以直接下载并将其导入本地。看来，它不是ES6模块，因此它将库分配给全局窗口对象，从那时起您就可以在其中使用它。

这里是一个示例：

main.js

import './libraries/twitch.v1.js';

// boilerplate your vue app

组件：

<template>
  <div ref="twitchVideo" />
</template>

<script>
export default {
  name: 'twitch-video',
  data () {
    return { player: null }
  },
  mounted () {
    const options = {
      width: 854,
      height: 480,
      channel: 'dallas',
    };
    // you might need to pass an ID string as a first argument..
    this.player = new Twitch.Player(this.$refs.twitchVideo, options);
    this.player.setVolume(0.5);
  }
};
</script>

另一种选择是将<script>标记添加到index.html文件中。但是，我建议您不要这样做，因为您不知道何时从组件内部加载脚本，并且不符合捆绑库的整个概念。

如何在Vue中使用Twitch <script>标签

1 个答案: