Sard Uniapp

Appearance

在新窗口打开⤴

Image图片1.25+

介绍 ​

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

引入 ​

js
import Image from 'sard-uniapp/components/image/image.vue'

代码演示 ​

基础使用 ​

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

vue
<template>
  <sar-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
    width="160rpx"
    height="160rpx"
  />
  <sar-image src="/static/logo.png" width="160rpx" height="160rpx" />
</template>

图片模式 ​

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

vue
<template>
  <sar-grid :columns="2" gap="20rpx">
    <sar-grid-item v-for="mode in modes" :key="mode">
      <view class="image-title">{{ mode }}</view>
      <sar-image
        class="image"
        src="https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger5.jpg"
        width="240rpx"
        height="240rpx"
        :mode="mode"
      ></sar-image>
    </sar-grid-item>
  </sar-grid>
</template>

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

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(--sar-text-sm);
  margin-bottom: 8rpx;
}
.image {
  border: 1px solid var(--sar-border-color);
}
</style>
vue
<template>
  <sar-grid :columns="2" gap="20rpx">
    <sar-grid-item v-for="mode in modes" :key="mode">
      <view class="image-title">{{ mode }}</view>
      <sar-image
        class="image"
        src="https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger5.jpg"
        width="240rpx"
        height="240rpx"
        :mode="mode"
      ></sar-image>
    </sar-grid-item>
  </sar-grid>
</template>

<script setup lang="js">
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(--sar-text-sm);
  margin-bottom: 8rpx;
}
.image {
  border: 1px solid var(--sar-border-color);
}
</style>

图片形状 ​

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

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

  <sar-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
    width="160rpx"
    height="160rpx"
    radius="12rpx"
    class="ml-10"
  ></sar-image>
</template>

懒加载 ​

设置 lazy-load 属性可懒加载图片，仅小程序支持。

vue
<template>
  <sar-image
    src="https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg"
    width="160rpx"
    height="160rpx"
    lazy-load
  ></sar-image>
</template>

加载中提示 ​

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

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

  <view style="height: 320rpx; margin-top: 20rpx">
    <sar-image
      v-if="src"
      :src="src"
      width="320rpx"
      height="320rpx"
      :custom-load="customLoad"
    ></sar-image>
    <sar-image
      v-if="src"
      :src="src"
      width="320rpx"
      height="320rpx"
      class="ml-10"
      :custom-load="customLoad"
    >
      <template #loading>
        <text class="text-sm">加载中...</text>
      </template>
    </sar-image>
  </view>
</template>

<script setup lang="ts">
import { sleep } from 'sard-uniapp'
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({
    detail: {
      width: 640,
      height: 427,
    },
  })
}
</script>
vue
<template>
  <sar-segmented v-model="src" :options="options" />

  <view style="height: 320rpx; margin-top: 20rpx">
    <sar-image
      v-if="src"
      :src="src"
      width="320rpx"
      height="320rpx"
      :custom-load="customLoad"
    ></sar-image>
    <sar-image
      v-if="src"
      :src="src"
      width="320rpx"
      height="320rpx"
      class="ml-10"
      :custom-load="customLoad"
    >
      <template #loading>
        <text class="text-sm">加载中...</text>
      </template>
    </sar-image>
  </view>
</template>

<script setup lang="js">
import { sleep } from "sard-uniapp";
import { ref } from "vue";
const src = ref("");
const options = [
  { label: "\u9500\u6BC1\u56FE\u7247", value: "" },
  {
    label: "\u52A0\u8F7D\u56FE\u7247",
    value: "https://fastly.jsdelivr.net/npm/@sard/assets/images/tiger1.jpg"
  }
];
const customLoad = async (callback) => {
  await sleep(1e3);
  callback({
    detail: {
      width: 640,
      height: 427
    }
  });
};
</script>

加载错误提示 ​

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

vue
<template>
  <sar-image
    src="https://fastly.jsdelivr.net/nonexistent.jpg"
    width="240rpx"
    height="240rpx"
  ></sar-image>
  <sar-image
    src="https://fastly.jsdelivr.net/nonexistent.jpg"
    width="240rpx"
    height="240rpx"
    class="ml-10"
  >
    <template #error>
      <text class="text-sm">加载失败</text>
    </template>
  </sar-image>
</template>

淡入动画 ​

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

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

  <view style="height: 320rpx; margin-top: 20rpx">
    <sar-image v-if="src" :src="src" width="320rpx" height="320rpx"></sar-image>

    <sar-image
      v-if="src"
      :src="src"
      width="320rpx"
      height="320rpx"
      class="ml-10"
      :fade="false"
    ></sar-image>
  </view>
</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>
  <sar-segmented v-model="src" :options="options" />

  <view style="height: 320rpx; margin-top: 20rpx">
    <sar-image v-if="src" :src="src" width="320rpx" height="320rpx"></sar-image>

    <sar-image
      v-if="src"
      :src="src"
      width="320rpx"
      height="320rpx"
      class="ml-10"
      :fade="false"
    ></sar-image>
  </view>
</template>

<script setup lang="js">
import { ref } from "vue";
const src = ref("");
const options = [
  { label: "\u9500\u6BC1\u56FE\u7247", value: "" },
  {
    label: "\u52A0\u8F7D\u56FE\u7247",
    value: "https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg"
  }
];
</script>

API ​

ImageProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
src图片资源地址string-
mode图片资源地址'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right''aspectFill'
lazy-load图片懒加载booleanfalse
fade是否需要淡入效果booleantrue
webp在系统不支持webp的情况下是否单独启用webpbooleanfalse
show-menu-by-longpress开启长按图片显示识别小程序码菜单booleantrue
width图片宽度string'320px'
height图片高度string'240px'
shape图片形状'circle' | 'square''square'
radius图片圆角string-
loading-icon加载中的图标string'image'
error-icon加载失败的图标string'image-error'
icon-family图标族string'sari'
show-loading是否显示加载中的图标或者自定义的插槽booleantrue
show-error是否显示加载失败的图标或者自定义的插槽booleantrue
background图片背景颜色string-

ImageSlots ​

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

ImageEmits ​

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

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-image-bg: var(--sar-secondary-bg);
  --sar-image-width: 320px;
  --sar-image-height: 240px;
  --sar-image-loading-font-size: 48rpx;
  --sar-image-loading-color: var(--sar-fourth-color);
  --sar-image-error-font-size: 48rpx;
  --sar-image-error-color: var(--sar-fourth-color);
  --sar-image-fade-duration: var(--sar-duration-slow);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao