vue移动端图片预览组件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

安装：npm install -s w-previewimg 或 yarn add w-previewimg

在线预览地址： https://wenyuming.github.io/w-demos/dist/index.html#/previewimgDemo

预览时请按f12，在移动端模式下预览

由于预览网址带宽比较低，加载图片会比较慢，等图片都加载完才能完整体验，耐心等一下哦。

操作说明：左滑右滑切换图片，单击预览图片关闭预览，此插件只使用于移动端。

效果图：

html部分：

<template>
	<div style="text-align:center">
		<div v-for="i in imgs" style="width:100px;height:100px;display:inline-block;margin-left:10px;margin-top:10px">
        <img :src="i" alt="" style="display:inline-block;width:100%;height:100%" @click="showBigImg(i)">
    </div>
    <wimg v-if="isShowBigImg" :imgs="imgs" :currentImg="current" @close="isShowBigImg = false"></wimg>
	</div>
</template>

js部分：

<script>
import wimg from 'w-previewimg'
  export default {
    components: {
      wimg
    },
	data () {
      return {
        isShowBigImg: false,
        current: '',
        imgs: [require('../assets/img/test1.jpg'),require('../assets/img/test2.jpg'),require('../assets/img/test3.jpg'),require('../assets/img/test4.jpg'),require('../assets/img/test5.jpg'),require('../assets/img/test6.jpg')]
      }
	},
	methods: {
      showBigImg (i) {
        this.current = i
        this.isShowBigImg = true
      }
    }
  }
</script>

属性说明 

属性名数据类型描述
imgsArray预览图片路径数组，必填，如：[url,url,url]，请遵循格式要求
currentImgString当前预览图片路径，必填

事件说明

事件参数描述
close无单击预览图片触发，结合父组件的某个变量，控制预览插件的隐藏与显示

      希望这个组件能给大家带来帮助，另外使用过程中有遇到问题的话，可以留言反馈，或者直接微信qq联系我！

以上是 vue移动端图片预览组件 的全部内容， 来源链接： utcz.com/z/376042.html

回到顶部