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