@wu-component/wu-image
@wu-component/wu-image
npm i @wu-component/wu-image
@wu-component/wu-image

@wu-component/wu-image

采用WebComponent方式重写ElementUI, 仓库中包含核心包以及UI组件库,包括底层逻辑npm包以及UI实现

by wu-component

1.9.24 (see all)License:ISCTypeScript:Built-In
npm i @wu-component/wu-image
Readme

Image 图片

图片容器,在保留原生img的特性下,支持懒加载,自定义占位、加载失败等。

基础用法

可通过fit确定图片如何适应到容器框,同原生 object-fit。

::: demo

<template>
    <div style="display: flex; flex-wrap: wrap; align-items: center;justify-content: space-around;padding: 16px">
        <div style="display: flex;flex-direction: column">
            <span>fill</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>contain</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="contain"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>cover</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>none</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="none"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>scale-down</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="scale-down"></wu-plus-image>
        </div>
    </div>
</template>
<script>
</script>

:::

占位内容

卡片可以只有内容区域。

::: demo

<template>
    <div style="display: flex; align-items: center;flex-wrap: wrap;justify-content: space-around;padding: 16px">
        <div style="display: flex;flex-direction: column">
            <span>默认</span>
            <wu-plus-image style="width: 300px; height: 200px" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" ></wu-plus-image>
        </div>

        <div style="display: flex;flex-direction: column">
            <span>自定义</span>
            <wu-plus-image style="width: 300px; height: 200px" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
                <div slot="placeholder" class="image-slot" style="display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                    加载中<span class="dot">...</span>
                </div>
            </wu-plus-image>
        </div>
    </div>
</template>
<script>
</script>

:::

加载失败

::: demo

<template>
    <div style="display: flex; align-items: center;flex-wrap: wrap;justify-content: space-around;padding: 16px">
        <div style="display: flex;flex-direction: column">
            <span>默认</span>
            <wu-plus-image style="width: 300px; height: 200px"></wu-plus-image>
        </div>

        <div style="display: flex;flex-direction: column">
            <span>自定义</span>
            <wu-plus-image style="width: 300px; height: 200px">
                <div slot="error" class="image-slot-error" style="display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                    <wu-plus-icon name="picture-outline" style="font-size: 24px"></wu-plus-icon>
                </div>
            </wu-plus-image>
        </div>
    </div>
</template>
<script>
</script>

:::

大图预览

可通过 previewSrcList 开启预览大图的功能。

::: demo

<template>
    <div style="display: flex; align-items: center;flex-wrap: wrap;justify-content: space-around;padding: 16px">
        <wu-plus-image preview-src-list="['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']" style="width: 300px; height: 200px" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
            <div slot="placeholder" class="image-slot" style="display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                加载中<span class="dot">...</span>
            </div>
        </wu-plus-image>
    </div>
</template>
<script>
</script>

:::

Attributes

参数说明类型可选值默认值
src图片源,同原生String--
fit确定图片如何适应容器框,同原生 object-fitStringfill、contain、cover、none、scale-down--
alt原生 altString----
z-index设置图片预览的 z-indexNumber--2000

Event

事件名说明参数
error图片加载失败触发(event: CustomEvent) => void

Slot

参数说明
placeholder占位符,一般用作图片加载中
error加载错误占位符

Downloads/wk

50

GitHub Stars

129

LAST COMMIT

4mos ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.9.24
latest
18d ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate