Composed UI

Appearance

图片 Image ​

可预览的图片

何时使用 ​

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

基本使用 ​

1.jpg

预览

Show Code
vue
<template>
  <Image src="https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/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'
import type { ImageItem } from 'composed-ui'
const images = ref<ImageItem[]>([
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image :src="images" loop />
</template>

禁用预览 ​

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

自定义样式 ​

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


image-1.jpg

preview

image-2.jpg

preview

image-3.jpg

preview

image-4.jpg

preview

image-5.jpg

preview

Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { ImageItem } from 'composed-ui'
const images = ref<ImageItem[]>([
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image
    :src="images"
    :width="[100, 200, 100, 200, 100]"
    :space-props="{ width: 416 }"
    fit="cover"
    loop
  >
    <template #preview>
      <p class="preview-txt">preview</p>
    </template>
  </Image>
</template>
<style lang="less" scoped>
.preview-txt {
  display: inline-block;
  font-size: 16px;
}
</style>

自定义预览图片样式 ​

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'
import type { ImageItem } from 'composed-ui'
const images = ref<ImageItem[]>([
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image :src="images" :preview-image-style="{ background: '#fff', padding: '12px', borderRadius: '8px' }" loop />
</template>

自定义排列方式 & 加载中样式 ​

loading
image-1.jpg

预览

loading
image-2.jpg

预览

loading
image-3.jpg

预览

loading
image-4.jpg

预览

loading
image-5.jpg

预览

Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { ImageItem } from 'composed-ui'
const images = ref<ImageItem[]>([
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image
    :src="images"
    :space-props="{ width: 332, gap: 16 }"
    :spin-props="{ tip: 'loading', indicator: 'spin-line', color: '#fadb14' }"
    loop
  />
</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'
import type { ImageItem } from 'composed-ui'
const images = ref<ImageItem[]>([
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/1.jpg',
    name: 'image-1.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/2.jpg',
    name: 'image-2.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/3.jpg',
    name: 'image-3.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/4.jpg',
    name: 'image-4.jpg'
  },
  {
    src: 'https://cdn.jsdelivr.net/gh/Kitesource/resources@0.0.1/5.jpg',
    name: 'image-5.jpg'
  }
])
</script>
<template>
  <Image :src="images" :bordered="false" fit="cover" loop />
</template>

相册模式 ​

image-1.jpg

预览

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

自定义预览配置 ​

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


1.jpg

预览

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

APIs ​

Image ​

参数说明类型默认值
src图像地址或图像地址数组string | Image[]undefined
name图像名称，没有传入图片名时自动从图像地址 src 中读取stringundefined
width图像宽度，单位 pxstring | number | (string | number)[]100
height图像高度，单位 pxstring | number | (string | number)[]100
disabled是否禁用图像预览booleanfalse
bordered是否显示边框booleantrue
fit图片在容器内的的适应类型，参考 object-fit'contain' | 'fill' | 'cover' | 'none' | 'scale-down''contain'
preview预览文本string | slot'预览'
previewImageStyle自定义预览图片时 img 元素的样式CSSProperties{}
spacePropsSpace 组件属性配置，参考 Space Props，用于配置多张展示图片时的排列方式object{}
spinPropsSpin 组件属性配置，参考 Spin Props，用于配置图片加载中样式object{}
previewSpinPropsSpin 组件属性配置，参考 Spin Props，用于配置预览图片加载中样式object{}
zoomRatio每次缩放比率number0.1
minZoomScale最小缩放比例number0.1
maxZoomScale最大缩放比例number10
resetOnDbclick缩放移动旋转图片后，是否可以双击还原booleantrue
draggable是否可以拖动图片booleanfalse
loop是否可以循环切换图片booleanfalse
album是否相册模式，即从一张展示图片点开相册booleanfalse

Image Type ​

名称说明类型默认值
src图像地址stringundefined
name?图像名称stringundefined

Slots ​

名称说明类型
preview自定义预览文本v-slot:preview

Methods ​

名称说明类型
preview预览索引为 index 的图片，从 0 开始(index: number) => void

Released under the MIT License.

Copyright © 2023-present the Composed UI Team