pmage v0.3.1

pmage

这是一个适用于VUE3的渐进式图片加载插件！

pmage 即 Progressive Image ，它可以帮您：实现从高斯模糊的缩略图到原图的平缓过渡，改善用户体验。

原理：缩略图会被优先下载，使用户先看到一张高斯模糊的缩略图；当原图加载完成时，再平滑过渡到高清图片，这便是渐进加载。

安装

npm install pmage --save

引入

全局引入

import { createApp } from 'vue'
import App from './App.vue'

import pmage from 'pmage' // 引入pmage
import 'pmage/dist/style.css' // 引入样式文件

const app = createApp(App)

app.use(pmage, {
	blur: 10, // 模糊像素(px)，默认为10
	scale: 1.2, // 缩放倍数，默认为1.2
	time: 0.5, // 动画持续时间(s)，默认为0.5
	animation: true, // 是否启用动画，默认为true
	delay: 1000 // 延时(ms)，默认为0
});

app.mount('#app')

请注意，全局配置的属性，会被组件上的Props覆盖。

按需引入

import { pmage } from 'pmage' // 引入pmage
import 'pmage/dist/style.css' // 引入样式文件

使用

最简引用

<pmage src="https://ftp.bmp.ovh/imgs/2021/04/b3a70da0fa596920.jpeg" />

全部能力

<template>
	<pmage
		:placeholder="'https://ftp.bmp.ovh/imgs/2021/04/c7a9451f12cb70ce.jpg'"
		:src="'https://ftp.bmp.ovh/imgs/2021/04/b3a70da0fa596920.jpeg'"
		:animation="true"
		:blur="10"
		:scale="1.2"
		:time="0.5"
		:delay="2000"
		@before-load="beforeLoad"
		@onload="onload"
		@onerror="onerror"
	>
		<template #default>
			<div class="default">默认插槽</div>
		</template>
		<template #top>
			<div class="top">上层插槽</div>
		</template>
	</pmage>
</template>
	
<script setup>
import pmage from 'pmage';

const beforeLoad = (next) => {
	console.log('beforeLoad')
	next();
}

const onload = () => {
	console.log('onload')
}

const onerror = () => {
  console.log('onerror')
}
</script>

Props

placeholder 占位图建议使用原图等比缩放后的base64格式图片，来使体验最佳化。

Event

Slot