mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-08 01:58:52 +08:00
feat: ✨ Img组件新增属性 show-menu-by-longpress 支持微信小程序长按弹出菜单栏 (#613)
✅ Closes: #611
This commit is contained in:
不如摸鱼去
GitHub
parent
a51204b674
commit
a7fc229648
@ -8,20 +8,16 @@
|
|||||||
|
|
||||||
基础用法与原生 image 标签一致，可以设置 `src` 、 `width` 、`height` 等原生属性。
|
基础用法与原生 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` 需要以组件存放位置相对图片位置为相对路径。
|
使用 `相对路径`，需要注意 `src` 需要以组件存放位置相对图片位置为相对路径。
|
||||||
|
|
||||||
使用 `文件导入` ，需要注意的是微信小程序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,13 +33,11 @@ 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">
|
||||||
<wd-loading/>
|
<wd-loading />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</wd-img>
|
</wd-img>
|
||||||
@ -73,15 +67,10 @@ const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
|||||||
|
|
||||||
通过 `mode` 属性可以设置图片填充模式，可选值见下方表格。
|
通过 `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
|
```html
|
||||||
<wd-img
|
<wd-img :width="100" :height="100" mode="center" :src="joy" />
|
||||||
:width="100"
|
|
||||||
:height="100"
|
|
||||||
mode="center"
|
|
||||||
:src="joy"
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 圆形设置
|
## 圆形设置
|
||||||
@ -89,43 +78,34 @@ 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"
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 可预览
|
## 可预览
|
||||||
|
|
||||||
通过设置`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 | - | - | - |
|
||||||
| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
|
| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
|
||||||
| 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 |
|
||||||
|
|
||||||
|
|||||||
@ -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;' : ''"
|
: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"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user