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

feat: ✨ Img 组件添加预览图片属性 (#945)

Browse Source 
* feat(img): 添加预览图片属性

* docs: ✏️  img 组件添加 preview-src 属性
This commit is contained in:
Abigmiu 2025-03-19 19:05:15 +08:00 committed by GitHub
parent 34f02997dd
commit 34a48783f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/component/img.md
View File

@ -87,6 +87,12 @@ mode 为小程序原生属性，参考[微信小程序 image 官方文档](https
<wd-img :width="100" :height="100" :src="joy" :enable-preview="true" /> <wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
``` ```
也可以传入 `preview-src` 属性来预览另外的图片
```html
<wd-img :width="100" :height="100" :src="joy" :preview-src="img" :enable-preview="true" />
```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@ -99,6 +105,7 @@ mode 为小程序原生属性，参考[微信小程序 image 官方文档](https
| 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 | 1.3.11 | | show-menu-by-longpress | 开启长按图片显示识别小程序码菜单，仅微信小程序支持 | boolean | - | false | 1.3.11 |
| preview-src | 预览图片链接 | string | - | - | $LOWEST_VERSION$ |
## Events ## Events

7
src/pages/img/Index.vue
View File

@ -48,7 +48,12 @@
</demo-block> </demo-block>
<demo-block title="可预览"> <demo-block title="可预览">
<wd-img :width="100" :height="100" :src="joy" :enable-preview="true" /> <view class="col">
<wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
</view>
<view class="col">
<wd-img :width="100" :height="100" :src="joy" :preview-src="img" :enable-preview="true" />
</view>
</demo-block> </demo-block>
</page-wraper> </page-wraper>
</template> </template>

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

@ -22,6 +22,10 @@ export const imgProps = {
* 图片链接 * 图片链接
*/ */
src: String, src: String,
/**
* 预览图片链接
*/
previewSrc: String,
/** /**
* 是否显示为圆形 * 是否显示为圆形
*/ */

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

@ -73,7 +73,7 @@ function handleError(event: any) {
function handleClick(event: MouseEvent) { function handleClick(event: MouseEvent) {
if (props.enablePreview && props.src && status.value == 'success') { if (props.enablePreview && props.src && status.value == 'success') {
uni.previewImage({ uni.previewImage({
urls: [props.src] urls: [props.previewSrc || props.src]
}) })
} }
emit('click', event) emit('click', event)