云墨UI

Appearance

Image 图片 ​

基础用法 ​

可以使用fit属性来指定如何调整图片尺寸，src属性来指定图片的来源。使用alt属性来指定图片的替代文本。

fill

加载中...

contain

加载中...

cover

加载中...

none

加载中...

scale-down

加载中... 

<template>
    <div class="container">
        <div class="item">
            <h4>fill</h4>
            <ym-image :src="src"  fit="fill" style="width:100px;height:100px"></ym-image>
        </div>
        <div class="item">
            <h4>contain</h4>
            <ym-image :src="src"  fit="contain" style="width:100px;height:100px"></ym-image>
        </div>
        <div class="item">
            <h4>cover</h4>
            <ym-image :src="src"  fit="cover" style="width:100px;height:100px"></ym-image>
        </div>
        <div class="item">
            <h4>none</h4>
            <ym-image :src="src"  fit="none" style="width:100px;height:100px"></ym-image>
        </div>
        <div class="item">
            <h4>scale-down</h4>
            <ym-image :src="src"  fit="scale-down" style="width:100px;height:100px"></ym-image>
        </div>
    </div>
</template>

<script setup lang="ts">

const src = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
</script>

<style scoped>
.container  {
    display: flex;
    flex-wrap: wrap;
}
.item {
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

</style>

占位内容 ​

可以使用placeholder属性来指定图片加载时的占位内容。可以使用error属性来指定图片加载失败时的占位内容。

loading

error

加载中... 

<template>
    <div class="container">
        <div class="item">
            <h4>loading</h4>
            <ym-image :src="src" fit="cover"  style="width:250px;height:120px">
                <template #loading>
                    <ym-icon icon="spinner" spin ></ym-icon>
                </template>
            </ym-image>
        </div>
        <div class="item">
            <h4>error</h4>
            <ym-image :src="src2"  style="width:250px;height:120px">
                <template #error>
                    <ym-icon icon="exclamation-triangle" size="2x" ></ym-icon>
                </template>
            </ym-image>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const src = ref("")
const src1 = "https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg"
const src2 = "https://haowallpaper.com/link/common/file/getCroppingIdsmg/15424390782292288"
setTimeout(() => {
    src.value = src1
},2000)
</script>

<style scoped>
.container  {
    display: flex;
    flex-wrap: wrap;
}
.item {
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

</style>

懒加载 ​

可以使用lazy属性来指定图片是否懒加载。懒加载的图片会在滚动到可视区域时加载。默认可视区域是整个视口，可以通过scrollContainer属性来指定滚动容器,该属性可以是一个DOM元素或者是一个选择器字符串。 同时也可以使用loading属性来指定图片加载的模式，与原生的loading属性相同。

加载中...
加载中...
加载中...
加载中...
加载中... 

<template>
    <div class="container lazy" ref="containerRef">
  
        <div class="item" v-for="(item,index) in srcList" :key="item">
            <ym-image @load="load(index)" :src="item"  fit="contain" lazy :scrollContainer="containerRef" style="height: 400px;"></ym-image>
        </div>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref , onMounted } from 'vue'
  import { YmMessage } from 'guyan-ym-ui';

  const containerRef = ref<any>()
  
  const srcList = [
    "https://jeek-space-blog.top:3000/images/article/ab93e2fb1e216541d1aeb751600909f2.jpeg",
    "https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg",
    "https://jeek-space-blog.top:3000/images/article/43b9c7996880bc8e02858997790e15f7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/ea6e433dd3c1e06527b6ac05e76d1677.jpeg",
    "https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg"
  ]
  
  onMounted(() => {
    console.log(containerRef.value)
  })

  const load = (index: any) => {
    YmMessage.success(`第${index + 1}张图片加载完成`)
  }
  </script>
  
  <style scoped>
  .container  {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 400px;
    overflow-y: scroll;
    gap: 10px;
  }
  .item {
    width: 100%;
    
  }
  
  </style>

图片预览 ​

可以使用previewSrcList属性来指定预览的图片列表。使用initialIndex指定预览的初始索引。使用closeOnClickModal属性来指定是否点击遮罩层关闭预览。

TIP

注意：图片预览效果使用了image-viewer组件，其他具体用法可参考image-viewer组件文档。

加载中...
加载中...
加载中...
加载中...
加载中...
加载中... 

<template>
    <div class="container lazy" >
        <div class="item" v-for="(item,index) in srcList" :key="item">
            <ym-image preview :src="item"  fit="contain" :initialIndex="index" :previewSrcList="srcList"></ym-image>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref , onMounted } from 'vue'
  
  const containerRef = ref<any>()
  
  const srcList = [
    "https://jeek-space-blog.top:3000/images/article/ab93e2fb1e216541d1aeb751600909f2.jpeg",
    "https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg",
    "https://jeek-space-blog.top:3000/images/article/43b9c7996880bc8e02858997790e15f7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/ea6e433dd3c1e06527b6ac05e76d1677.jpeg",
    "https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/94ba620bf0f1e5b65e5f4889a88d8fba.png"
  ]
  
  onMounted(() => {
    console.log(containerRef.value)
  })
  </script>
  
  <style scoped>
  .container  {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .item {
   width: 30%;
  }
  
  </style>

Image API ​

Props ​

NameDescriptionTypeDefault
src图片地址string(必须)
fit图片填充方式enum-'fill' | 'contain' | 'cover' | 'none' | 'scale-down'fill
alt图片的替代文本string-
lazy是否懒加载booleanfalse
scrollContainer滚动容器string | HTMLElement-
loading图片加载的模式string-
previewSrcList预览的图片列表string[]-
initialIndex预览的初始索引number0
closeOnClickModal是否点击遮罩层关闭预览booleanfalse
closeOnPressEscape是否按下ESC键关闭预览booleanfalse
zoomRate缩放比例number1.1
minScale最小缩放比例number0.1
maxScale最大缩放比例number3

Events ​

NameDescriptionType
load图片加载完成时触发(e: Event) => void
error图片加载失败时触发(e: Event) => void
close预览关闭时触发(e: Event) => void
open预览打开时触发(e: Event) => void
switch预览图片切换时触发(e: Event) => void

Slots ​

NameDescriptionSub Component
error加载失败的内容-
loading加载中的内容-