Card.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <article class="card">
  3. <header>
  4. <h1>{{ item.title }}</h1>
  5. <h4>{{ item.description }}</h4>
  6. <span class="ref">{{ item.reference }}</span>
  7. </header>
  8. <section class="images" v-switcher>
  9. <figure
  10. v-for="(img, index) in item.images"
  11. :key="img.url"
  12. >
  13. <img
  14. class="lazy"
  15. v-lazy="index"
  16. :data-src="img.url"
  17. :title="img.title"
  18. />
  19. <img class="blank" :src="blanksrc">
  20. </figure>
  21. </section>
  22. </article>
  23. </template>
  24. <script>
  25. export default {
  26. name: "Card",
  27. props: ['item'],
  28. data() {
  29. return {
  30. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`
  31. }
  32. },
  33. directives: {
  34. lazy: {
  35. bind(img,binding){
  36. // console.log('lazy bind', img, binding);
  37. if(binding.value === 0){
  38. img.setAttribute('src', img.getAttribute('data-src'))
  39. img.removeAttribute('data-src')
  40. img.classList.remove('lazy')
  41. }
  42. }
  43. },
  44. switcher: {
  45. inserted(el,binding){
  46. // switch images on mousemove
  47. el.addEventListener('mousemove', function(event) {
  48. let figs = this.querySelectorAll('figure')
  49. // console.log('mousemove', this, event, figs.length);
  50. // let len = figs.length
  51. // let w = this.clientWidth;
  52. // let g = w / len;
  53. // let delta = Math.floor(event.layerX / g)
  54. let delta = Math.floor(event.layerX / (this.clientWidth / figs.length))
  55. // console.log('delta', delta);
  56. figs.forEach((fig, index) => {
  57. // console.log(index);
  58. if(index == delta){
  59. fig.style.display = "block"
  60. }else{
  61. fig.style.display = "none"
  62. }
  63. })
  64. })
  65. }
  66. }
  67. },
  68. mounted() {
  69. // lazy load images on mouseover
  70. this.$el.addEventListener('mouseover', function(event) {
  71. let imgs = this.querySelectorAll('.images figure img.lazy')
  72. // console.log('mouseover', this, imgs);
  73. imgs.forEach((img) => {
  74. // console.log('forEach img',img);
  75. img.setAttribute('src', img.getAttribute('data-src'))
  76. img.removeAttribute('data-src')
  77. img.classList.remove('lazy')
  78. })
  79. }, {once : true})
  80. }
  81. }
  82. </script>
  83. <style lang="scss" scoped>
  84. </style>