Papayaui

Appearance

Image ​

基础用法 ​

html

<pa-image :src="src" width="200" height="200" />
ts

import src from '../../images/demo.jpeg' // 推荐使用图片链接

填充模式 ​

html

<view class="grid grid-cols-3 gap-30">
  <view v-for="mode in modeList" :key="mode">
    <pa-image :src="src" width="100%" height="27vw" :mode="mode" />
    <text class="block text-28 text-black-2 text-center">{{ mode }}</text>
  </view>
</view>
ts

import src from '../../images/demo.jpeg' // 推荐使用图片链接

const modeList = [
  'scaleToFill',
  'aspectFit',
  'aspectFill',
  'center',
  'widthFix',
  'top',
  'heightFix',
]

圆角 ​

html

<view class="grid grid-cols-3 gap-30">
  <pa-image :src="src" width="200" height="200" round />
  <pa-image :src="src" width="200" height="200" round="10" />
</view>
ts

import src from '../../images/demo.jpeg' // 推荐使用图片链接

加载中 ​

html

<view class="grid grid-cols-3 gap-30">
  <view>
    <pa-image width="100%" height="27vw" />
    <text class="block text-28 text-black-2 text-center">默认提示</text>
  </view>
  <view>
    <pa-image width="100%" height="27vw">
      <template #loading>
        <pa-loading-icon />
      </template>
    </pa-image>
    <text class="block text-28 text-black-2 text-center">自定义提示</text>
  </view>
</view>

加载失败 ​

html

<view class="grid grid-cols-3 gap-30">
  <view>
    <pa-image src="error.png" width="100%" height="27vw" />
    <text class="block text-28 text-black-2 text-center">默认提示</text>
  </view>
  <view>
    <pa-image src="error.png" width="100%" height="27vw">
      <template #error>
        <text>error</text>
      </template>
    </pa-image>
    <text class="block text-28 text-black-2 text-center">自定义提示</text>
  </view>
</view>

Image Props ​

参数说明类型默认值
src图片资源地址string''
mode图片裁剪、缩放的模式详细地址string'scaleToFill'
width宽度string | number-
height高度string | number-
round圆角boolean | string-
lazyLoad图片懒加载boolean-
webp在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。boolean-
showMenuByLongpress开启长按图片显示识别小程序码菜单boolean-

Image Event ​

事件名参数
click()

Image Slot ​

名称说明
loading-
error-

样式变量 ​

🙈