vue图片放大缩小:onwheel

1.使用插件

实现图片的放大缩小,可以采用插件。如:

viewerjs(放大和缩小、切换上下张等功能)

vue-photo-preview(放大和缩小、切换上下张等功能)

vue-picture-preview(预览和切换上下张功能)

2.不使用插件

1.给img标签绑定一个id

2.在mounted里写放大缩小的方法

2.1代码截图

 vue图片放大缩小:onwheel_第1张图片

2.2代码

模板(template)部分:

js(script)部分:

mounted

  mounted() {

    let scale = 1;

    pic.onwheel = function (e) {

      if (e.wheelDelta > 0) {

        scale += 0.05;

        pic.style.transform = `scale(${scale})`;

      } else {

        scale -= 0.05;

        pic.style.transform = `scale(${scale})`;

      }

    };

  },

 

 

你可能感兴趣的:(vue.js,前端,javascript)