更新记录

1.0.0（2024-04-27）

支持文本，在线图片，二维码生成，可自由配置文本，图片，二维码位置，文本大小，粗细，字体颜色等配置，图片支持圆角、圆形等设计，二维码支持前景色，背景色，中间loggo等配置

平台兼容性

dl-poster

posters 属性说明

示例

当使用type属性时，需确认后端接口传入的字段名，此案例dictLabel，dictValue不传递，默认使用"dictLabel"，"dictValue"

<template>
    <view>
        <dl-poster bgColor="#fff" @change="posterChange" ref="poster" :posters="posters"></dl-poster>
        <button  @click="posterClick">点击生成海报</button>
        <image mode="widthFix" style="width: 750rpx;" :src="posterImg"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                posterImg: '',
                title: 'Hello',
                posters: [
                    {
                        type: "image",
                        x: uni.upx2px(30),
                        y: uni.upx2px(30),
                        width: uni.upx2px(690),
                        height: uni.upx2px(966),
                        url: "https://p0.pipi.cn/mmdb/25bfd68de7adddddd2395b4c04f4737cd31fc.jpg?imageMogr2/thumbnail/1246x1246%3E"
                    },
                    {
                        type: "image",
                        x: uni.upx2px(80),
                        y: uni.upx2px(1100),
                        width: uni.upx2px(100),
                        height: uni.upx2px(966),
                        radius: 60,
                        url: "https://p0.pipi.cn/mmdb/25bfd68de7adddddd2395b4c04f4737cd31fc.jpg?imageMogr2/thumbnail/1246x1246%3E"
                    },
                    {
                        type: "qr",
                        x: uni.upx2px(560),
                        y: uni.upx2px(1020),
                        text: "这是二维码",
                        size: 80,
                        radius: 50,
                        background: '#fff'
                    },
                    {
                        type: "text",
                        x: uni.upx2px(160),
                        y: uni.upx2px(1050),
                        text:"这是商品头部",
                        size: "20"
                    },
                    {
                        type: "text",
                        x: uni.upx2px(160),
                        y: uni.upx2px(1110),
                        text:"这是商品描述这是商品描述这是商品描述",
                        width: uni.upx2px(350),
                        size: "16",
                        line: 2
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            posterClick() {
                this.$refs.poster.create()
            },
            posterChange(e) {
                this.posterImg = e
            }
        }
    }
</script>

<style>
</style>