- 项目需求,需要在 vue 中使用一个叫 bookreader 的东西,这玩意没有相应的 package ,也没有相应的封装,不能 说直接使用 npm install XXXX 来使用,这玩意是基于 jquery 开发的,因此,要在 vue 中使用,就必须将相应的静态文件都给引入到项目下面;
- 1 首先看看需要的文件:
- 2 准备工作 :
- 1 用vue-cli 生成项目,并安装相应的依赖.
- 2 通过上面的地址下载代码;
- 3 将 BookReader 文件夹复制到 vue 项目的 static 文件夹下,
- 4 在 vue 项目中的 index.html 的 head 标签中用 script 标签引入 BookReader 的 js 文件, 用link 标签映入 BookReader 的 css 文件,然后,在 body 结束标签之前引入BookReader.js 这个文件,最终,,index.html 是这样的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>book-reader</title>
<script src="./static/BookReader/jquery-1.10.1.js"></script>
<script src="./static/BookReader/jquery-ui-1.12.0.min.js"></script>
<script src="./static/BookReader/jquery.browser.min.js"></script>
<script src="./static/BookReader/jquery.bt.min.js"></script>
<script src="./static/BookReader/dragscrollable-br.js"></script>
<script src="./static/BookReader/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="./static/BookReader/BookReader.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./static/BookReader/BookReader.js"></script>
</body>
</html>
- 3 在组件中使用,通过 vue-cli 生成的项目中是不是有一个 HelloWorld.vue 的文件,把这个文件中的 内容 删除了,把下面的粘贴进去, 运行
npm run dev,是不是可以了效果出来了?
<template>
<div id="BookReader" class="hello"></div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
options: {
data: [
[
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg'
},
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg',
}
],
[
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg'
},
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg',
}
],
[
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg'
},
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg',
}
],
[
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg'
},
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg',
}
],
[
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg'
},
{
width: 800, height: 1200,
uri: 'http://img0.imgtn.bdimg.com/it/u=4212717079,3052071093&fm=27&gp=0.jpg',
}
],
],
ui: 'full', // embed, full (responsive)
el: '#BookReader',
}
}
},
mounted () {
new BookReader ( this.options ).init ()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*@import "../assets/BookReader/BookReader.css";*/
body {
background-color: #939598;
}
/* Hide print and embed functionality */
.BRtoolbar .embed, .print {
display: none;
}
.BookReader {
width: 800px;
height: 600px;
overflow: hidden;
}
</style>
- 注意点 : 看看 options 配置项中的 data 数组: 以 data[0] 为例 : 两个对象,分别代表翻页中的每一页;
其他配置项,等我研究一下在写.
网友评论