Rainui

Appearance

r-image ​

增强版的 image vue3组件，支持图片懒加载、加载中提示、加载失败提示。

示例 ​

vue
<template>
  <r-config-provider :themeName="themeName">
    <page-header title="图片"></page-header>
    <view style="padding: 20rpx">
      <r-divider content-position="left">基础使用</r-divider>
      <r-image
        width="200rpx"
        height="200rpx"
        src="https://mp-ba18cd8e-6818-4b52-a63d-2ce352e908bd.cdn.bspapp.com/cloudstorage/test.jpg"
      />
      <r-divider content-position="left">填充模式 </r-divider>
      <r-cell-group inset>
        <r-field name="checkbox" label="缩放模式">
          <template #input>
            <r-radio-group v-model:value="radio" direction="horizontal">
              <r-radio
                :name="item.id"
                v-for="item in modes.filter((t, index) => index < 5)"
                :key="item.id"
                >{{ item.value }}</r-radio
              >
            </r-radio-group>
          </template>
        </r-field>
        <r-field name="checkbox" label="裁剪模式">
          <template #input>
            <r-radio-group v-model:value="radio" direction="horizontal">
              <r-radio
                :name="item.id"
                v-for="item in modes.filter((t, index) => index >= 5)"
                :key="item.id"
                >{{ item.value }}</r-radio
              >
            </r-radio-group>
          </template>
        </r-field>

        <r-image
          :mode="mode"
          width="200rpx"
          height="200rpx"
          src="https://mp-ba18cd8e-6818-4b52-a63d-2ce352e908bd.cdn.bspapp.com/cloudstorage/test.jpg"
        />
      </r-cell-group>

      <r-divider content-position="left">圆形图片 </r-divider>
      <r-image
        round
        width="200rpx"
        height="200rpx"
        src="https://mp-ba18cd8e-6818-4b52-a63d-2ce352e908bd.cdn.bspapp.com/cloudstorage/test.jpg"
      />

      <r-divider content-position="left">加载中提示 </r-divider>
      <r-image
        width="200rpx"
        height="200rpx"
        src="https://mp-ba18cd8e-6818-4b52-a63d-2ce352e908bd.cdn.bspapp.com/cloudstorage/test.jpg"
      >
        <template v-slot:loading>
          <r-loading type="spinner" size="20" />
        </template>
      </r-image>

      <r-divider content-position="left">加载失败提示 </r-divider>
      <r-image
        src="https://mp-ba18cd8e-6818-4b52-a63d-2ce352e908bd.cdn.bspapp.com/cloudstorage/test.jp"
      >
        <template v-slot:error>加载失败</template>
      </r-image>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
import { _ } from "@/uni_modules/r-utils/js_sdk/index.js";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const { uniqueId } = _;

const modes = ref(
  [
    "scaleToFill",
    "aspectFit",
    "aspectFill",
    "widthFix",
    "heightFix",
    "top",
    "bottom",
    "center",
    "left",
    "right",
    "top left",
    "top right",
    "bottom left",
    "bottom right	",
  ].map((t) => ({
    id: uniqueId(),
    value: t,
  }))
);
const radio = ref(modes.value[0].id);
const mode = computed(() => {
  return modes.value.find((t) => t.id == radio.value).value;
});
</script>

API ​

Props ​

名称说明类型默认值可选值
entryClass入场动画Stringanimate__fadeIn更多查看animate.css
exitClass退场动画Stringanimate__fadeOut更多查看animate.css
duration持续时间Number1000
delay延迟时间Number0
customStyle自定义样式Object{}
customClass自定义类名String
src图片资源地址String
mode图片裁剪、缩放的模式StringscaleToFillscaleToFill aspectFit aspectFill widthFix heightFix top bottom center left right top left top right bottom left bottom right
lazyLoad图片懒加载。只针对 page 与 scroll-view 下的 image 有效 微信小程序、百度小程序、抖音小程序、飞书小程序有效Booleanfalse
customStyle自定义样式Object{}
width宽度String
height高度String
round是否显示为圆形Booleanfalse
radius圆角大小String
block是否将根节点设置为块级元素，默认情况下为 inline-block 元素Booleantrue
showError是否展示图片加载失败提示Booleantrue
showLoading是否展示图片加载中提示Booleantrue
errorIcon失败时提示的图标名称或图片链接，等同于 r-icon 组件的 name 属性Stringicon-warning-circle
loadingIcon加载时提示的图标名称或图片链接，等同于 r-icon 组件的 name 属性Stringicon-image
iconSize加载图标和失败图标的大小String64rpx
iconPrefix图标类名前缀，等同于 r-icon 组件的 prefix 属性Stringiconfontvan-icon
iconColor图标颜色String
themeNamer-theme 主题名称Stringdefault

Slots ​

名称说明
error自定义加载失败时的提示内容
loading自定义加载中的提示内容

Event ​

名称说明
click点击时触发

更多组件，请前往rainui