更新记录
1.0.0(2026-02-02)
下载此版本
- 支持任意图片路径
- 可自定义尺寸(rpx单位)
- 支持多种图片显示模式
- 支持点击事件
平台兼容性
uni-app(5.0)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
√ |
- |
√ |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
Image-Icon 图片图标
轻量级图片图标组件,支持自定义尺寸和图片模式。
功能特性
- 支持任意图片路径
- 可自定义尺寸(rpx单位)
- 支持多种图片显示模式
- 支持点击事件
Props
| 属性名 |
类型 |
默认值 |
说明 |
| scale |
String |
"" |
图片尺寸,单位rpx |
| url |
String |
必填 |
图片路径 |
| mode |
String |
"scaleToFill" |
图片裁剪、缩放模式 |
Events
| 事件名 |
参数 |
说明 |
| click |
Event |
点击图标时触发 |
使用示例
<template>
<ImageIcon
scale="48"
url="/static/common/search.png"
@click="handleClick"
/>
</template>
<script setup>
import ImageIcon from '@/components/Image-Icon.vue';
const handleClick = () => {
console.log('图标被点击');
};
</script>