进入uniapp
This commit is contained in:
4
im-uniapp/uni_modules/zmm-watermark/changelog.md
Normal file
4
im-uniapp/uni_modules/zmm-watermark/changelog.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## 1.1.2（2022-01-12）
|
||||
调整为uni_modules目录规范
|
||||
## 1.0（2021-03-31）
|
||||
发布1.0版本
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view v-if="show">
|
||||
<view class="zmm-watermark-box" :style="[{'top':top+'px'},{'opacity':opacity}]">
|
||||
<view class="zmm-watermark-getwh" ref="getwh" id="getwh" :style="[{'max-width':maxWidth+'px'}]">
|
||||
<rich-text :nodes="watermark"></rich-text>
|
||||
</view>
|
||||
<view class="zmm-watermark-content">
|
||||
<view class="zmm-watermark-text" :style="[{'color':color},{'margin-bottom':margin+'px'},{'max-width':maxWidth+'px'},{'transform':'rotate('+rotate+'deg)'}]" v-for="(item,index) in forLength" :key="index">
|
||||
<rich-text :nodes="watermark"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
top: 0,//H5状态栏高度
|
||||
forLength: 0 //水印数量
|
||||
};
|
||||
},
|
||||
props: {
|
||||
maxWidth: { //单条水印最大宽度
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
rotate: { //水印旋转角度
|
||||
type: Number,
|
||||
default: -21
|
||||
},
|
||||
margin: { //水印之间上下间距
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
watermark: { //水印文字(支持html富文本)
|
||||
type: String,
|
||||
default: '水印文字'
|
||||
},
|
||||
color: { //水印文字默认颜色
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
opacity: { //水印透明度
|
||||
type: Number,
|
||||
default: 0.15
|
||||
},
|
||||
show: { //是否显示水印
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getstatusBarHeight();
|
||||
},
|
||||
methods: {
|
||||
getstatusBarHeight() { //计算水印数量
|
||||
var SystemInfo = uni.getSystemInfoSync();
|
||||
this.top = SystemInfo.safeArea.top + SystemInfo.windowTop;
|
||||
var screenArea = parseInt(SystemInfo.screenHeight * (SystemInfo.screenWidth * 1.2))
|
||||
var watermarkArea = 0
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#getwh').boundingClientRect(data => {
|
||||
watermarkArea = parseInt((data.height + this.margin) * data.width)
|
||||
}).exec();
|
||||
var timer = setInterval(() => {
|
||||
if (watermarkArea == 0) {} else {
|
||||
clearInterval(timer)
|
||||
this.forLength = parseInt((screenArea / watermarkArea))
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.zmm-watermark-box {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.zmm-watermark-content {
|
||||
left: -10%;
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zmm-watermark-text {
|
||||
text-align: center;
|
||||
transform: rotate(-21deg);
|
||||
margin: 0 10px;
|
||||
margin-bottom: 100rpx;
|
||||
color: rgba(0, 0, 0, 0.05);
|
||||
max-width: 180px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 10rpx;
|
||||
word-break: break-all;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zmm-watermark-getwh {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
max-width: 180px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 10rpx;
|
||||
word-break: break-all;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
83
im-uniapp/uni_modules/zmm-watermark/package.json
Normal file
83
im-uniapp/uni_modules/zmm-watermark/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "zmm-watermark",
|
||||
"displayName": "zmm-watermark-通用水印组件",
|
||||
"version": "1.1.2",
|
||||
"description": "支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等",
|
||||
"keywords": [
|
||||
"",
|
||||
"水印",
|
||||
"水印组件",
|
||||
"通用水印",
|
||||
"自定义水印",
|
||||
"富文本水印"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.1"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
im-uniapp/uni_modules/zmm-watermark/readme.md
Normal file
47
im-uniapp/uni_modules/zmm-watermark/readme.md
Normal file
@@ -0,0 +1,47 @@
|
||||
#uniapp水印组件
|
||||
|
||||
原理
|
||||
循环标签
|
||||
|
||||
作者
|
||||
`zmm2113@qq.com`
|
||||
|
||||
版本
|
||||
`1.1.2`
|
||||
> 兼容性支持：安卓、苹果、H5、微信小程序（其他平台未测试理论上支持）。不支持nvue！
|
||||
|
||||
优势
|
||||
> 支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等
|
||||
|
||||
一、使用示例
|
||||
```
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>uniapp水印通用组件 zmm-watermark</text>
|
||||
<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"|水印文字默认颜色
|
||||
show|Boolean|true|是否显示水印
|
||||
opacity|Number|0.15|水印透明度
|
||||
margin|Number|50|水印之间上下间距
|
||||
rotate|Number|-21|水印旋转角度
|
||||
maxWidth|Number|180|单条水印最大宽度
|
||||
Reference in New Issue
Block a user