适用于Vue 3的触摸式图像缩放器

一个响应式的、触摸式的图像缩放器组件，允许你缩放和平移图像。

如何使用它。

1.导入并注册图像缩放器。

import { createApp } from 'vue';
import App from './App.vue'
import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';
const app = createApp(App);
app.use(VueImageZoomer);
app.mount('#app');

// OR
import { VueImageZoomer } from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';
export default {
  name: 'App',
  components: {
    VueImageZoomer
  }
}

2.2. 将您的图像添加到图像缩放器中。

<v-image-zoom regular="/path/to/regular.jpg">        
</v-image-zoom>

<!-- OR -->
<v-image-zoom 
  regular="/path/to/regular.jpg" 
  zoom="/path/to/zoom.jpg">        
</v-image-zoom>

3.它也支持webp图像。

<v-image-zoom 
  regular="/path/to/regular.jpg" 
  regular-webp="/path/to/regular.webp"
  zoom="/path/to/zoom.jpg"
  zoom-webp="/path/to/zoom.webp">        
</v-image-zoom>

4.4.它还允许你根据屏幕尺寸获取正确的图像。

<v-image-zoom 
  regular="/path/to/regular.jpg" 
  zoom="/path/to/zoom.jpg"
  :breakpoints="[
    {
      width: 1200,
      regular: '/path/to/regular-1200.jpg',
      zoom: '/path/to/-1200.jpg'
    },
    {
      width: 992,
      regular: '/path/to/-992.jpg',
      zoom: '/path/to/-992.jpg'
    }           
  ]">        
</v-image-zoom>

5.所有可能的选项。

regular: String,
regularWebp: String,
zoom: String,
zoomWebp: String,
imgClass: {
  type: String,
  default: ''
},
alt: String,
zoomAmount:  {
  type: Number,
  default: 0
},
clickZoom: Boolean,
hoverMessage: {
  type: String,
  default: '<span class="vh--icon">&#9906;</span> Hover to zoom'
},
touchMessage: {
  type: String,
  default: '<span class="vh--icon">&#9906;</span> Tap to zoom'
},
clickMessage: {
  type: String,
  default: '<span class="vh--icon">&#9906;</span> Click to zoom'
},
closePos: {
  type: String,
  default: 'top-left'
},
messagePos: {
  type: String,
  default: 'bottom'
},
showMessage: {
  type: Boolean,
  default: true,
},
showMessageTouch: {
  type: Boolean,
  default: true
},
breakpoints: Array,
touchZoomPos: {
  type: Array,
  default() {
      return [0.5, 0.5]
  }
},
lazyload: Boolean,
rightClick: Boolean

更改日志。

v2.2.0 (09/28/2022)

• 占位符和事件

v2.1.0 (06/10/2022)

• 注意懒人道具的变化

v2.0.1 (06/08/2022)

• 针对Vue 3的更新

v1.3.0 (11/24/2021)

• 增加了一个触摸缩放道具，用户可以在触摸设备上选择缩放图片的起始位置。

The postTouch-friendly Image Zoomer For Vue 3appeared first onVue Script.