Vue+Element-UI+jQuery+Layer+Camera+Easing的簡單應用
阿新 • • 發佈：2020-08-16
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>