更新记录

1.0.0(2022-11-10) 下载此版本

  • v1.0.0 首发

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

1.安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。

如果是通过下载解压方式,只需将其组件包文件夹放到项目目录components

2.基本用法

在需要添加的页面中写组件<zs-poster />,按需改变属性即可,需要自己准备三个图片,参考代码如下

<template>
    <view class="content">
        <zs-poster style="width:100%; height: 450px;"
            :imgHead="headImg"
            :imgScan="scanImg"
            :imgBg="bgImg"
            :img-bg-scale="0.6"
            :title="title"
            subtitle="不忘初心, 牢记使命"
            nick="TA远方"
            scan-toast="扫一扫, 关注一下"
            :direction="1"
            ref="zsPoster">
        </zs-poster>
        <view style="text-align: center;margin-top: 20px;">
            <button @click="onSave" type="primary">保存图片</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: '宁静致远',
                headImg: '../../static/see_yuanfang.jpg',
                bgImg: '../../static/compressflag.jpg',
                scanImg: '../../static/my_csdn.png'
            }
        },
        onLoad() {

        },
        methods: {
            onSave(){
                this.$nextTick(()=>{
                    this.$refs.zsPoster.saveImage();
                })
            }
        }
    }
</script>

3.组件特点

属性名 类型 说明 默认值
imgHead String 头像图
imgBg String 背景图
imgScan String 扫码图
title String 标题
subtitle String 副标题
nick String 昵称
scanToast String 扫码提示
direction String 布局方向:0,水平;1,垂直 0
imgBgScale Number 背景图宽高比 0.53

4.组件示例

如果有,请使用HBuilderX导入示例,或下载示例项目文件解压运行可查看

5.参与学习

~加入QQ群186736431参与学习交流,欢迎提出需求改进意见!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问