README
asciinema-player-vue
How to use
yarn install @secrets/asciinema-player-vue
import AsciinemaPlayer' from '@secrets/asciinema-player-vue';
Vue.vue(AsciinemaPlayer);
public/index.html 手动引入 asciinema-player 的 js 和 css 文件,这个没办法,不然变量无法注入到 window 对象中
<link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
<script src="/asciinema-player.js"></script>
原插件中的 src 属性配置 cast 或者 json 文件会发起一个 http 请求,但是我们想配置一个 string。因此,在组件中我加入了 base64 来把配置文件变成 base64 格式的数据,像这样:data:application/json;base64,xxxxxx
;但是就需要在自己工程里配置一个 loader,cast 文件内的数据,变成一个字符串传入就行了。后面的加密过程我会处理。
- 引入本地文件
module.exports = {
chainWebpack: (config) => {
config.module
.rule("cast")
.test(/\.cast$/)
.use("raw-loader")
.loader("raw-loader")
.end();
}
};
- 引用服务器上资源
:src="/YOUR_SERVER/xxx.cast"
如果有跨域就配置一个代理,开发环境直接配置 devServer.proxy,和调研普通 API 一样,会发起一个 GET 请求
demo
在 example 文件夹中
参数配置和原生插件一样
yarn install && yarn serve