更新记录

1.0.0(2024-08-16) 下载此版本

初次发布


平台兼容性

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

组件

cu-poster-body 海报内容组件

描述:海报布局的最外层组件

  • tips:每个海报只能有一个cu-poster-body组件
    <cu-poster-body></cu-poster-body>
    属性说明
    属性名 类型 默认值 说明
    class-name String 布局需要用到的类名,同html元素的class

cu-poster-view 海报视图容器组件

描述:它类似于传统html中的div,用于包裹各种元素内容。

<cu-poster-view></cu-poster-view>
属性说明
属性名 类型 默认值 说明
class-name String 布局需要用到的类名,同html元素的class
zIndex Number 0 用于调整绘制顺序,值越小越先绘制
isDraw Boolean false 用设置当前组件是否绘制,默认false(不绘制,大部分cu-poster-view只是为了布局,因此不需要绘制)

cu-poster-img 海报图片组件

描述:海报布局放置图片的

<cu-poster-body></cu-poster-body>
属性说明
属性名 类型 默认值 说明
class-name String 布局需要用到的类名,同html元素的class
zIndex Number 1 用于调整绘制顺序,值越小越先绘制
src String 图片资源地址
mode String ’scaleToFill‘ 图片裁剪、缩放的模式,同的mode属性

cu-poster-text 海报文本组件

描述:海报布局放置图片的

<cu-poster-text></cu-poster-text>
属性说明
属性名 类型 默认值 说明
class-name String 布局需要用到的类名,同html元素的class
zIndex Number 2 用于调整绘制顺序,值越小越先绘制
text String 文本内容

特别说明

目前各个组件参与绘制计算的样式属性有

const computedStyle = {
    'text': [ //文本组件
        'font-size', // 字体大小
        'color', // 字体颜色
        'line-height'//行高
    ],
    'view':[ //容器组件
        'background-color',//背景色
        'border-radius'//圆角
    ],
    'image':[//图片组件
        'border-radius'//圆角
    ]
}

基本用法演示

html

    <template>
        <view class="page-wrap">
            <cu-poster-body class-name="my-poster" ref="my-poster">
                <cu-poster-view class-name="poster-wrap" :is-draw="true">
                    <cu-poster-img class-name="cover-img" src="/static/404_a.jpg" mode="aspectFill"></cu-poster-img>
                    <cu-poster-view class-name="poster-footer">
                        <cu-poster-img class-name="avatar round" src="/static/404_a.jpg" mode="aspectFill"></cu-poster-img>
                        <cu-poster-view class-name="user-info">
                            <cu-poster-text class-name="name" text="呵呵哒"></cu-poster-text>
                            <cu-poster-text class-name="phone" text="183****6512"></cu-poster-text>
                        </cu-poster-view>
                        <cu-poster-img class-name="qr-code" src="/static/404_a.jpg" mode="aspectFill"></cu-poster-img>
                    </cu-poster-view>
                </cu-poster-view>
            </cu-poster-body>
            <button class="margin-top margin-lr-df" type="default" @click="getPoster">获取海报</button>
            <uni-popup ref="popup">
                <view class="img-pop">
                    <image class="img-box" :src="posterUrl" mode="scaleToFill"></image>
                </view>
            </uni-popup>
        </view>
    </template>

css

    <style lang="scss">
        .page-wrap{
            // my-poster start
            .my-poster{
                width: 546rpx;
                margin: 0 auto;
                padding-bottom: 20px;
                padding-top: 20px;
                // background-color: white;
                .poster-wrap{
                    background-color: #fe6f0c;
                    width: 546rpx;
                    padding: 10rpx;
                    border-radius: 10rpx;
                    .cover-img{
                        width: 100%;
                        height: 600rpx;
                        margin-bottom: 30px;
                        border-radius:  20rpx;
                    }
                    .poster-footer{
                        display: flex;
                        align-items: center;
                        position: relative;
                        .qr-code{
                            width: 80rpx;
                            height: 80rpx;
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                            // border-radius: 10rpx;
                        }
                        .user-info{
                            display: flex;
                            flex-direction: column;
                            color: white;
                        }
                        .avatar{
                            width: 88rpx;
                            height: 88rpx;
                            margin-right: 10rpx;
                            border-radius: 88rpx;
                        }
                    }
                }
            }
            // my-poster end
            .img-pop{
                .img-box{
                    width: 546rpx;
                    height: 768rpx;
                }
            }
        }
    </style>

js

    <script>
        export default {
            data(){
                return{
                    isShow: false,
                    posterUrl: ''
                }
            },
            methods:{
                /**
                 * @description 获取海报
                 */
                getPoster(){
                    this.$refs['my-poster'].getPoster().then(res => {
                        console.log(res);
                        this.posterUrl = res;
                        this.$refs.popup.open('center');
                    })
                }
            }
        }
    </script>

隐私、权限声明

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

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

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

许可协议

MIT协议

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