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>

 

posted @ 2020-08-16 14:20  yw3692582  阅读(400)  评论(0)    收藏  举报