ZnImage 图片组件

用来展示图片内容

图片展示

显示图片

基础使用

加载中...

<template>
    <zn-image
       src="https://ftp.zznzzn.xin/1.jpg"
    ></zn-image>   
</template>

Expand Copy Copy

全屏查看图片

通过设置preview属性为true，可以开启全屏查看图片的功能。设置后点击图片即可查看大图

加载中...

<template>
    <zn-image
       src="https://ftp.zznzzn.xin/1.jpg"
       :preview="true"
    ></zn-image>   
</template>

Expand Copy Copy

ZnImage Props

参数	说明	类型	可选值	默认值
src	图片地址（必填）	sting
height	高度	sting，number		auto
width	宽度	sting，number		auto
fit	填充类型，css的原生属性	string		cover
preview	是否开启全屏查看图片的功能	boolean		false
appendToBody	是否将弹出框插入至 body 元素。element的原生属性，只有在preview为true时才生效	boolean		true
lazy	是否开启图片懒加载。	boolean		false
alt	图片说明	string

ZnImage Events

事件名	说明	回调参数
load	图片加载完成时触发	() => void
error	图片加载失败时触发	() => void
click	点击图片时触发	() => void

图片操作

支持放大、缩小、旋转、复位、拖拽的操作

基础用法

只要传递一个图片地址即可使用

<template>
    <zn-image-operation
       src="https://ftp.zznzzn.xin/1.jpg"
    ></zn-image-operation>   
</template>

Expand Copy Copy

控制操作栏

传递一个数组，包含需要的操作，如果不传递，默认显示所有操作。重置操作在放大和旋转的情况下都会显示

<template>
    <zn-image-operation 
        src="https://ftp.zznzzn.xin/1.jpg"
        :tools="['zoom', 'rotate']"
    ></zn-image-operation>   
</template>

Expand Copy Copy

ZnImageOperation Props

参数	说明	类型	可选值	默认值
src	图片地址（必填）	sting
appendToBody	是否将弹出框插入至 body 元素。element的原生属性	boolean		true
height	高度	sting，number		100%
width	宽度	sting，number		100%
tools	操作栏	array		['zoom', 'rotate', 'drag', 'viewer']
fit	填充类型，css的原生属性	string		contain

tools 操作栏

TIP

缩放和旋转操作时，会自动显示重置的按钮

属性值	说明	备注
zoom	放大、缩小操作
rotate	旋转操作
drag	拖拽操作
viewer	查看操作	使用elementui原生组件