Effect demonstration
The source code is published in the plug-in market https://ext.dcloud.net.cn/plugin?id=586
or gitee: https://gitee.com/huangchunhongzZ/poster
How to use (mainly see the examples of pages/hch-poster page for detailed instructions)
<hchPoster ref="hchPoster" @cancel="canvasCancel" :simpleFlag="simpleFlag" :posterBgFlag="posterBgFlag" :canvasAttr.sync="posterObj" />
<view :hidden="canvasFlag">
<!-- 海报 要放外面放组件 里面会找不到 canvas-->
<!-- 海报 -->
<canvas class="canvas" canvas-id="myCanvas"></canvas>
</view>
import hchPoster from "../../components/hch-poster/hch-poster.vue"
export default {
components: {
hchPoster
}
}
API
The method to generate the poster is called as
this.$refs.hchPoster.posterShow()
Cancel poster
//有$emit方法
this.$emit("cancel", true)
// 所以在组件中用@cancel绑定方法适用
// <hchPoster ref="hchPoster" @cancel="canvasCancel" :simpleFlag="simpleFlag" :posterBgFlag="posterBgFlag" :canvasAttr.sync="posterObj" />
props
| name | description | Defaults | Types of |
|---|---|---|---|
| canvasAttr | The attributes of the poster (you can generate your own poster by modifying the attribute value of the poster) | (See canvasAttr below: ()) | Object |
| posterBgFlag | Whether to display the poster background image | false | Boolean |
| simpleFlag | Whether to show a simple poster | false | Boolean |
/**
* @description: 海报版本
* @param {number} marginTB 上下距离
* @param {number} marginLR 左右距离
* @param {number} innerLR 上下内边距
* @param {number} innerTB 左右内边距
* @param {number} radius 圆角
* @param {number} fillColor 海报填充背景色
* @param {number} posterRatio 海报主图片宽高比例
* @param {String} posterImgUrl 海报主图片url
* @param {String} title 海报的title
* @param {number} titleFontSize 字体大小
* @param {number} titleLineHeight 标题文本的行高大小
* @param {String} posterCodeUrl 小程序码图片
* @param {number} codeWidth 小程序码的占屏幕的百分比
* @param {number} codeRatio 小程序码的宽度比例
* @param {number} codeRadius 小程序码的圆角
* @param {number} codeMT 小程序码的margin-top值
* @param {String} codeName 小程序码名字
* @param {number} codeNameMT 小程序码名字的margin-top值
* @param {String} tips 提示语
* @param {number} codeML 小程序码左边距离
* @param {number} desTextMT 纵向文本描述 上边距
* @param {number} desTextML 纵向文本描述 左边距
* @author: hch
*/
// 主海报版本
canvasAttr:{
marginLR: 40,
marginTB: 40,
radius: 0.03,
fillColor: '#ffffff',
innerLR: 20,
innerTB: 20,
posterRatio: 1.3,
posterImgUrl: "https://huangchunhongzz.gitee.io/imgs/poster/product.png",
title: "今日上新水果，牛奶草莓，颗粒饱满，每盒 200g",
titleFontSize: 16,
titleLineHeight: 25,
posterCodeUrl: "https://huangchunhongzz.gitee.io/imgs/poster/code.png",
codeWidth: 0.3,
codeRatio: 1,
codeRadius: 0.5,
codeMT: 20,
codeName: "记忆之王",
codeNameMT: 20,
tips: "长按/扫描识别查看商品",
posterBgUrl:'https://huangchunhongzz.gitee.io/imgs/poster/poster_bg_3.png',
codeML:140,
desTextMT:70,
desTextML:240,
}
/**
* @description: 海报版本
* @param {number} marginTB 上下距离
* @param {number} marginLR 左右距离
* @param {number} radius 圆角
* @param {number} fillColor 海报填充背景色
* @param {Array} title 海报的title
* @param {number} titleFontSize 字体大小
* @param {number} titleLineHeight 标题文本的行高大小
* @param {String} posterCodeUrl 小程序码图片
* @param {number} codeWidth 小程序码的占屏幕的百分比
* @param {number} codeRatio 小程序码的宽度比例
* @param {number} codeRadius 小程序码的圆角
* @param {number} codeMT 小程序码的margin-top值
* @param {number} codeML 小程序码左边距离
* @param {number} desTextMT 纵向文本描述 上边距
* @param {number} desTextML 纵向文本描述 左边距
* @author: hch
*/
// 简单版本
canvasAttr:{
//简单版的海报
marginLR: 40,
marginTB: 40,
radius: 0.05,
fillColor: '#ffffff',
title: ["夏天的风","带着这清香的果橙味"],
titleFontSize: 16,
titleLineHeight: 25,
posterCodeUrl: "https://huangchunhongzz.gitee.io/imgs/poster/code.png",
codeWidth: 0.2,
codeRatio: 1,
codeRadius: 0.5,
codeMT: 50,
posterBgUrl:'https://huangchunhongzz.gitee.io/imgs/poster/poster_bg_3.png',
codeML:140,
desTextMT:70,
desTextML:240,
},