mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ Img组件新增属性 show-menu-by-longpress 支持微信小程序长按弹出菜单栏 (#613)
✅ Closes: #611
This commit is contained in:
不如摸鱼去
GitHub
parent
a51204b674
commit
a7fc229648
@ -8,25 +8,21 @@
|
||||
|
||||
基础用法与原生 image 标签一致，可以设置 `src` 、 `width` 、`height` 等原生属性。
|
||||
|
||||
原生属性，参考[uni-app image官方文档](https://uniapp.dcloud.net.cn/component/image.html#image)。
|
||||
原生属性，参考[uni-app image 官方文档](https://uniapp.dcloud.net.cn/component/image.html#image)。
|
||||
|
||||
此处需要注意的是src属性：
|
||||
此处需要注意的是 src 属性：
|
||||
|
||||
使用 `相对路径`，需要注意 `src` 需要以组件存放位置相对图片位置为相对路径。
|
||||
|
||||
使用 `文件导入` ，需要注意的是微信小程序image标签路径接受二进制数据以及base64编码。单独使用import图片路径无法访问。
|
||||
使用 `文件导入` ，需要注意的是微信小程序 image 标签路径接受二进制数据以及 base64 编码。单独使用 import 图片路径无法访问。
|
||||
|
||||
```html
|
||||
<wd-img
|
||||
:width="100"
|
||||
:height="100"
|
||||
:src="joy"
|
||||
/>
|
||||
<wd-img :width="100" :height="100" :src="joy" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
// import { joy } from '../images/joy'
|
||||
const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
||||
const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
||||
```
|
||||
|
||||
## 插槽
|
||||
@ -37,13 +33,11 @@ const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
||||
<template>
|
||||
<wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
|
||||
<template #error>
|
||||
<view class="error-wrap">
|
||||
加载失败
|
||||
</view>
|
||||
<view class="error-wrap">加载失败</view>
|
||||
</template>
|
||||
<template #loading>
|
||||
<view class="loading-wrap">
|
||||
<wd-loading/>
|
||||
<wd-loading />
|
||||
</view>
|
||||
</template>
|
||||
</wd-img>
|
||||
@ -73,15 +67,10 @@ const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
||||
|
||||
通过 `mode` 属性可以设置图片填充模式，可选值见下方表格。
|
||||
|
||||
mode为小程序原生属性，参考[微信小程序image官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。
|
||||
mode 为小程序原生属性，参考[微信小程序 image 官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。
|
||||
|
||||
```html
|
||||
<wd-img
|
||||
:width="100"
|
||||
:height="100"
|
||||
mode="center"
|
||||
:src="joy"
|
||||
/>
|
||||
<wd-img :width="100" :height="100" mode="center" :src="joy" />
|
||||
```
|
||||
|
||||
## 圆形设置
|
||||
@ -89,53 +78,44 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
|
||||
通过 `round` 属性可以设置以圆形展示。
|
||||
|
||||
```html
|
||||
<wd-img
|
||||
:width="100"
|
||||
:height="100"
|
||||
round
|
||||
:src="joy"
|
||||
/>
|
||||
<wd-img :width="100" :height="100" round :src="joy" />
|
||||
```
|
||||
|
||||
## 可预览
|
||||
|
||||
通过设置`enable-preview`属性可以支持点击预览，底层调用uni.previewImage来实现预览效果
|
||||
通过设置`enable-preview`属性可以支持点击预览，底层调用 uni.previewImage 来实现预览效果
|
||||
|
||||
```html
|
||||
<wd-img
|
||||
:width="100"
|
||||
:height="100"
|
||||
:src="joy"
|
||||
:enable-preview="true"
|
||||
/>
|
||||
<wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------------- | ---------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
|
||||
| src | 图片链接 | string | - | - | - |
|
||||
| width | 宽度，默认单位为px | number / string | - | - | - |
|
||||
| height | 高度，默认单位为px | number / string | - | - | - |
|
||||
| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
|
||||
| round | 是否显示为圆形 | boolean | - | false | - |
|
||||
| radius | 圆角大小，默认单位为px | number / string | - | - | - |
|
||||
| enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ---------------------- | -------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------- |
|
||||
| src | 图片链接 | string | - | - | - |
|
||||
| width | 宽度，默认单位为 px | number / string | - | - | - |
|
||||
| height | 高度，默认单位为 px | number / string | - | - | - |
|
||||
| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
|
||||
| round | 是否显示为圆形 | boolean | - | false | - |
|
||||
| radius | 圆角大小，默认单位为 px | number / string | - | - | - |
|
||||
| enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 |
|
||||
| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单，仅微信小程序支持 | boolean | - | false | $LOWEST_VERSION$ |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| -------- | -------------------- | ----------------- | -------- |
|
||||
| click | 点击事件 | (event: MouseEvent) => void | - |
|
||||
| load | 当图片载入完毕时触发 | `{height, width}` | - |
|
||||
| error | 当错误发生时触发 | `{errMsg}` | - |
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| -------- | -------------------- | --------------------------- | -------- |
|
||||
| click | 点击事件 | (event: MouseEvent) => void | - |
|
||||
| load | 当图片载入完毕时触发 | `{height, width}` | - |
|
||||
| error | 当错误发生时触发 | `{errMsg}` | - |
|
||||
|
||||
## Slots
|
||||
|
||||
| 名称 | 说明 | 最低版本 |
|
||||
| ------- | ------------------ | ---------------- |
|
||||
| loading | 图片加载时展示 | 1.2.21 |
|
||||
| error | 图片加载失败后展示 | 1.2.21 |
|
||||
| 名称 | 说明 | 最低版本 |
|
||||
| ------- | ------------------ | -------- |
|
||||
| loading | 图片加载时展示 | 1.2.21 |
|
||||
| error | 图片加载失败后展示 | 1.2.21 |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
|
||||
@ -49,5 +49,9 @@ export const imgProps = {
|
||||
/**
|
||||
* 是否允许预览
|
||||
*/
|
||||
enablePreview: makeBooleanProp(false)
|
||||
enablePreview: makeBooleanProp(false),
|
||||
/**
|
||||
* 开启长按图片显示识别小程序码菜单，仅在微信小程序平台有效
|
||||
*/
|
||||
showMenuByLongpress: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
:style="status !== 'success' ? 'width: 0;height: 0;' : ''"
|
||||
:src="src"
|
||||
:mode="mode"
|
||||
:show-menu-by-longpress="showMenuByLongpress"
|
||||
:lazy-load="lazyLoad"
|
||||
@load="handleLoad"
|
||||
@error="handleError"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user