forked from github/dataease
feat: 支持水印设置
This commit is contained in:
wangjiahao
parent
66c473eaf6
commit
0fc6be4d22
@ -1,252 +0,0 @@
|
||||
<template>
|
||||
<el-row style="padding-top: 20px">
|
||||
<el-col :span="10">
|
||||
<el-form
|
||||
ref="watermarkForm"
|
||||
:model="watermarkForm"
|
||||
label-width="120px"
|
||||
size="mini"
|
||||
>
|
||||
<el-form-item label="">
|
||||
<el-checkbox
|
||||
v-model="watermarkForm.enablePanelCustom"
|
||||
>允许仪表板单独打开或者关闭水印
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item label="水印设置">
|
||||
<el-switch v-model="watermarkForm.enable"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容">
|
||||
<el-select
|
||||
v-model="watermarkForm.type"
|
||||
>
|
||||
<el-option
|
||||
label="自定义公式"
|
||||
value="custom"
|
||||
/>
|
||||
<el-option
|
||||
label="账号"
|
||||
value="userName"
|
||||
/>
|
||||
<el-option
|
||||
label="昵称"
|
||||
value="nickName"
|
||||
/>
|
||||
<el-option
|
||||
label="IP"
|
||||
value="ip"
|
||||
/>
|
||||
<el-option
|
||||
label="当前时间"
|
||||
value="time"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="watermarkForm.type==='custom'">
|
||||
<codemirror
|
||||
ref="myCm"
|
||||
v-model="watermarkForm.content"
|
||||
class="codemirror"
|
||||
:options="cmOption"
|
||||
@ready="onCmReady"
|
||||
@focus="onCmFocus"
|
||||
@input="onCmCodeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="水印颜色">
|
||||
<el-color-picker
|
||||
v-model="watermarkForm.watermark_color"
|
||||
:predefine="predefineColors"
|
||||
size="mini"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="水印字号">
|
||||
<el-input-number
|
||||
v-model="watermarkForm.watermark_fontsize"
|
||||
:min="12"
|
||||
:max="64"
|
||||
size="mini"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="水印间距">
|
||||
横向：
|
||||
<el-input-number
|
||||
v-model="watermarkForm.watermark_x_space"
|
||||
:max="400"
|
||||
size="mini"
|
||||
/>
|
||||
px
|
||||
|
||||
纵向：
|
||||
<el-input-number
|
||||
v-model="watermarkForm.watermark_y_space"
|
||||
:max="400"
|
||||
size="mini"
|
||||
/>
|
||||
px
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row style="text-align: center">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="preview"
|
||||
>预览
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="i"
|
||||
@click="cancel"
|
||||
>取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="save"
|
||||
>保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding: 20px;border-left: 1px solid gainsboro;">
|
||||
<div id="watermark-demo" style="height: 100%;width: 100%;position: relative">
|
||||
<img width="100%" src="@/assets/watermark-demo.png">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import draggable from 'vuedraggable'
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效
|
||||
import 'codemirror/theme/solarized.css'
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
// require active-line.js
|
||||
import 'codemirror/addon/selection/active-line.js'
|
||||
// closebrackets
|
||||
import 'codemirror/addon/edit/closebrackets.js'
|
||||
// keyMap
|
||||
import 'codemirror/mode/clike/clike.js'
|
||||
import 'codemirror/addon/edit/matchbrackets.js'
|
||||
import 'codemirror/addon/comment/comment.js'
|
||||
import 'codemirror/addon/dialog/dialog.js'
|
||||
import 'codemirror/addon/dialog/dialog.css'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/search.js'
|
||||
import 'codemirror/keymap/emacs.js'
|
||||
// 引入代码自动提示插件
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/hint/sql-hint'
|
||||
import 'codemirror/addon/hint/show-hint'
|
||||
import { getNow, watermark } from '@/components/canvas/tools/watermark'
|
||||
|
||||
export default {
|
||||
name: 'Watermark',
|
||||
components: { codemirror, draggable },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
cmOption: {
|
||||
tabSize: 2,
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
mode: 'text/x-textile',
|
||||
theme: 'solarized',
|
||||
hintOptions: { // 自定义提示选项
|
||||
completeSingle: false // 当匹配只有一项的时候是否自动补全
|
||||
}
|
||||
},
|
||||
watermarkForm: {
|
||||
enable: false,
|
||||
enablePanelCustom: false,
|
||||
type: 'userName',
|
||||
content: '',
|
||||
watermark_color: '#999999',
|
||||
watermark_x_space: 100,
|
||||
watermark_y_space: 100,
|
||||
watermark_fontsize: 20
|
||||
},
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#999999',
|
||||
'#000000',
|
||||
'#FFFFFF'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
codemirror() {
|
||||
return this.$refs.myCm.codemirror
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.initWatermark()
|
||||
},
|
||||
methods: {
|
||||
preview() {
|
||||
|
||||
},
|
||||
cancel() {
|
||||
|
||||
},
|
||||
save() {
|
||||
|
||||
},
|
||||
initWatermark() {
|
||||
const settings = {
|
||||
watermark_txt: '王嘉豪' + getNow(),
|
||||
watermark_color: this.watermarkForm.watermark_color,
|
||||
watermark_x_space: this.watermarkForm.watermark_x_space,
|
||||
watermark_y_space: this.watermarkForm.watermark_y_space,
|
||||
watermark_fontsize: this.watermarkForm.watermark_fontsize
|
||||
}
|
||||
const now = getNow()
|
||||
watermark(settings, 'watermark-demo')
|
||||
},
|
||||
onCmReady(cm) {
|
||||
this.codemirror.setSize('-webkit-fill-available', 'auto')
|
||||
},
|
||||
onCmFocus(cm) {
|
||||
},
|
||||
onCmCodeChange(newCode) {
|
||||
// this.fieldForm.originName = newCode
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
::v-deep .CodeMirror {
|
||||
height: 190px !important;
|
||||
}
|
||||
|
||||
.codemirror {
|
||||
height: 190px;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.codemirror ::v-deep .CodeMirror-scroll {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user