在VUE中使用bookreader 插件

2018-04-09 本文已影响14人 WestLonely

项目需求,需要在 vue 中使用一个叫 bookreader 的东西,这玩意没有相应的 package ,也没有相应的封装,不能说直接使用 npm install XXXX 来使用,这玩意是基于 jquery 开发的,因此,要在 vue 中使用,就必须将相应的静态文件都给引入到项目下面;
1 首先看看需要的文件:
- 1. 1 官网链接
- 1. 2 代码地址
2 准备工作 :
- 1. 1 用vue-cli 生成项目,并安装相应的依赖.
- 1. 2 通过上面的地址下载代码;
- 1. 3 将 BookReader 文件夹复制到 vue 项目的 static 文件夹下,
- 1. 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] 为例 : 两个对象,分别代表翻页中的每一页;
其他配置项,等我研究一下在写.

在VUE中使用bookreader 插件

猜你喜欢

热点阅读