admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-08 01:58:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Img组件新增属性 show-menu-by-longpress 支持微信小程序长按弹出菜单栏 (#613)

Browse Source 
✅ Closes: #611
This commit is contained in:
不如摸鱼去 2024-09-20 10:12:52 +08:00 committed by GitHub
parent a51204b674
commit a7fc229648
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/component/img.md
View File

@ -17,11 +17,7 @@
使用 `文件导入` ，需要注意的是微信小程序 image 标签路径接受二进制数据以及 base64 编码。单独使用 import 图片路径无法访问。 使用 `文件导入` ，需要注意的是微信小程序 image 标签路径接受二进制数据以及 base64 编码。单独使用 import 图片路径无法访问。
```html ```html
<wd-img <wd-img :width="100" :height="100" :src="joy" />
:width="100"
:height="100"
:src="joy"
/>
``` ```
```typescript ```typescript
@ -37,9 +33,7 @@ const joy = 'data:image/jpeg;base64,...' // 图片文件base64
<template> <template>
<wd-img :width="100" :height="100" src="https://www.123.com/a.jpg"> <wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
<template #error> <template #error>
<view class="error-wrap"> <view class="error-wrap">加载失败</view>
加载失败
</view>
</template> </template>
<template #loading> <template #loading>
<view class="loading-wrap"> <view class="loading-wrap">
@ -76,12 +70,7 @@ const joy = 'data:image/jpeg;base64,...' // 图片文件base64
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 ```html
<wd-img <wd-img :width="100" :height="100" mode="center" :src="joy" />
:width="100"
:height="100"
mode="center"
:src="joy"
/>
``` ```
## 圆形设置 ## 圆形设置
@ -89,12 +78,7 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
通过 `round` 属性可以设置以圆形展示。 通过 `round` 属性可以设置以圆形展示。
```html ```html
<wd-img <wd-img :width="100" :height="100" round :src="joy" />
:width="100"
:height="100"
round
:src="joy"
/>
``` ```
## 可预览 ## 可预览
@ -102,18 +86,13 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
通过设置`enable-preview`属性可以支持点击预览，底层调用 uni.previewImage 来实现预览效果 通过设置`enable-preview`属性可以支持点击预览，底层调用 uni.previewImage 来实现预览效果
```html ```html
<wd-img <wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
:width="100"
:height="100"
:src="joy"
:enable-preview="true"
/>
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------------- | ---------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | | ---------------------- | -------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------- |
| src | 图片链接 | string | - | - | - | | src | 图片链接 | string | - | - | - |
| width | 宽度，默认单位为 px | number / string | - | - | - | | width | 宽度，默认单位为 px | number / string | - | - | - |
| height | 高度，默认单位为 px | number / string | - | - | - | | height | 高度，默认单位为 px | number / string | - | - | - |
@ -121,11 +100,12 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
| round | 是否显示为圆形 | boolean | - | false | - | | round | 是否显示为圆形 | boolean | - | false | - |
| radius | 圆角大小，默认单位为 px | number / string | - | - | - | | radius | 圆角大小，默认单位为 px | number / string | - | - | - |
| enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 | | enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 |
| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单，仅微信小程序支持 | boolean | - | false | $LOWEST_VERSION$ |
## Events ## Events
| 事件名称 | 说明 | 参数 | 最低版本 | | 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------------- | ----------------- | -------- | | -------- | -------------------- | --------------------------- | -------- |
| click | 点击事件 | (event: MouseEvent) => void | - | | click | 点击事件 | (event: MouseEvent) => void | - |
| load | 当图片载入完毕时触发 | `{height, width}` | - | | load | 当图片载入完毕时触发 | `{height, width}` | - |
| error | 当错误发生时触发 | `{errMsg}` | - | | error | 当错误发生时触发 | `{errMsg}` | - |
@ -133,7 +113,7 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
## Slots ## Slots
| 名称 | 说明 | 最低版本 | | 名称 | 说明 | 最低版本 |
| ------- | ------------------ | ---------------- | | ------- | ------------------ | -------- |
| loading | 图片加载时展示 | 1.2.21 | | loading | 图片加载时展示 | 1.2.21 |
| error | 图片加载失败后展示 | 1.2.21 | | error | 图片加载失败后展示 | 1.2.21 |

6
src/uni_modules/wot-design-uni/components/wd-img/types.ts
View File

@ -49,5 +49,9 @@ export const imgProps = {
/** /**
* 是否允许预览 * 是否允许预览
*/ */
enablePreview: makeBooleanProp(false) enablePreview: makeBooleanProp(false),
/**
* 开启长按图片显示识别小程序码菜单，仅在微信小程序平台有效
*/
showMenuByLongpress: makeBooleanProp(false)
} }

1
src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue
View File

@ -5,6 +5,7 @@
:style="status !== 'success' ? 'width: 0;height: 0;' : ''" :style="status !== 'success' ? 'width: 0;height: 0;' : ''"
:src="src" :src="src"
:mode="mode" :mode="mode"
:show-menu-by-longpress="showMenuByLongpress"
:lazy-load="lazyLoad" :lazy-load="lazyLoad"
@load="handleLoad" @load="handleLoad"
@error="handleError" @error="handleError"