poster自定义海报开发——海报组件开发

海报组件开发

开发自定义海报组件

定义海报组件文件位置：niucloud/addon/shop/app/dict/poster/components.php

文件名称必须对应，框架会寻找所有插件下的这个文件，进行加载

components.php自定义海报组件

系统框架已经定义好了一些基础的海报组件（不包含业务），若无业务需求，开发者可以正常使用，无需重复开发

系统框架定义的海报组件，还包括加载插件的海报组件的文件位置：niucloud\app\dict\poster\ComponentDict.php

components.php海报组件关键代码

复制代码

<?php

return [
    'shop_goods' => [ // 海报类型
        'title' => get_lang('dict_diy_poster.shop_goods_component_type_basic'), // 海报组件分组名称
        'support' => [ 'fenxiao_goods', 'shop_point_goods' ], // 组件所支持的海报类型，为空表示都支持
        'list' => [
            'GoodsImage' => [
                'title' => "商品名称", // 组件名称
                'type' => 'text', // 组件类型，文本：text，image：图片，qrcode：二维码，draw：绘画
                'icon' => "iconfont iconbiaoti", // 组件图标
                'path' => "goods-name", // 属性编辑，在前端定义海报的预览组件和海报编辑组件时，组件预览前缀加edit-，编辑组件属性前缀加preview-
                'uses' => 1, // 最大添加数量，0为不限制
                'sort' => 10006, // 排序号，从小到大
                'relate' => 'goods_name', // 关联字段，空为不处理
                'value' => '', // 默认值
                'template' => [
                    "fontFamily" => 'static/font/OPLUSSANS3-REGULAR.ttf',
                    "width" => 400, // 宽度
                    'height' => 400, // 高度
                    'minWidth' => 60, // 最小宽度
                    'minHeight' => 60 // 最小高度
                ]
            ]
        ]
    ]
];

定义海报组件的语言包

指定字体

在components.php中的template中可以指定字体文件，字体文件存放位置：niucloud/public/static/font

关键代码：

复制代码

'template' => [ 
    "fontFamily" => 'static/font/OPLUSSANS3-REGULAR.ttf'
]

前端定义海报的预览组件、编辑组件

代码位置：admin/src/addon/shop/views/poster/components

根据components.php中定义的path路径，需要在前端定义海报的预览组件和海报编辑组件。

预览组件前缀为：preview-，编辑组件前缀为：edit-

例如：path为goods-name，预览组件名称就是：preview-goods-name，编辑组件名称就是：edit-goods-name

preview预览组件

无需编写复杂界面，只需要提供简单的预览效果即可，可以写成固定

调用右侧编辑属性的样式，实时预览，prop.value为当前组件的对象。关键代码：

复制代码

<template>
    <div :style="componentStyle">商品名称</div>
</template>

const componentStyle = computed(() => {
    let style = ''
    style += `font-size: ${prop.value.fontSize}px;color: ${prop.value.fontColor};line-height: ${prop.value.lineHeight + prop.value.fontSize}px;`
    if (prop.value.x == 'left' || prop.value.x == 'center' || prop.value.x == 'right') {
        style += `text-align: ${prop.value.x};`
    }
    if (prop.value.weight) {
        style += 'font-weight: bold;'
    }
    if (!prop.value.fontFamily || prop.value.fontFamily == 'static/font/PingFang-Medium.ttf') {
        style += 'font-family: poster_default_font;'
    }
    const box: any = document.getElementById(prop.value.id)
    if (box) {
        style += `width:${box.offsetWidth}px;height:${box.offsetHeight}px;`
    } else {
        style += `width:${prop.value.width}px;height:${prop.value.height}px;`
    }
    return style
})

edit编辑组件

增加这段代码，即可调用框架封装好的公共属性编辑

复制代码

<!-- 组件公共属性 -->
<slot name="common"></slot>

框架封装的通用编辑属性，关键代码截图

效果图