Vue.js的图像缩放悬停组件 - vue-zoom-on-hover

Vue.js的图像缩放悬停组件 - vue-zoom-on-hover
插件名称 vue-zoom-on-hover
发布时间 2020年9月16日
插件作者 Intera

vue.js组件显示具有父元素宽度的图像,并在悬停时显示完整图像或缩放图像。

特征

  • 启用/禁用属性
  • 自定义缩放比例的图像
  • (可选)单独的缩放图像
  • 加载所有图像时发生的事件
  • 图像调整大小时发生的事件(响应的CSS等)
  • 基本的触摸支持,点按可缩放

用法

最小示例(示例div作为父容器)

<div style="width:400px">
  <zoom-on-hover img-normal="image.jpg"></zoom-on-hover>
</div>

所有选项

<zoom-on-hover img-normal="image.jpg" img-zoom="bigger-image.jpg" :scale="1.5" :disabled="true"
  @loaded="onload" @resized="onresize"></zoom-on-hover>

向您的vue应用或组件注册组件

new Vue({
  el: "#app",
  components: {
    zoomOnHover: zoomOnHover
  }
})