前言：
当前姐妹们对“css小海报”可能比较着重，大家都想要知道一些“css小海报”的相关知识。那么小编也在网上收集了一些有关“css小海报””的相关资讯，希望你们能喜欢，小伙伴们一起来学习一下吧！组件介绍
lime-painter 是一个运行在uniapp上优雅的海报生成插件，支持JSON方式和template方式生成海报
资源
完整demo:
需要注意的问题包含图片最好的地址最好要支持跨域nvue 必须为HBX 3.4.11及以上使用步骤安装lime-painter
从完整demo中的 uni_modules/lime-painter 目录复制到你的uniapp项目的 uni_modules 目录下
新建页面 pages/index/demo.vue，页面内容如下
<script setup>import {ref} from 'vue'import {onLoad} from '@dcloudio/uni-app'// 海报元素的引用，用于后续操作DOMconst posterRef = ref(null);// 控制海报是否显示const posterIsShow = ref(false);// 存储最终生成的海报图片URLconst pictureImage = ref('');// 海报的JSON配置，包含CSS样式和视图层次结构const posterJson = ref({ css: { width: '750rpx', paddingBottom: '40rpx', background: 'linear-gradient(,#000 0%, #ff5000 100%)' }, views: [ // 这里配置了多个视图元素，包括图片、文本和容器，每个都有自己的CSS样式 { src: ';, type: 'image', css: { background: '#fff', objectFit: 'cover', marginLeft: '40rpx', marginTop: '40rpx', width: '84rpx', border: '2rpx solid #fff', boxSizing: 'border-box', height: '84rpx', borderRadius: '50%' } }, { type: 'view', css: { marginTop: '40rpx', paddingLeft: '20rpx', display: 'inline-block' }, views: [ { text: '隔壁老王2', type: 'text', css: { display: 'block', paddingBottom: '10rpx', color: '#fff', fontSize: '32rpx', fontWeight: 'bold' } }, { text: '为您挑选了一个好物', type: 'text', css: { color: 'rgba(255,255,255,.7)', fontSize: '24rpx' } } ] }, { css: { marginLeft: '40rpx', marginTop: '30rpx', padding: '32rpx', boxSizing: 'border-box', background: '#fff', borderRadius: '16rpx', width: '670rpx', boxShadow: '0 20rpx 58rpx rgba(0,0,0,.15)' }, views: [ { src: ';, type: 'image', css: { objectFit: 'cover', objectPosition: '50% 50%', width: '606rpx', height: '606rpx' } }, { css: { marginTop: '32rpx', color: '#FF0000', fontWeight: 'bold', fontSize: '28rpx', lineHeight: '1em' }, views: [ { text: '￥', type: 'text', css: { verticalAlign: 'bottom' } }, { text: '39', type: 'text', css: { verticalAlign: 'bottom', fontSize: '58rpx' } }, { text: '.39', type: 'text', css: { verticalAlign: 'bottom' } }, { text: '￥59.99', type: 'text', css: { verticalAlign: 'bottom', paddingLeft: '10rpx', fontWeight: 'normal', textDecoration: 'line-through', color: '#999999' } } ], type: 'view' }, { css: { marginTop: '30rpx', fontSize: '26rpx', color: '#8c5400' }, views: [ { text: '满100减11', type: 'text', css: { color: '#ff6200', border: '1rpx solid #ff6200', padding: '10rpx 16rpx 4rpx 16rpx', fontSize: '24rpx' } } ], type: 'view' }, { css: { marginTop: '10rpx' }, views: [ { text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝', type: 'text', css: { paddingRight: '32rpx', marginTop: '16rpx', boxSizing: 'border-box', lineClamp: 2, color: '#333333', lineHeight: '48rpx', fontSize: '30rpx', width: '478rpx' } }, { text: 'limeui.qcoon.cn', type: 'qrcode', css: { width: '128rpx', height: '128rpx' } } ], type: 'view' } ], type: 'view' } ]});/** * 绘制海报成功的回调函数 * @param {string} e 生成的海报图片数据URL * @summary 绘制海报成功后，将海报显示出来，并隐藏加载提示。 */const painterSsuccess = (e) => { console.log('painterSsuccess'); posterIsShow.value = true; pictureImage.value = e; uni.hideLoading()};const renderPoster = () => { posterRef.value.render(posterJson.value);}onLoad(() => { uni.showLoading({ title: '正在生成海报', icon: 'loading' }) setTimeout(() => { // 需要延迟，不然会报错 renderPoster(); },1000)})</script><template><!-- 显示图像的元素 --> <image :src="pictureImage" v-if="pictureImage" mode="widthFix" style="width: 700rpx"></image> <l-painter ref="posterRef" @success="painterSsuccess" isCanvasToTempFilePath performance path-type="url" custom-style="position: fixed; left: 200%" > </l-painter></template><style scoped></style>修改pages.json，内容如下{ "pages": [ //pages数组中第一项表示应用启动页，参考： { "path": "pages/index/demo", "style": { "navigationBarTitleText": "海报demo" } }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {}} 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css小海报
