Vue Super UI

切换模式

本文总阅读量 次

图片 Image ​


可预览的图片

何时使用 ​

  • 需要展示图片时
  • 加载图片时显示 loading

基本使用 ​

预览

Show Code
vue
<template>
  <Image src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" />
</template>

多张图片预览 ​

可循环切换图片，并支持键盘 (left / right / up / down) 按键切换


image-1.jpg

预览

image-2.jpg

预览

image-3.jpg

预览

image-4.jpg

预览

image-5.jpg

预览

Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const images = ref([
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image :src="images" loop />
</template>

相册模式 ​

image-1.jpg

预览

Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const images = ref([
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image :src="images" loop album />
</template>

隐藏边框 ​

image-1.jpg

预览

image-2.jpg

预览

image-3.jpg

预览

image-4.jpg

预览

image-5.jpg

预览

Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const images = ref([
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image :bordered="false" fit="cover" :src="images" loop />
</template>

自定义样式 ​

自定义宽高；同时图片覆盖容器；预览文本设为 preview；间距设为16px


preview

Show Code
vue
<template>
  <Image :width="300" :height="300" fit="cover" :gap="16" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg">
    <template #preview>
      <p class="u-pre">preview</p>
    </template>
  </Image>
</template>

自定义预览配置 ​

更改缩放比率和最大最小缩放比例


预览

Show Code
vue
<template>
  <Image
    :zoom-ratio="0.2"
    :min-zoom-scale="0.5"
    :max-zoom-scale="2"
    src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" />
</template>

APIs ​

参数说明类型默认值必传
src图像地址 | 图像地址数组string | Image[]''true
name图像名称，没有传入图片名时自动从图像地址 src 中读取string''false
width图像宽度，单位pxstring | number300false
height图像高度，单位pxstring | number'100%'false
bordered是否显示边框booleantruefalse
gap展示图片间距大小，数组时表示: [水平间距, 垂直间距]number | number[]8false
fit图像如何适应容器高度和宽度，可选 fill(填充)、contain(等比缩放包含)、cover(等比缩放覆盖)'contain' | 'fill' | 'cover''contain'false
preview预览文本string | slot'预览'false
zoomRatio每次缩放比率number0.1false
minZoomScale最小缩放比例number0.1false
maxZoomScale最大缩放比例number10false
resetOnDbclick缩放移动旋转图片后，是否可以双击还原booleantruefalse
loop是否可以循环切换图片booleanfalsefalse
ablum是否相册模式，即从一张展示图片点开相册booleanfalsefalse

Image Type ​

名称说明类型必传
src图像地址stringtrue
name图像名称stringfalse