1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- // https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
- export default {
- directives: {
- lazy: {
- bind(img,binding){
- // console.log('lazy bind', img, binding);
- if(binding.value === 0){
- img.setAttribute('src', img.getAttribute('data-src'))
- img.removeAttribute('data-src')
- img.classList.remove('lazy')
- }
- }
- },
- switcher: {
- inserted(el,binding){
- // switch images on mousemove
- el.addEventListener('mousemove', function(event) {
- let figs = this.querySelectorAll('figure')
- // console.log('mousemove', this, event, figs.length);
- // let len = figs.length
- // let w = this.clientWidth;
- // let g = w / len;
- // let delta = Math.floor(event.layerX / g)
- let delta = Math.floor(event.layerX / (this.clientWidth / figs.length))
- // console.log('delta', delta);
- figs.forEach((fig, index) => {
- // console.log(index);
- if(index == delta){
- fig.style.display = "block"
- }else{
- fig.style.display = "none"
- }
- })
- })
- }
- }
- },
- mounted() {
- // lazy load images on mouseover
- this.$el.addEventListener('mouseover', function(event) {
- let imgs = this.querySelectorAll('.images figure img.lazy')
- // console.log('mouseover', this, imgs);
- imgs.forEach((img) => {
- // console.log('forEach img',img);
- img.setAttribute('src', img.getAttribute('data-src'))
- img.removeAttribute('data-src')
- img.classList.remove('lazy')
- })
- }, {once : true})
- },
- methods: {
- // deg2rad (deg) {
- // return deg * (Math.PI / 180)
- // },
- }
- }
|