🎉 新增 scWaterMark 水印组件
This commit is contained in:
parent
d7c3cdb52b
commit
7b47e710e3
|
@ -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);
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue