_家政按摩H5小程序源码_预系统.zip

# Painter 画板 测试版 > uniapp 海报画板，更优雅的海报生成方案 > [查看更多 站点 1](https://limeui.qcoon.cn/#/painter) > [查看更多 站点 2](http://liangei.gitee.io/limeui/#/painter) > Q 群：806744170 ## 平台兼容 | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App | | --- | ---------- | ------------ | ---------- | ---------- | --------- | --- | | √ | √ | √ | 未测 | √ | √ | √ | ## 安装 在市场导入[海报画板](https://ext.dcloud.net.cn/plugin?id=2389)uni_modules版本的即可，无需`import` ## 代码演示 ### 基本用法 - 插件提供 JSON 及 XML 的方式绘制海报 - 参考了 css 块状流布局模拟 css schema 方式。 - 使用JSON的方式时，请使用驼峰key #### 方式一 XML - 提供`l-painter-view`、`l-painter-text`、`l-painter-image`、`l-painter-qrcode`四种类型组件 - 通过 `css` 属性绘制样式，与 style 使用方式保持一致。 ```html ``` #### 方式二 JSON - 在 json 里四种类型组件的`type`为`view`、`text`、`image`、`qrcode` - 通过 `board` 设置海报所需的 JSON 数据进行绘制或`ref`获取组件实例调用组件内的`render(json)` - 所有类型的 schema 都具有`css`字段，css 的 key 值使用**驼峰**如：`lineHeight` ```html ``` ```js data() { return { poster: { css: { // 根节点若无尺寸，自动获取父级节点 width: '750rpx' }, views: [ { css: { background: "#07c160", height: "120rpx", width: "120rpx", display: "inline-block" }, type: "view" }, { css: { background: "#1989fa", height: "120rpx", width: "120rpx", borderTopRightRadius: "60rpx", borderBottomLeftRadius: "60rpx", display: "inline-block", margin: "0 30rpx" }, views: [], type: "view" }, { css: { background: "#ff9d00", height: "120rpx", width: "120rpx", borderRadius: "50%", display: "inline-block" }, views: [], type: "view" }, ] } } } ``` ### View 容器 - 类似于 `div` 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树 - 在 JSON 里具有 `views` 的数组字段，用于嵌套承载节点。 #### 方式一 XML ```html ``` #### 方式二 JSON ```js { css: {}, views: [ { type: 'view', css: { background: '#f0f0f0', paddingTop: '100rpx' }, views: [ { type: 'view', css: { background: '#d9d9d9', width: '33.33%', height: '100rpx', display: 'inline-block' } }, { type: 'view', css: { background: '#bfbfbf', width: '66.66%', height: '100rpx', display: 'inline-block' } } ], } ] } ``` ### Text 文本 - 通过 `text` 属性填写文本内容。 - 支持`\n`换行符 - 支持省略号，使用 css 的`line-clamp`设置行数，当文字内容超过会显示省略号。 - 支持`text-decoration` #### 方式一 XML ```html ``` #### 方式二 JSON ```js // 基础用法 { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', }, { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', css: { // 设置居中对齐 textAlign: 'center', // 设置中划线 textDecoration: 'line-through' } }, { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', css: { // 设置右对齐 textAlign: 'right', } }, { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', css: { // 设置行数，超出显示省略号 lineClamp: 3, // 渐变文字 background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)', backgroundClip: 'text' } } ``` ### Image 图片 - 通过 `src` 属性填写图片路径。 - 图片路径支持：网络图片，本地 static 里的图片路径，缓存路径 - 通过 `css` 的 `object-fit`属性可以设置图片的填充方式，可选值见下方 CSS 表格。 - 通过 `css` 的 `object-position`配合 `object-fit` 可以设置图片的对齐方式，类似于`background-position`，详情见下方 CSS 表格。 - 使用网络图片时：小程序需要去公众平台配置 [downloadFile](https://mp.weixin.qq.com/) 域名 - 使用网络图片时：**H5 和 Nvue 需要决跨域问题** #### 方式一 XML ```html ``` #### 方式二 JSON ```js // 基础用法 { type: 'image', src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg', css: { width: '200rpx', height: '200rpx' } }, // 填充方式 // css objectFit 设置 填充方式 见下方表格 { type: 'image', src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg', css: { width: '200rpx', height: '200rpx', objectFit: 'contain' } }, // css objectPosition 设置 图片的对齐方式 { type: 'image', src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg', css: { width: '200rpx',