develop
xiaozhiyong
10 months ago
parent
6be758eba0
commit
17677a8517
14 changed files with 727 additions and 50 deletions
@ -1,33 +1,3 @@ |
|||||||
import request from 'utils/request'; |
import request from "utils/request"; |
||||||
|
|
||||||
export default { |
export default {}; |
||||||
getById(params) { |
|
||||||
return request({ |
|
||||||
url: '/guest-site/saasSiteInfo/getById', |
|
||||||
method: 'post', |
|
||||||
data: params, |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 金额换算升数
|
|
||||||
getPayDisInfo(params) { |
|
||||||
return request({ |
|
||||||
url: '/guest-site/mobileOrderApi/getPayDisInfo', |
|
||||||
method: 'post', |
|
||||||
data: params, |
|
||||||
}); |
|
||||||
}, |
|
||||||
createCOrder(params) { |
|
||||||
return request({ |
|
||||||
url: '/guest-site/mobileOrderApi/createCOrder', |
|
||||||
method: 'post', |
|
||||||
data: params, |
|
||||||
}); |
|
||||||
}, |
|
||||||
wxPay(params) { |
|
||||||
return request({ |
|
||||||
url: '/guest-finance/yiBaoPay/wxPay', |
|
||||||
method: 'post', |
|
||||||
data: params, |
|
||||||
}); |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|||||||
@ -0,0 +1,10 @@ |
|||||||
|
import request from "utils/request"; |
||||||
|
|
||||||
|
export default { |
||||||
|
getSiteCertificateBySiteId(siteId) { |
||||||
|
return request({ |
||||||
|
url: `/guest-site/saasSiteCertificate/getSiteCertificateBySiteId/${siteId}`, |
||||||
|
method: "get", |
||||||
|
}); |
||||||
|
}, |
||||||
|
}; |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
<template> |
||||||
|
<view class="container" style="--navbar-background-opacity: 1"> |
||||||
|
<navbar> |
||||||
|
<view slot="center" style="font-size: 28rpx">营业资质</view> |
||||||
|
</navbar> |
||||||
|
<view class="content"> |
||||||
|
<!-- <image |
||||||
|
v-for="(item, index) in imgList" |
||||||
|
:key="index" |
||||||
|
src="" |
||||||
|
mode="widthFix" |
||||||
|
/> --> |
||||||
|
|
||||||
|
<view |
||||||
|
style="position: relative; margin-bottom: 20rpx" |
||||||
|
v-for="(item, index) in imgList" |
||||||
|
:key="index" |
||||||
|
> |
||||||
|
<image |
||||||
|
:src="item.ossUrl" |
||||||
|
style="width: 100%; vertical-align: middle" |
||||||
|
mode="widthFix" |
||||||
|
/> |
||||||
|
<h-watermark |
||||||
|
position="absolute" |
||||||
|
title="小星加油" |
||||||
|
titleColor="orange" |
||||||
|
></h-watermark> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="tip"> |
||||||
|
以上信息均为商家提供，具体以相关主管登记部门为准。经营者需确保信息真实有效，如与事实不符或发生变更，请联系平台更换 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import serve from "api/site/aptitude.js"; |
||||||
|
import hWatermark from "@/uni_modules/h-watermark/components/h-watermark/h-watermark.vue"; |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
hWatermark, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
imgList: {}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
let { siteId } = options; |
||||||
|
if (siteId) { |
||||||
|
this.getSiteCertificateBySiteId(siteId); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getSiteCertificateBySiteId(siteId) { |
||||||
|
serve.getSiteCertificateBySiteId(siteId).then((res) => { |
||||||
|
if (res.code === 20000) { |
||||||
|
this.imgList = res.data; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container { |
||||||
|
min-height: 100vh; |
||||||
|
background: #f6f6f6; |
||||||
|
.content { |
||||||
|
margin: 0 auto; |
||||||
|
padding-bottom: 150rpx; |
||||||
|
width: 700rpx; |
||||||
|
// height: 500px; |
||||||
|
} |
||||||
|
.tip { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
padding: 20rpx 20rpx; |
||||||
|
width: 100%; |
||||||
|
height: 140rpx; |
||||||
|
color: #fff; |
||||||
|
font-size: 24rpx; |
||||||
|
line-height: 35rpx; |
||||||
|
background: rgba($color: #000, $alpha: 0.5); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
## 1.0.5（2024-01-19） |
||||||
|
- 重大更新：新增全局数据监听，组件参数变化时，水印跟随变化 |
||||||
|
## 1.0.4（2023-10-27） |
||||||
|
- 重大更新：新增参数scale放大缩小，可放大和缩放水印，以达到相关使用需求 |
||||||
|
- 重大更新：新增参数column水印列数，用以适用缩小功能，防止缩小后水印不能完全覆盖页面问题 |
||||||
|
## 1.0.3（2023-08-03） |
||||||
|
- 去除微信小程序支持，canvas在小程序手机中会跟随页面滚动而滚动 |
||||||
|
## 1.0.2（2023-07-31） |
||||||
|
- 增加布局方式（绝对布局-相对布局），可指定父级容器 |
||||||
|
## 1.0.1（2023-07-31） |
||||||
|
- dcloud更新展示图片不显示问题 |
||||||
|
## 1.0.0（2023-07-12） |
||||||
|
- 第一次版本提交 |
||||||
@ -0,0 +1,363 @@ |
|||||||
|
<!-- 水印组件 --> |
||||||
|
|
||||||
|
<template> |
||||||
|
<view class="watermark" :style="{ position: position }"> |
||||||
|
<canvas |
||||||
|
canvas-id="watermark" |
||||||
|
style="position: absolute" |
||||||
|
:style="{ |
||||||
|
transform: 'scale(' + scale + ')', |
||||||
|
width: canvasWidth + '%', |
||||||
|
height: canvasWidth + '%', |
||||||
|
top: canvasTop + '%', |
||||||
|
left: canvasTop + '%', |
||||||
|
}" |
||||||
|
></canvas> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* @description 水印 |
||||||
|
* @example <h-watermark></h-watermark> |
||||||
|
* |
||||||
|
* @property {String} title 标题文字（默认 水印组件 ） |
||||||
|
* @property {Boolean} titleShow 是否显示标题文字（默认 true ） |
||||||
|
* @property {Number} titleSize 标题文字字号（默认 16 ） |
||||||
|
* @property {String} titleColor 标题文字颜色（默认 #f15723 ） |
||||||
|
* @property {Number} titleLucency 标题文字透明度（默认 0.2 ） |
||||||
|
* @property {String} mobile 联系电话（默认 18761665823 ） |
||||||
|
* @property {Boolean} mobileShow 是否显示联系电话（默认 true ） |
||||||
|
* @property {Number} mobileSize 联系电话字号（默认 10 ） |
||||||
|
* @property {String} mobileColor 联系电话颜色（默认 #f15723 ） |
||||||
|
* @property {Number} mobileLucency 联系电话透明度（默认 0.2 ） |
||||||
|
* @property {String} appName 软件名称（默认 组件 ） |
||||||
|
* @property {Boolean} appNameShow 是否显示软件名称（默认 true ） |
||||||
|
* @property {Number} appNameSize 软件名称字号（默认 10 ） |
||||||
|
* @property {String} appNameColor 软件名称颜色（默认 #f15723 ） |
||||||
|
* @property {Number} appNameLucency 软件名称透明度（默认 0.2 ） |
||||||
|
* @property {Number} rotate 旋转弧度（默认 -45 ） |
||||||
|
* @property {Object} position 布局方式（绝对布局-相对布局）（默认 'fixed-绝对布局' ） |
||||||
|
* @property {Number} scale 放大缩小（默认1） |
||||||
|
* @property {Number} column 水印列数（默认15） |
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
export default { |
||||||
|
// 小程序样式穿透 |
||||||
|
options: { |
||||||
|
styleIsolation: "shared", |
||||||
|
}, |
||||||
|
props: { |
||||||
|
// 标题文字 |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: "水印组件", |
||||||
|
}, |
||||||
|
// 是否显示标题文字 |
||||||
|
titleShow: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
}, |
||||||
|
// 标题文字字号 |
||||||
|
titleSize: { |
||||||
|
type: Number, |
||||||
|
default: 16, |
||||||
|
}, |
||||||
|
// 标题文字颜色 |
||||||
|
titleColor: { |
||||||
|
type: String, |
||||||
|
default: "#f15723", |
||||||
|
}, |
||||||
|
// 标题文字透明度 |
||||||
|
titleLucency: { |
||||||
|
type: Number, |
||||||
|
default: 0.2, |
||||||
|
}, |
||||||
|
// 联系电话 |
||||||
|
mobile: { |
||||||
|
type: String, |
||||||
|
default: "18761665823", |
||||||
|
}, |
||||||
|
// 是否显示联系电话 |
||||||
|
mobileShow: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
// 联系电话字号 |
||||||
|
mobileSize: { |
||||||
|
type: Number, |
||||||
|
default: 10, |
||||||
|
}, |
||||||
|
// 联系电话颜色 |
||||||
|
mobileColor: { |
||||||
|
type: String, |
||||||
|
default: "#f15723", |
||||||
|
}, |
||||||
|
// 联系电话透明度 |
||||||
|
mobileLucency: { |
||||||
|
type: Number, |
||||||
|
default: 0.2, |
||||||
|
}, |
||||||
|
// 软件名称 |
||||||
|
appName: { |
||||||
|
type: String, |
||||||
|
default: "组件", |
||||||
|
}, |
||||||
|
// 是否显示软件名称 |
||||||
|
appNameShow: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
// 软件名称字号 |
||||||
|
appNameSize: { |
||||||
|
type: Number, |
||||||
|
default: 10, |
||||||
|
}, |
||||||
|
// 软件名称颜色 |
||||||
|
appNameColor: { |
||||||
|
type: String, |
||||||
|
default: "#f15723", |
||||||
|
}, |
||||||
|
// 软件名称透明度 |
||||||
|
appNameLucency: { |
||||||
|
type: Number, |
||||||
|
default: 0.2, |
||||||
|
}, |
||||||
|
// 旋转弧度 |
||||||
|
rotate: { |
||||||
|
type: Number, |
||||||
|
default: -45, |
||||||
|
}, |
||||||
|
// 布局方式（绝对布局-相对布局） |
||||||
|
position: { |
||||||
|
type: String, |
||||||
|
default: "fixed", |
||||||
|
}, |
||||||
|
// 放大缩小 |
||||||
|
scale: { |
||||||
|
type: Number, |
||||||
|
default: 1, |
||||||
|
}, |
||||||
|
// 水印列数 |
||||||
|
column: { |
||||||
|
type: Number, |
||||||
|
default: 15, |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.createWatemark(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
all(val) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.createWatemark(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 画布宽度 |
||||||
|
canvasWidth() { |
||||||
|
return 100 / this.scale; |
||||||
|
}, |
||||||
|
// 画布距离顶部高度 |
||||||
|
canvasTop() { |
||||||
|
return -(100 / this.scale - 100) / 2; |
||||||
|
}, |
||||||
|
all() { |
||||||
|
const { |
||||||
|
title, |
||||||
|
titleShow, |
||||||
|
titleSize, |
||||||
|
titleColor, |
||||||
|
titleLucency, |
||||||
|
mobile, |
||||||
|
mobileShow, |
||||||
|
mobileSize, |
||||||
|
mobileColor, |
||||||
|
mobileLucency, |
||||||
|
appName, |
||||||
|
appNameShow, |
||||||
|
appNameSize, |
||||||
|
appNameColor, |
||||||
|
appNameLucency, |
||||||
|
rotate, |
||||||
|
position, |
||||||
|
scale, |
||||||
|
column, |
||||||
|
} = this; |
||||||
|
return { |
||||||
|
title, |
||||||
|
titleShow, |
||||||
|
titleSize, |
||||||
|
titleColor, |
||||||
|
titleLucency, |
||||||
|
mobile, |
||||||
|
mobileShow, |
||||||
|
mobileSize, |
||||||
|
mobileColor, |
||||||
|
mobileLucency, |
||||||
|
appName, |
||||||
|
appNameShow, |
||||||
|
appNameSize, |
||||||
|
appNameColor, |
||||||
|
appNameLucency, |
||||||
|
rotate, |
||||||
|
position, |
||||||
|
scale, |
||||||
|
column, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
createWatemark() { |
||||||
|
let ctx = uni.createCanvasContext("watermark", this); |
||||||
|
const title = this.title; |
||||||
|
const mobile = this.mobile; |
||||||
|
const appName = this.appName; |
||||||
|
const titleColor = this.colorRgba(this.titleColor, this.titleLucency); |
||||||
|
const mobileColor = this.colorRgba(this.mobileColor, this.mobileLucency); |
||||||
|
const appNameColor = this.colorRgba( |
||||||
|
this.appNameColor, |
||||||
|
this.appNameLucency |
||||||
|
); |
||||||
|
// 旋转弧度 |
||||||
|
ctx.rotate((this.rotate * Math.PI) / 180); |
||||||
|
// 设置字体颜色 |
||||||
|
ctx.setFillStyle("#000"); |
||||||
|
for (let j = 0; j < this.column; j++) { |
||||||
|
for (let i = 1; i < this.column; i++) { |
||||||
|
//这个for循环代表横向循环， |
||||||
|
let num = 0; |
||||||
|
ctx.beginPath(); |
||||||
|
if (this.titleShow) { |
||||||
|
ctx.setFontSize(this.titleSize); |
||||||
|
ctx.setFillStyle(titleColor); |
||||||
|
ctx.fillText(title, 135 * -i, 150 * j); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.mobileShow) { |
||||||
|
ctx.setFontSize(this.mobileSize); |
||||||
|
ctx.setFillStyle(mobileColor); |
||||||
|
ctx.fillText(mobile, 135 * -i + 20 * num, 150 * j + 20 * num); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.appNameShow) { |
||||||
|
ctx.setFontSize(this.appNameSize); |
||||||
|
ctx.setFillStyle(appNameColor); |
||||||
|
ctx.fillText(appName, 135 * -i + 20 * num, 150 * j + 20 * num); |
||||||
|
} |
||||||
|
} |
||||||
|
for (let i = 1; i < this.column; i++) { |
||||||
|
//这个for循环代表横向循环， |
||||||
|
let num = 0; |
||||||
|
ctx.beginPath(); |
||||||
|
if (this.titleShow) { |
||||||
|
ctx.setFontSize(this.titleSize); |
||||||
|
ctx.setFillStyle(titleColor); |
||||||
|
ctx.fillText(title, 135 * i, -150 * j); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.mobileShow) { |
||||||
|
ctx.setFontSize(this.mobileSize); |
||||||
|
ctx.setFillStyle(mobileColor); |
||||||
|
ctx.fillText(mobile, 135 * i + 20 * num, -150 * j + 20 * num); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.appNameShow) { |
||||||
|
ctx.setFontSize(this.appNameSize); |
||||||
|
ctx.setFillStyle(appNameColor); |
||||||
|
ctx.fillText(appName, 135 * i + 20 * num, -150 * j + 20 * num); |
||||||
|
} |
||||||
|
} |
||||||
|
for (let i = 1; i < this.column; i++) { |
||||||
|
//这个for循环代表横向循环， |
||||||
|
let num = 0; |
||||||
|
ctx.beginPath(); |
||||||
|
if (this.titleShow) { |
||||||
|
ctx.setFontSize(this.titleSize); |
||||||
|
ctx.setFillStyle(titleColor); |
||||||
|
ctx.fillText(title, -135 * i, -150 * j); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.mobileShow) { |
||||||
|
ctx.setFontSize(this.mobileSize); |
||||||
|
ctx.setFillStyle(mobileColor); |
||||||
|
ctx.fillText(mobile, -135 * i + 20 * num, -150 * j + 20 * num); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.appNameShow) { |
||||||
|
ctx.setFontSize(this.appNameSize); |
||||||
|
ctx.setFillStyle(appNameColor); |
||||||
|
ctx.fillText(appName, -135 * i + 20 * num, -150 * j + 20 * num); |
||||||
|
} |
||||||
|
} |
||||||
|
for (let i = 0; i < this.column; i++) { |
||||||
|
//这个for循环代表横向循环， |
||||||
|
let num = 0; |
||||||
|
ctx.beginPath(); |
||||||
|
if (this.titleShow) { |
||||||
|
ctx.setFontSize(this.titleSize); |
||||||
|
ctx.setFillStyle(titleColor); |
||||||
|
ctx.fillText(title, 135 * i, 150 * j); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.mobileShow) { |
||||||
|
ctx.setFontSize(this.mobileSize); |
||||||
|
ctx.setFillStyle(mobileColor); |
||||||
|
ctx.fillText(mobile, 135 * i + 20 * num, 150 * j + 20 * num); |
||||||
|
num++; |
||||||
|
} |
||||||
|
if (this.appNameShow) { |
||||||
|
ctx.setFontSize(this.appNameSize); |
||||||
|
ctx.setFillStyle(appNameColor); |
||||||
|
ctx.fillText(appName, 135 * i + 20 * num, 150 * j + 20 * num); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.draw(); |
||||||
|
}, |
||||||
|
// 颜色转换 |
||||||
|
colorRgba(sHex, alpha = 1) { |
||||||
|
// 十六进制颜色值的正则表达式 |
||||||
|
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; |
||||||
|
/* 16进制颜色转为RGB格式 */ |
||||||
|
let sColor = sHex.toLowerCase(); |
||||||
|
if (sColor && reg.test(sColor)) { |
||||||
|
if (sColor.length === 4) { |
||||||
|
var sColorNew = "#"; |
||||||
|
for (let i = 1; i < 4; i += 1) { |
||||||
|
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); |
||||||
|
} |
||||||
|
sColor = sColorNew; |
||||||
|
} |
||||||
|
// 处理六位的颜色值 |
||||||
|
var sColorChange = []; |
||||||
|
for (let i = 1; i < 7; i += 2) { |
||||||
|
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2))); |
||||||
|
} |
||||||
|
if (alpha == 1) { |
||||||
|
return sColorChange.join(","); |
||||||
|
} else { |
||||||
|
return "rgba(" + sColorChange.join(",") + "," + alpha + ")"; |
||||||
|
} |
||||||
|
} else { |
||||||
|
return sColor; |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.watermark { |
||||||
|
pointer-events: none; |
||||||
|
z-index: 0; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
{ |
||||||
|
"id": "h-watermark", |
||||||
|
"displayName": "h-watermark 水印组件", |
||||||
|
"version": "1.0.5", |
||||||
|
"description": "水印组件，可自定义旋转弧度、父级容器、自定义水印标题（显影、文字、字号、颜色、透明度等）、自定义水印联系电话（显影、文字、字号、颜色、透明度等）、自定义软件名称（显影、文字、字号、颜色、透明度等）", |
||||||
|
"keywords": [ |
||||||
|
"h-watermark", |
||||||
|
"水印", |
||||||
|
"自定义", |
||||||
|
"vue", |
||||||
|
"放大缩小" |
||||||
|
], |
||||||
|
"repository": "", |
||||||
|
"engines": { |
||||||
|
"HBuilderX": "^3.1.0" |
||||||
|
}, |
||||||
|
"dcloudext": { |
||||||
|
"type": "component-vue", |
||||||
|
"sale": { |
||||||
|
"regular": { |
||||||
|
"price": "0.00" |
||||||
|
}, |
||||||
|
"sourcecode": { |
||||||
|
"price": "0.00" |
||||||
|
} |
||||||
|
}, |
||||||
|
"contact": { |
||||||
|
"qq": "" |
||||||
|
}, |
||||||
|
"declaration": { |
||||||
|
"ads": "无", |
||||||
|
"data": "插件不采集任何数据", |
||||||
|
"permissions": "无" |
||||||
|
}, |
||||||
|
"npmurl": "" |
||||||
|
}, |
||||||
|
"uni_modules": { |
||||||
|
"dependencies": [], |
||||||
|
"encrypt": [], |
||||||
|
"platforms": { |
||||||
|
"cloud": { |
||||||
|
"tcb": "y", |
||||||
|
"aliyun": "y" |
||||||
|
}, |
||||||
|
"client": { |
||||||
|
"Vue": { |
||||||
|
"vue2": "y", |
||||||
|
"vue3": "u" |
||||||
|
}, |
||||||
|
"App": { |
||||||
|
"app-vue": "y", |
||||||
|
"app-nvue": "u" |
||||||
|
}, |
||||||
|
"H5-mobile": { |
||||||
|
"Safari": "y", |
||||||
|
"Android Browser": "y", |
||||||
|
"微信浏览器(Android)": "y", |
||||||
|
"QQ浏览器(Android)": "y" |
||||||
|
}, |
||||||
|
"H5-pc": { |
||||||
|
"Chrome": "y", |
||||||
|
"IE": "y", |
||||||
|
"Edge": "y", |
||||||
|
"Firefox": "y", |
||||||
|
"Safari": "y" |
||||||
|
}, |
||||||
|
"小程序": { |
||||||
|
"微信": "u", |
||||||
|
"阿里": "u", |
||||||
|
"百度": "u", |
||||||
|
"字节跳动": "u", |
||||||
|
"QQ": "u", |
||||||
|
"钉钉": "u", |
||||||
|
"快手": "u", |
||||||
|
"飞书": "u", |
||||||
|
"京东": "u" |
||||||
|
}, |
||||||
|
"快应用": { |
||||||
|
"华为": "u", |
||||||
|
"联盟": "u" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
## 水印组件 |
||||||
|
|
||||||
|
> **组件名：h-watermark** |
||||||
|
|
||||||
|
### 安装方式 |
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 |
||||||
|
|
||||||
|
### 基本用法 |
||||||
|
|
||||||
|
在 ``template`` 中使用组件 |
||||||
|
|
||||||
|
```vue |
||||||
|
<!-- 基本使用 --> |
||||||
|
<h-watermark></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义标题文字 --> |
||||||
|
<h-watermark title="自定义标题文字"></h-watermark> |
||||||
|
|
||||||
|
<!-- 是否显示标题文字 --> |
||||||
|
<h-watermark :titleShow="false"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义标题文字字号 --> |
||||||
|
<h-watermark :titleSize="26"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义标题文字颜色 --> |
||||||
|
<h-watermark titleColor="#30b6a2"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义标题文字透明度 --> |
||||||
|
<h-watermark :titleLucency="0.4"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义联系电话 --> |
||||||
|
<h-watermark mobile="18888888888"></h-watermark> |
||||||
|
|
||||||
|
<!-- 是否显示联系电话 --> |
||||||
|
<h-watermark :mobileShow="false"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义联系电话字号 --> |
||||||
|
<h-watermark :mobileSize="16"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义联系电话颜色 --> |
||||||
|
<h-watermark mobileColor="#30b6a2"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义联系电话透明度 --> |
||||||
|
<h-watermark :mobileLucency="0.4"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义软件名称 --> |
||||||
|
<h-watermark appName="自定义软件名称"></h-watermark> |
||||||
|
|
||||||
|
<!-- 是否显示软件名称 --> |
||||||
|
<h-watermark :appNameShow="false"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义软件名称字号 --> |
||||||
|
<h-watermark :appNameSize="16"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义软件名称颜色 --> |
||||||
|
<h-watermark appNameColor="#30b6a2"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义软件名称透明度 --> |
||||||
|
<h-watermark :appNameLucency="0.4"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义旋转弧度 --> |
||||||
|
<h-watermark :rotate="45"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义父级容器 -->// 写在父级容器中 |
||||||
|
<view style="height: 500px;position: relative;"> |
||||||
|
<h-watermark position="absolute"></h-watermark> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 自定义放大缩小 --> |
||||||
|
<h-watermark :scale="0.5"></h-watermark> |
||||||
|
|
||||||
|
<!-- 自定义水印列数 --> |
||||||
|
<h-watermark :column="50"></h-watermark> |
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
### Props |
||||||
|
|
||||||
|
| 属性名 | 类型 | 默认值 | 说明 | |
||||||
|
| :-------: | :-----: | :-----: | :-----------------------: | |
||||||
|
| title | String | 水印组件 | 标题文字 | |
||||||
|
| titleShow | Boolean | true | 是否显示标题文字 | |
||||||
|
| titleSize | Number | 16 | 标题文字字号 | |
||||||
|
| titleColor | String | #f15723 | 标题文字颜色 | |
||||||
|
| titleLucency | Number | 0.2 | 标题文字透明度 | |
||||||
|
| mobile | String | 18761665823 | 联系电话 | |
||||||
|
| mobileShow | Boolean | true | 是否显示联系电话 | |
||||||
|
| mobileSize | Number | 10 | 联系电话字号 | |
||||||
|
| mobileColor | String | #f15723 | 联系电话颜色 | |
||||||
|
| mobileLucency | Number | 0.2 | 联系电话透明度 | |
||||||
|
| appName | String | 组件 | 软件名称 | |
||||||
|
| appNameShow | Boolean | true | 是否显示软件名称 | |
||||||
|
| appNameSize | Number | 10 | 软件名称字号 | |
||||||
|
| appNameColor | String | #f15723 | 软件名称颜色 | |
||||||
|
| appNameLucency| Number | 0.2 | 软件名称透明度 | |
||||||
|
| rotate | Number | -45 | 旋转弧度 | |
||||||
|
| position | String | fixed | 布局方式（绝对布局-相对布局） | |
||||||
|
| scale | Number | 1 | 放大缩小 | |
||||||
|
| column | Number | 15 | 水印列数 | |
||||||
Loading…
Reference in new issue