master
parent
a01e54eb73
commit
18824a66c8
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue