🎉 新增 scWaterMark 水印组件

src/api/model/system.js

@@ -4,7 +4,7 @@ import http from "@/utils/request"
 export default {
 	menu: {
 		myMenus: {
-			url: `${config.API_URL}/system/menu/my/1.4.1`,
+			url: `${config.API_URL}/system/menu/my/1.4.2`,
 			name: "获取我的菜单",
 			get: async function(){
 				return await http.get(this.url);

src/components/scWaterMark/index.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Descripttion: 局部水印组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年12月18日12:16:16
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-water-mark" ref="scWaterMark">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			text: { type: String, required: true, default: "" },
+			subtext: { type: String, default: "" },
+			color: { type: String, default: "rgba(128,128,128,0.2)" }
+		},
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+			this.create()
+		},
+		methods: {
+			create(){
+				this.clear()
+				//创建画板
+				var canvas = document.createElement('canvas')
+				canvas.width = 150
+				canvas.height = 150
+				canvas.style.display = 'none'
+				//绘制文字
+				var text = canvas.getContext('2d')
+				text.rotate(-45 * Math.PI / 180)
+				text.translate(-75, 25)
+				text.fillStyle = this.color
+				text.font = "bold 20px SimHei"
+				text.textAlign = "center"
+				text.fillText(this.text, canvas.width / 2, canvas.height / 2)
+				text.font = "14px Microsoft YaHei"
+				text.fillText(this.subtext, canvas.width / 2, canvas.height / 2 + 20)
+				//创建水印容器
+				var watermark = document.createElement('div')
+				watermark.setAttribute('class', 'watermark')
+				const styleStr = `position:absolute;top:0;left:0;right:0;bottom:0;z-index:99;pointer-events:none;background-repeat:repeat;background-image:url('${canvas.toDataURL("image/png")}');`
+				watermark.setAttribute('style', styleStr);
+				this.$refs.scWaterMark.appendChild(watermark)
+			},
+			clear(){
+				var wmDom = this.$refs.scWaterMark.querySelector('.watermark')
+				wmDom && wmDom.remove()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-water-mark {position: relative;}
+</style>

src/scui.js

@@ -3,6 +3,7 @@ import api from './api'
 import tool from './utils/tool'
 import http from "./utils/request"
 import { permission, rolePermission } from './utils/permission'
+
 import scTable from './components/scTable'
 import scFilterBar from './components/scFilterBar'
 import scUpload from './components/scUpload'
@@ -14,8 +15,11 @@ import scSelect from './components/scSelect'
 import scDialog from './components/scDialog'
 import scForm from './components/scForm'
 import scTitle from './components/scTitle'
+import scWaterMark from './components/scWaterMark'
+
 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
+
 import auth from './directives/auth'
 import role from './directives/role'
 import time from './directives/time'
@@ -47,6 +51,7 @@ export default {
 		app.component('scDialog', scDialog);
 		app.component('scForm', scForm);
 		app.component('scTitle', scTitle);
+		app.component('scWaterMark', scWaterMark);
 		app.component('scStatusIndicator', scStatusIndicator);
 		app.component('scTrend', scTrend);
 

src/views/vab/watermark.vue

@@ -0,0 +1,63 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<sc-water-mark ref="wm" text="欢迎体验SCUI" subtext="admin@scui.com">
+				<el-table :data="tableData" border stripe style="width: 100%">
+					<el-table-column prop="date" label="Date" width="180" />
+					<el-table-column prop="name" label="Name" width="180" />
+					<el-table-column prop="address" label="Address" />
+				</el-table>
+			</sc-water-mark>
+		</el-card>
+		<el-card shadow="never" style="margin-top: 15px;">
+			<el-button type="primary" @click="create">创建水印</el-button>
+			<el-button type="primary" @click="clear">移除水印</el-button>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'watermark',
+		data() {
+			return {
+				tableData: [
+					{
+						date: '2016-05-03',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+					{
+						date: '2016-05-02',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+					{
+						date: '2016-05-04',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+					{
+						date: '2016-05-01',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			create(){
+				this.$refs.wm.create()
+			},
+			clear(){
+				this.$refs.wm.clear()
+			}
+		}
+	}
+</script>
+
+<style>
+</style>