main
liudan
9 months ago
parent
93bc517856
commit
997230e8a6
@ -0,0 +1,17 @@ |
|||||||
|
## 1.1.5（2024-06-16） |
||||||
|
修改兼容性，去除show字段，控制显示用v-if操作 |
||||||
|
## 1.1.4（2024-06-15） |
||||||
|
column属性修复 |
||||||
|
## 1.1.3（2024-06-02） |
||||||
|
新特征： |
||||||
|
支持nvue |
||||||
|
改动： |
||||||
|
移除maxWidth属性(单条水印最大宽度) |
||||||
|
新增column属性可设置水印列数 |
||||||
|
新增fontSize属性可设置水印文字默认大小 |
||||||
|
修改margin属性为20(水印之间上下间距) |
||||||
|
nvue下支持覆盖video等元素 |
||||||
|
## 1.1.2（2022-01-12） |
||||||
|
调整为uni_modules目录规范 |
||||||
|
## 1.0（2021-03-31） |
||||||
|
发布1.0版本 |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
<template> |
||||||
|
<view class="zmm-watermark"> |
||||||
|
<!-- 单个用于计算 --> |
||||||
|
<view class="zmm-watermark-mold" ref="mold" id="mold"> |
||||||
|
<rich-text :style="moldStyle" :nodes="watermark"></rich-text> |
||||||
|
</view> |
||||||
|
<!-- 循环 --> |
||||||
|
<view class="zmm-watermark-content" :style="{opacity:opacity}"> |
||||||
|
<rich-text :nodes="watermark" :style="itemStyle" v-for="(item,index) in forLength" :key="index"></rich-text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// #ifdef APP-NVUE |
||||||
|
const dom = weex.requireModule("dom"); |
||||||
|
// #endif |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
forLength: 0, //水印数量 |
||||||
|
watermarkArea: 0 //水印大小(像素) |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
watermark: { //水印文字(支持html富文本) |
||||||
|
type: String, |
||||||
|
default: '南京仁舟科技有限公司' |
||||||
|
}, |
||||||
|
color: { //水印文字默认颜色 |
||||||
|
type: String, |
||||||
|
default: '#666' |
||||||
|
}, |
||||||
|
fontSize: { //水印文字大小 |
||||||
|
type: Number, |
||||||
|
default: 16 |
||||||
|
}, |
||||||
|
opacity: { //水印透明度 |
||||||
|
type: Number, |
||||||
|
default: 0.15 |
||||||
|
}, |
||||||
|
margin: { //水印之间上下间距 |
||||||
|
type: Number, |
||||||
|
default: 10 |
||||||
|
}, |
||||||
|
rotate: { //水印旋转角度 |
||||||
|
type: Number, |
||||||
|
default: -21 |
||||||
|
}, |
||||||
|
column: { //水印列数 |
||||||
|
type: Number, |
||||||
|
default: 3 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 单个水印 |
||||||
|
moldStyle() { |
||||||
|
return `width:${this.itemWidth}px;text-align: center;font-size:${this.fontSize}px;` |
||||||
|
}, |
||||||
|
// 循环水印 |
||||||
|
itemStyle() { |
||||||
|
return `color:${this.color};font-size:${this.fontSize}px;margin:${this.margin}px;width:${this.itemWidth}px;transform:rotate(${this.rotate}deg);text-align: center;` |
||||||
|
}, |
||||||
|
// 屏幕像素 |
||||||
|
screenArea() { |
||||||
|
let height = uni.getSystemInfoSync().windowHeight + uni.getSystemInfoSync().windowTop |
||||||
|
let width = uni.getSystemInfoSync().windowWidth |
||||||
|
return Math.floor(height * width * 1.2) |
||||||
|
}, |
||||||
|
// 单个水印最大长度 |
||||||
|
itemWidth() { |
||||||
|
let windowWidth = uni.getSystemInfoSync().windowWidth |
||||||
|
return Math.floor(windowWidth / this.column - this.margin * 2) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
watermark: { |
||||||
|
handler(v) { |
||||||
|
if (v) { |
||||||
|
this.countForLength(); |
||||||
|
} |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if (this.watermark) { |
||||||
|
this.countForLength(); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
countForLength() { //计算水印数量 |
||||||
|
// #ifndef APP-NVUE |
||||||
|
const query = uni.createSelectorQuery().in(this); |
||||||
|
query.select('#mold').boundingClientRect(data => { |
||||||
|
let width = data.width ? data.width : this.itemWidth |
||||||
|
let height = data.height ? data.height : 30 |
||||||
|
let itemWidth = width + this.margin * 2 |
||||||
|
let itemHeight = height + this.margin * 2 |
||||||
|
this.watermarkArea = Math.floor(itemWidth * itemHeight) |
||||||
|
this.forLength = Math.floor(this.screenArea / this.watermarkArea) |
||||||
|
}).exec(); |
||||||
|
// #endif |
||||||
|
// #ifdef APP-NVUE |
||||||
|
setTimeout(() => { |
||||||
|
const result = dom.getComponentRect(this.$refs.mold, (option) => { |
||||||
|
let size = option.size; |
||||||
|
let itemWidth = size.width + this.margin * 2 |
||||||
|
let itemHeight = size.height + this.margin * 2 |
||||||
|
this.watermarkArea = Math.floor(itemWidth * itemHeight) |
||||||
|
this.forLength = Math.floor(this.screenArea / this.watermarkArea) |
||||||
|
}); |
||||||
|
}, 50); |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.zmm-watermark { |
||||||
|
position: fixed; |
||||||
|
overflow: hidden; |
||||||
|
z-index: 999; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
pointer-events: none; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
.zmm-watermark-content { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.zmm-watermark-mold { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
{ |
||||||
|
"id": "zmm-watermark", |
||||||
|
"displayName": "zmm-watermark-通用水印组件", |
||||||
|
"version": "1.1.5", |
||||||
|
"description": "支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等", |
||||||
|
"keywords": [ |
||||||
|
"", |
||||||
|
"水印", |
||||||
|
"水印组件", |
||||||
|
"通用水印", |
||||||
|
"自定义水印", |
||||||
|
"富文本水印" |
||||||
|
], |
||||||
|
"repository": "", |
||||||
|
"engines": { |
||||||
|
"HBuilderX": "^3.6.17" |
||||||
|
}, |
||||||
|
"dcloudext": { |
||||||
|
"sale": { |
||||||
|
"regular": { |
||||||
|
"price": "0.00" |
||||||
|
}, |
||||||
|
"sourcecode": { |
||||||
|
"price": "0.00" |
||||||
|
} |
||||||
|
}, |
||||||
|
"contact": { |
||||||
|
"qq": "" |
||||||
|
}, |
||||||
|
"declaration": { |
||||||
|
"ads": "无", |
||||||
|
"data": "插件不采集任何数据", |
||||||
|
"permissions": "无" |
||||||
|
}, |
||||||
|
"npmurl": "", |
||||||
|
"type": "component-vue" |
||||||
|
}, |
||||||
|
"uni_modules": { |
||||||
|
"platforms": { |
||||||
|
"cloud": { |
||||||
|
"tcb": "y", |
||||||
|
"aliyun": "y", |
||||||
|
"alipay": "n" |
||||||
|
}, |
||||||
|
"client": { |
||||||
|
"App": { |
||||||
|
"app-vue": "y", |
||||||
|
"app-nvue": "y" |
||||||
|
}, |
||||||
|
"H5-mobile": { |
||||||
|
"Safari": "y", |
||||||
|
"Android Browser": "y", |
||||||
|
"微信浏览器(Android)": "y", |
||||||
|
"QQ浏览器(Android)": "y" |
||||||
|
}, |
||||||
|
"H5-pc": { |
||||||
|
"Chrome": "y", |
||||||
|
"IE": "y", |
||||||
|
"Edge": "y", |
||||||
|
"Firefox": "y", |
||||||
|
"Safari": "y" |
||||||
|
}, |
||||||
|
"小程序": { |
||||||
|
"微信": "y", |
||||||
|
"阿里": "y", |
||||||
|
"百度": "y", |
||||||
|
"字节跳动": "y", |
||||||
|
"QQ": "y" |
||||||
|
}, |
||||||
|
"快应用": { |
||||||
|
"华为": "y", |
||||||
|
"联盟": "y" |
||||||
|
}, |
||||||
|
"Vue": { |
||||||
|
"vue2": "y", |
||||||
|
"vue3": "y" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
#uniapp水印组件 |
||||||
|
|
||||||
|
原理 |
||||||
|
循环标签 |
||||||
|
|
||||||
|
作者 |
||||||
|
`zmm2113@qq.com` |
||||||
|
|
||||||
|
版本 |
||||||
|
> 兼容性支持：安卓、苹果、H5、微信小程序（其他平台未测试理论上支持） |
||||||
|
|
||||||
|
优势 |
||||||
|
> 支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等 |
||||||
|
|
||||||
|
注意事项 |
||||||
|
> 因为层级原因需要将组件需要放置到顶部 |
||||||
|
|
||||||
|
一、使用示例 |
||||||
|
``` |
||||||
|
<template> |
||||||
|
<view class="container"> |
||||||
|
<zmm-watermark :watermark="watermark"></zmm-watermark> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import img from '@/static/logo.png'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br><img style="width:30px" src="' + img + '" />' |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
二、配置(注意配置数据类型) |
||||||
|
|
||||||
|
配置|数据类型|默认参数|说明 |
||||||
|
-|-|-|- |
||||||
|
watermark|String|"水印文字"|水印文字(支持html富文本) |
||||||
|
color|String|"#000000"|水印文字默认颜色 |
||||||
|
fontSize|Number|16|水印文字大小 |
||||||
|
opacity|Number|0.15|水印透明度 |
||||||
|
margin|Number|20|水印之间上下间距 |
||||||
|
rotate|Number|-21|水印旋转角度 |
||||||
|
column|Number|3|水印列数 |
||||||
Loading…
Reference in new issue