ImagePreview 图片浏览

基础使用

<template>
  <div>
    <plv-button @click="openFun">函数方式打开</plv-button>
    <plv-button @click="openComp">组件方式打开</plv-button>

    <plv-image-preview
      ref="preview"
      :images="url"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://liveimages.videocc.net/ext/ckt/283e7911-dd78-4809-820e-cd152ed3dc29/1641958882751.png',
    };
  },

  methods: {
    openFun() {
      this.$imagePreview(this.url);
    },

    openComp() {
      this.$refs.preview.open();
    },
  },
};
</script>

显示代码

多张图片

<template>
  <plv-button @click="open">浏览多张图片</plv-button>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://liveimages.videocc.net/ext/ckt/283e7911-dd78-4809-820e-cd152ed3dc29/1641958882751.png',
        'https://liveimages.videocc.net/ext/ckt/b308aadc-80cf-4589-a0dd-0f5101dfe405/1641292068929.png',
        'https://liveimages.videocc.net/ext/ckt/8b20c242-62cc-470f-af0f-85091a468268/1641959158185.png',
        'https://liveimages.videocc.net/ext/ckt/cc28686e-c7d7-4dda-9070-3740607a993e/1641959611840.png',
        'https://liveimages.videocc.net/ext/ckt/a841f57f-d341-4cbf-b66e-150a65861599/1641958838453.png',
      ]
    };
  },

  methods: {
    open() {
      this.$imagePreview(this.images);
    },
  },
};
</script>

显示代码

指令方式打开

<template>
  <img
    class="demo-image-preview-directive"
    :src="url"
    v-image-preview="url"
    v-image-preview:options="options"
  />
</template>

<script>
export default {
  data() {
    return {
      url: 'https://liveimages.videocc.net/ext/ckt/283e7911-dd78-4809-820e-cd152ed3dc29/1641958882751.png',
      options: {
        // 配置参数
      },
    };
  }
}
</script>

<style lang="scss" scoped>
.demo-image-preview-directive {
  width: 300px;
  height: 170px;
  cursor: pointer;
}
</style>

显示代码

调试工具

<template>
  <div>
    <div
      v-for="(url, index) in images"
      :key="index"
      class="demo-image-preview-tool-input"
    >
      <div class="demo-image-preview-tool-input__title">图片 {{ index + 1 }}：</div>
      <plv-input
        v-model="images[index]"
        placeholder="请输入图片地址"
        size="small"
      />
      <plv-icon icon="delete" @click="deleteUrl(index)" />
    </div>

    <plv-button @click="addUrl">添加</plv-button>

    <plv-button @click="openPreview">打开</plv-button>

    <plv-tips>自动生成各尺寸图片地址：https://iph.href.lu/1280x760</plv-tips>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://iph.href.lu/1280x760'
      ],
    };
  },

  methods: {
    addUrl() {
      if (this.images.length >= 10) {
        return;
      }

      this.images.push('');
    },

    deleteUrl(index) {
      if (this.images.length <= 1) {
        return;
      }

      this.images.splice(index, 1);
    },

    openPreview() {
      const images = this.images.filter(url => !!url);
      if (images.length === 0) {
        return;
      }

      this.$imagePreview(images);
    }
  },
};
</script>

<style lang="scss" scoped>
.demo-image-preview-tool-input {
  margin-bottom: 8px;

  display: flex;
  align-items: center;

  .demo-image-preview-tool-input__title {
    width: 72px;
  }

  .plv-input {
    flex: 1;
  }

  .plv-icon {
    font-size: 20px;
    margin-left: 8px;
    cursor: pointer;
  }
}

.plv-tips {
  display: inline-flex;
}
</style>

显示代码

图片地址支持对象类型

const images = [
  {
    url: 'https://iph.href.lu/1280x760',
    downLoadUrl: 'https://liveimages.videocc.net/ext/ckt/283e7911-dd78-4809-820e-cd152ed3dc29/1641958882751.png'
  },

  'https://iph.href.lu/760x1280',
];

TIP

移动端效果请在真机或移动端模拟器中打开。

Attributes

参数	说明	类型	可选值	默认值
images	浏览的图片信息，支持传入字符串、数组、对象类型，对象类型的参数可见 ImageOptions	String Array Object	-	[]
preview-bg	浏览的图片背景	String	-	rgba(0, 0, 0, 0.6)
close-on-click-mask	是否支持点击空白背景关闭浏览	Boolean	-	true
edge-between	在图片 100% 展示时，图片与浏览边沿的距离	Number	-	pc: 100 / mobile: 0
max-zoom	最大缩放百分比	Number	-	10
min-zoom	最小缩放百分比	Number	-	0.2
initial-index	打开时默认的图片索引	Number	-	0

Methods

方法	说明	参数
open()	打开浏览	-
close()	关闭浏览	-
toSlidePrev()	切换到下一个图片	-
toSlidePrev()	切换到上一个图片	-
toZoomLarge()	放大当前图片	-
toZoomSmall()	缩小当前图片	-
toZoomReset()	复原当前图片	-

ImageOptions

参数	说明	类型	可选值	默认值
url	图片地址	String	-	-
downLoadUrl	图片下载地址	String	-	默认为 url 字段