photoswipe.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  3. <div class="pswp__bg"></div>
  4. <div class="pswp__scroll-wrap">
  5. <div class="pswp__container">
  6. <div class="pswp__item"></div>
  7. <div class="pswp__item"></div>
  8. <div class="pswp__item"></div>
  9. </div>
  10. <div class="pswp__ui pswp__ui--hidden">
  11. <div class="pswp__top-bar">
  12. <div class="pswp__counter"></div>
  13. <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  14. <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  15. <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  16. <div class="pswp__preloader">
  17. <div class="pswp__preloader__icn">
  18. <div class="pswp__preloader__cut">
  19. <div class="pswp__preloader__donut"></div>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
  25. <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
  26. <div class="pswp__caption">
  27. <div class="pswp__caption__center"></div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import 'photoswipe/dist/photoswipe.css';
  35. import 'photoswipe/dist/default-skin/default-skin.css';
  36. export default {
  37. data() {
  38. return{
  39. }
  40. },
  41. props: {
  42. },
  43. methods : {
  44. }
  45. }
  46. </script>