vue.js怎么加载js插件?

不管是VUE还是Angular,有时候我们需要使用到一些js插件,但是的源库中并没有相应的插件包,这个时候我们需要如何引入并且使用呢?这个问题其实非常简单,接下来我以VUE为例写给大家介绍一下如何加载第三方js插件。

下面会先用ckplayer插件进行演示在VUE下的使用。

不管是具体是什么js插件,vue项目也好,angular项目也罢,最终打包都是打包成js压缩文件,资源文件,入口文件(index.html).所以就算你要使用的js插件在源中没有对应的typescripte版本也不要着急,我们依然可以使用它。

1、下载CKPlayer插件

CKPlayer官方下载地址:http://xn--w-8eaaa.ckplayer.com/down/

下载后解压直接放入到static目下

2、放入Vue项目中的static目录下,在入口文件(index.html)中引入js

1.png

2.png

3、构建ckplayer组件,使用ckplayer插件

ckplayer组件代码如下(按照官方文档写的,解压后index.html中有可自行定义方法进行测试):

<template>
  <div>
    <label>ckplayer播放器插件Vue使用Demo</label>
    <div id="video"></div>
  </div>
</template>

<script>
export default {
  name: 'ckplayerPlugin',
  data () {
    return {

    }
  },
  mounted: function(){
    // 挂载完成后进行
    var videoObject = {
                container: '#video', //容器的ID或className
                variable: 'player', //播放函数名称
                loaded: 'loadedHandler', //当播放器加载后执行的函数
                loop: true, //播放结束是否循环播放
                cktrack: 'static/ckplayer/material/srt.srt', //字幕文件
                poster: 'static/ckplayer/material/poster.jpg', //封面图片
                preview: { //预览图片
                    file: ['static/ckplayer/material/mydream_en1800_1010_01.png',
                     'static/ckplayer/material/mydream_en1800_1010_02.png'],
                    scale: 2
                },
                config: '', //指定配置函数
                debug: true, //是否开启调试模式
                drag: 'start', //拖动的属性
                seek: 0, //默认跳转的时间
                //广告部分开始
                adfront: 'http://×××w.ckplayer.com/yytf/swf/front001.swf,http:
                //×××w.ckplayer.com/yytf/swf/front002.swf', //前置广告
                adfronttime: '15,15',
                adfrontlink: '',
                adpause: 'http://×××w.ckplayer.com/yytf/swf/pause001.swf,http:
                //×××w.ckplayer.com/yytf/swf/pause002.swf',
                adpausetime: '5,5',
                adpauselink: '',
                adinsert: 'http://×××w.ckplayer.com/yytf/swf/insert001.swf,http:
                //×××w.ckplayer.com/yytf/swf/insert002.swf',
                adinserttime: '10,10',
                adinsertlink: '',
                inserttime: '10,80',
                adend: 'http://×××w.ckplayer.com/yytf/swf/end001.swf,http:
                //×××w.ckplayer.com/yytf/swf/end002.swf',
                adendtime: '15,15',
                adendlink: '',
                //广告部分结束
                promptSpot: [ //提示点
                    {
                        words: '提示点文字01',
                        time: 30
                    },
                    {
                        words: '提示点文字02',
                        time: 150
                    }
                ],
                video: [
                    ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4',
                     'video/mp4', '中文标清', 0],
                    ['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4',
                     'video/mp4', '中文高清', 0],
                    ['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4',
                     'video/mp4', '英文高清', 10],
                    ['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4',
                     'video/mp4', '英文超清', 0]
                ]
            };
      // 定义一个对象
      var player = new ckplayer(videoObject);
  }
}
</script>

<style scoped>
  #video {
    width: 600px;
    height: 400px;
    margin: 0px auto;
  }
</style>

5、效果截图

2.png

更多web前端知识,请查阅 HTML中文网 !!

以上就是vue.js怎么加载js插件?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏