• 项目需求,需要在 vue 中使用一个叫 bookreader 的东西,这玩意没有相应的 package ,也没有相应的封装,不能 说直接使用 npm install XXXX 来使用,这玩意是基于 jquery 开发的,因此,要在 vue 中使用,就必须将相应的静态文件都给引入到项目下面;
  • 1 首先看看需要的文件:
  • 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
  • 注意点 : 看看 options 配置项中的 data 数组: 以 data[0] 为例 : 两个对象,分别代表翻页中的每一页; 其他配置项,等我研究一下在写.
Last Updated: 2021/11/28 上午12:58:10
Contributors: biubu