Sard

Appearance

100%
在新窗口打开⤴

Image图片

介绍 ​

image 组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。

代码演示 ​

基础使用 ​

配置图片的 width 宽和 height 高，以及 src 路径即可使用。

vue
<template>
  <s-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
    width="80px"
    height="80px"
  />
  <s-image :src="logo" width="80px" height="80px" />
</template>

<script setup lang="ts">
import logo from '@/assets/logo.png'
</script>
vue
<template>
  <s-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
    width="80px"
    height="80px"
  />
  <s-image :src="logo" width="80px" height="80px" />
</template>

<script setup lang="js">
import logo from '@/assets/logo.png'
</script>

图片模式 ​

使用 mode 设置图片裁剪、缩放的模式。

vue
<template>
  <s-grid :columns="2" :gap="10" bordered>
    <s-grid-item v-for="mode in modes" :key="mode">
      <template #content>
        <div class="image-title">{{ mode }}</div>
        <s-image
          class="image"
          src="https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger5.jpg"
          width="120px"
          height="120px"
          :mode="mode"
        ></s-image>
      </template>
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { type ImageProps } from 'sard'

const modes: ImageProps['mode'][] = [
  'aspectFit',
  'aspectFill',
  'scaleToFill',
  'widthFix',
  'heightFix',
  'top',
  'bottom',
  'left',
  'right',
  'center',
  'top left',
  'top right',
  'bottom left',
  'bottom right',
]
</script>

<style lang="scss" scoped>
.image-title {
  font-size: var(--s-font-size-sm);
  margin-bottom: 4px;
}
.image {
  border: 1px solid var(--s-border-color);
}
</style>
vue
<template>
  <s-grid :columns="2" :gap="10" bordered>
    <s-grid-item v-for="mode in modes" :key="mode">
      <template #content>
        <div class="image-title">{{ mode }}</div>
        <s-image
          class="image"
          src="https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger5.jpg"
          width="120px"
          height="120px"
          :mode="mode"
        ></s-image>
      </template>
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import 'sard'
const modes = [
  'aspectFit',
  'aspectFill',
  'scaleToFill',
  'widthFix',
  'heightFix',
  'top',
  'bottom',
  'left',
  'right',
  'center',
  'top left',
  'top right',
  'bottom left',
  'bottom right',
]
</script>

<style lang="scss" scoped>
.image-title {
  font-size: var(--s-font-size-sm);
  margin-bottom: 4px;
}
.image {
  border: 1px solid var(--s-border-color);
}
</style>

图片形状 ​

通过 shape 参数设置图片的形状，circle 为圆形，square 为方形 如果为方形时，还可以通过 radius 属性设置圆角值。

vue
<template>
  <s-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
    width="80px"
    height="80px"
    shape="circle"
  ></s-image>

  <s-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
    width="80px"
    height="80px"
    radius="6px"
    class="ms-2"
  ></s-image>
</template>

懒加载 ​

设置 loading 属性为 lazy 可懒加载图片。

vue
<template>
  <s-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg"
    width="80px"
    height="80px"
    loading="lazy"
  ></s-image>
</template>

加载中提示 ​

加载时会显示默认的加载图标，可使用 show-loading 设置是否显示加载中图标，也可以使用 loading 插槽自定义加载内容。

vue
<template>
  <s-segmented v-model="src" :options="options" />

  <div style="height: 160px; margin-top: 10px">
    <s-image v-if="src" :src="src" width="160px" height="160px" :custom-load="customLoad"></s-image>
    <s-image
      v-if="src"
      :src="src"
      width="160px"
      height="160px"
      class="ms-2"
      :custom-load="customLoad"
    >
      <template #loading>
        <span class="text-sm">加载中...</span>
      </template>
    </s-image>
  </div>
</template>

<script setup lang="ts">
import { sleep } from 'sard'
import { ref } from 'vue'

const src = ref('')

const options = [
  { label: '销毁图片', value: '' },
  {
    label: '加载图片',
    value: 'https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger1.jpg',
  },
]

const customLoad = async (callback: any) => {
  await sleep(1000)
  callback()
}
</script>
vue
<template>
  <s-segmented v-model="src" :options="options" />

  <div style="height: 160px; margin-top: 10px">
    <s-image v-if="src" :src="src" width="160px" height="160px" :custom-load="customLoad"></s-image>
    <s-image
      v-if="src"
      :src="src"
      width="160px"
      height="160px"
      class="ms-2"
      :custom-load="customLoad"
    >
      <template #loading>
        <span class="text-sm">加载中...</span>
      </template>
    </s-image>
  </div>
</template>

<script setup lang="js">
import { sleep } from 'sard'
import { ref } from 'vue'
const src = ref('')
const options = [
  {
    label: '销毁图片',
    value: '',
  },
  {
    label: '加载图片',
    value: 'https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger1.jpg',
  },
]
const customLoad = async (callback) => {
  await sleep(1e3)
  callback()
}
</script>

加载错误提示 ​

加载失败时会显示默认的失败图标，可使用 show-error 设置是否显示加载失败图标，也可以使用 error 插槽自定义加载失败内容。

vue
<template>
  <s-image src="https://fastly.jsdelivr.net/nonexistent.jpg" width="120px" height="120px"></s-image>
  <s-image
    src="https://fastly.jsdelivr.net/nonexistent.jpg"
    width="120px"
    height="120px"
    class="ms-2"
  >
    <template #error>
      <span class="text-sm">加载失败</span>
    </template>
  </s-image>
</template>

淡入动画 ​

组件自带了加载完成时的淡入动画效果，通过 fade 属性配置是否开启动画效果。

vue
<template>
  <s-segmented v-model="src" :options="options" />

  <div style="height: 160px; margin-top: 10px">
    <s-image v-if="src" :src="src" width="160px" height="160px"></s-image>

    <s-image
      v-if="src"
      :src="src"
      width="160px"
      height="160px"
      class="ms-2"
      :fade="false"
    ></s-image>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const src = ref('')

const options = [
  { label: '销毁图片', value: '' },
  {
    label: '加载图片',
    value: 'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg',
  },
]
</script>
vue
<template>
  <s-segmented v-model="src" :options="options" />

  <div style="height: 160px; margin-top: 10px">
    <s-image v-if="src" :src="src" width="160px" height="160px"></s-image>

    <s-image
      v-if="src"
      :src="src"
      width="160px"
      height="160px"
      class="ms-2"
      :fade="false"
    ></s-image>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
const src = ref('')
const options = [
  {
    label: '销毁图片',
    value: '',
  },
  {
    label: '加载图片',
    value: 'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg',
  },
]
</script>

API ​

ImageProps ​

属性描述类型默认值
src图片资源地址string-
mode图片裁剪、缩放模式'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right''aspectFill'
loading图片加载方式'eager' | 'lazy''eager'
fade是否需要淡入效果booleantrue
width图片宽度string-
height图片高度string-
shape图片形状'circle' | 'square''square'
radius图片圆角string-
show-loading是否显示加载中的图标或者自定义的插槽booleantrue
show-error是否显示加载失败的图标或者自定义的插槽booleantrue
background图片背景颜色string-
custom-load自定义加载图片的方法(callback: (event: Event) => void) => any-

ImageSlots ​

插槽描述属性
loading自定义加载中的内容-
error自定义加载失败的内容-

ImageEmits ​

事件描述类型
click点击图片时触发(event: MouseEvent) => void
load图片加载成功时触发(event: Event) => void
error图片加载失败时触发(event: Event) => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-image-bgvar(--s-fill-color-tertiary)
--s-image-width320px
--s-image-height240px
--s-image-loading-font-sizevar(--s-size-xl)
--s-image-loading-colorvar(--s-text-color-fourth)
--s-image-error-font-sizevar(--s-size-xl)
--s-image-error-colorvar(--s-text-color-fourth)
--s-image-durationvar(--s-duration-slow)

Released under the MIT License.

Copyright © 2023-present wuzhitao