Vue+Element-UI+jQuery+Layer+Camera+Easing的简单应用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6         <!-- 引入样式 -->
 7         <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 8         <link href="https://cdn.bootcdn.net/ajax/libs/Camera/1.3.4/css/camera.min.css" rel="stylesheet">
 9 
10     </head>
11     <body>
12         <div id="app">
13             <div id="lunbo">
14                 <div data-src="img/img_1.jpg"></div>
15                 <div data-src="img/img_2.jpg"></div>
16             </div>
17             <div class="box">
18                 <el-button type="primary" @click="b">点击</el-button>
19             </div>
20         </div>
21         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
22         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
23         <script src="https://unpkg.com/element-ui/lib/index.js"></script>
24         <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
25         <script src="https://cdn.bootcdn.net/ajax/libs/Camera/1.3.4/scripts/camera.min.js"></script>
26         <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
27         <script type="text/javascript">
28             new Vue({
29                 el: '#app',
30                 data: {
31 
32                 },
33                 methods: {
34                     b() {
35                         let content = '<h1>测试</h1>'
36                         layer.open({
37                             type: 1, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
38                             area: ['600px', '360px'],
39                             shade: false,
40                             content,
41                             cancel: function(index, layero) { //关闭弹窗时的回调函数
42                                 if (confirm('确定要关闭么')) {
43                                     layer.close(index)
44                                 }
45                                 return false;
46                             }
47                         });
48                     }
49                 },
50                 mounted() {
51                     $(function() {
52                         $('#lunbo').camera({
53                             height: '789px',
54                             overlayer: false,
55                             pagination: false,
56                             playPause: false,
57                             pauseOnClick: false,
58                             portrait: true,
59                             time: 7000,
60                             transPeriod: 2000,
61                             mobileNavHover: true,
62                             navigationHover: false,
63                             navigation: false,
64                             slideOn: 'random',
65                             loader: 'bar',
66                             hover: false,
67                             loaderColor: '#ffffff',
68                             loaderBgColor: '#222222',
69                             loaderOpacity: 0.8
70                         });
71                     });
72                 }
73             })
74         </script>
75         <style type="text/css">
76             html,
77             body {
78                 padding: 0;
79                 margin: 0;
80             }
81 
82             .box {
83                 position: absolute;
84                 top: 50%;
85                 right: 50%;
86             }
87         </style>
88     </body>
89 </html>

相关阅读:
CentOS 7.4 发布下载，安全稳定的Linux发行版
 PHP缓存机制详解
 用FastDFS一步步搭建文件管理系统
 linux中mv命令使用详解
 linux grep命令详解
 音频放大器的设计
 C#学习笔记（九）——集合、比较和转换
 Kinect学习笔记（五）——更专业的深度图
 C#学习笔记（八）——定义类的成员
 kinect学习笔记（四）——各种数据流
原文地址：https://www.cnblogs.com/lyt520/p/13512428.html