LimeUI+1.2.0

主题

LimeImage 图片加强版 ​

在原来的image组件基础上，增加了UI加载状态（加载中、加载失败）和图片形状等功能，提供了更好的用户体验和更丰富的展示效果。

插件依赖：lime-shared

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-image
  2. 导入后可以在任意页面使用
  3. 在页面中使用l-image组件（组件）或lime-image（演示）

注意🔔

本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用，若不需要删除即可

代码演示 ​

基础使用 ​

使用方式与原生image组件类似，支持所有原生image的属性。

html
<l-image mode="widthFix" src="https://picsum.photos/200/300?random=lime" />
js
export default {
  data() {
    return {
      // 示例数据
    }
  },
  methods: {
    onImageLoad(event) {
      console.log('图片加载成功', event);
    },
    onImageError(event) {
      console.log('图片加载失败', event);
    }
  }
}

自定义加载状态 ​

可以通过插槽自定义加载中和加载失败的状态显示。

html
<l-image mode="widthFix" src="https://picsum.photos/200/300?random=lime">
  <template #loading>
    <text>加载中...</text>
  </template>
  <template #error>
    <text>加载失败</text>
  </template>
</l-image>

图片形状 ​

通过shape属性可以设置图片的形状，支持square(方形)、round(圆角)、circle(圆形)。

html
<!-- 方形图片（默认） -->
<l-image shape="square" src="https://picsum.photos/200/300?random=lime1" />

<!-- 圆角图片 -->
<l-image shape="round" src="https://picsum.photos/200/300?random=lime2" />

<!-- 圆形图片 -->
<l-image shape="circle" src="https://picsum.photos/200/300?random=lime3" />

设置尺寸 ​

可以通过width和height属性设置图片的尺寸。

html
<l-image width="200" height="150" src="https://picsum.photos/200/300?random=lime" />

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-image/components/lime-image -->
<lime-image />

Vue2使用说明 ​

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档 ​

Props ​

组件支持所有内置image组件的属性，以下是额外增强的属性：

参数说明类型默认值
src图片地址string-
mode图片裁剪、缩放的模式，同原生image组件string-
shape图片形状：square(方形)、round(圆角)、circle(圆形)stringsquare
width图片宽度number-
height图片高度number-
lazy-load是否懒加载booleanfalse
fade-show是否淡入显示booleanfalse
webp是否优先使用webp格式booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

Events ​

事件名说明回调参数
load图片加载成功时触发event: { detail: object }
error图片加载失败时触发event: { detail: object }

Slots ​

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

常用图片模式说明 ​

模式说明
scaleToFill不保持纵横比缩放图片，使图片完全适应宽高限制
aspectFit保持纵横比缩放图片，使图片的长边完全显示出来
aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix宽度不变，高度自动变化，保持原图宽高比不变
heightFix高度不变，宽度自动变化，保持原图宽高比不变
top不缩放图片，只显示图片的顶部区域
bottom不缩放图片，只显示图片的底部区域
center不缩放图片，只显示图片的中间区域
left不缩放图片，只显示图片的左边区域
right不缩放图片，只显示图片的右边区域
top left不缩放图片，只显示图片的左上边区域
top right不缩放图片，只显示图片的右上边区域
bottom left不缩放图片，只显示图片的左下边区域
bottom right不缩放图片，只显示图片的右下边区域

主题定制 ​

组件提供了CSS变量，可以通过自定义CSS变量来自定义组件样式：

变量名称默认值描述
--l-image-color$text-color-3图片组件的默认颜色（用于加载和错误状态）
--l-image-loading-bg-color$fill-3图片加载时的背景颜色
--l-image-loading-color$text-color-4加载动画的颜色(uniappx app无效)
--l-image-round-radius$border-radius圆角图片的圆角半径
--l-image-circle-radius$border-radius-hg圆形图片的圆角半径

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码