更新记录

0.0.4（2023-05-22）

• chore: vue2

0.0.3（2023-05-15）

• chore: 字节

0.0.2（2023-05-08）

• chore: 更新

平台兼容性

lime-image 图片 加强版

• 对内置image组件加强功能
• 基于uniapp vue3
• Q群 1169785031

说明

本插件在原来的image组件上，增加如下功能：

• UI加载状态：加载中，加载失败
• vue3 nvue 支持svg，不支持vue2 nvue，因vue2 nvue不支持TS

安装

• 在市场导入插件即可在任意页面使用，无须再import

使用

• 提供简单的使用示例，更多请查看下方的demo

// mode
<l-image mode="widthFix" src="https://picsum.photos/200/300?random=lime" />

状态

// 自定义加载状态
<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: 有round，circle，square

// 自定义加载状态
<l-image shape="round" src="https://picsum.photos/200/300?random=lime"></l-image>

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-image/compoents/lime-image 
<lime-image />

插件标签

• 默认 l-image 为 component
• 默认 lime-image 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可,官方是把它单独成了一个文件.

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

另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
 - or - 
npm install typescript -D

API

Props

• 所有内置的props与原组件一致
• 所以就不细列出

Events

Expose

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。