Skip to content

fe-tools/vue-poster

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-poster

易用的海报合成组件

Installation

yarn add @fe-tools/vue-poster

Usage

<template>
  <Poster :width="375" :height="600">
    <PosterImage
      :width="375"
      :height="600"
      :offset-y="0"
      :offset-x="0"
      src="/image/path"
    />

    <PosterText>Poster</PosterText>
  </Poster>
</template>

<script>
import { Poster, PosterImage, PosterText } from '@fe-tools/vue-poster'

export default {
  components: {
    Poster,
    PosterImage,
    PosterText
  }
}
</script>

Components

Poster

Attribute Type Default Description
width Number 300 宽度
height Number 300 高度
ratio Number 1 分辨率
type png | jpeg jpeg 生成的图片格式
quality Number 1 生成的图片质量
backgroundColor String -- 背景色
posterClass String -- 自定义类名
Slot Description
default 默认插槽,放置海报组件
loading 海报渲染时的 Loading 组件
Event CallBack Description
on-render (base64: String) => void 监听海报渲染完成事件

PosterImage

Attribute Type Default Description
src String -- 源文件地址
width Number 原图宽度 宽度
height Number 原图高度 高度
offsetX Number 0 水平偏移像素
offsetY Number 0 垂直偏移像素
round Boolean false 剪切成圆形
cors Boolean false 是否允许 CORS

PosterQRCode

Attribute Type Default Description
text String -- 需要转化成二维码的文本
width Number 40 宽度
height Number 40 高度
offsetX Number 0 水平偏移像素
offsetY Number 0 垂直偏移像素
margin Number 「点」尺寸的 2 二维码白边宽度

PosterText

Attribute Type Default Description
width Number offsetX 到海报 right 的距离 宽度
height Number offsetY 到海报 bottom 的距离 高度
offsetX Number 0 文本偏移像素
offsetY Number 0 文本偏移像素
color String black 文字颜色
font String normal 400 14px sans-serif 文字样式
lineHeight Number 14 行高
textBaseline String alphabetic 基线对齐方式
textOffsetY Number 0 文本垂直偏移量
border Boolean false 是否显示边框
Slot Description
default 默认插槽,放置需要渲染的文本

PosterTextInline

Attribute Type Default Description
color String extends PosterText color 文字颜色
font String extends PosterText font 文字样式
nowrap Boolean false 是否不允许换行

PosterLoading

Attribute Type Default Description
color String #bdbdbd icon 颜色
backgroundColor String rgba(0, 0, 0, 0.7) 蒙层颜色