62 lines
2.5 KiB
Vue
62 lines
2.5 KiB
Vue
<template>
|
|
<div class="container">
|
|
<el-row :gutter="20">
|
|
<el-col :span="18">
|
|
<el-watermark :content="config.content" :font="config.font" :z-index="config.zIndex"
|
|
:rotate="config.rotate" :gap="config.gap" :offset="config.offset">
|
|
<div style="height: 600px" />
|
|
</el-watermark>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form class="form" :model="config" label-position="top" label-width="50px">
|
|
<el-form-item label="Content">
|
|
<el-input v-model="config.content" />
|
|
</el-form-item>
|
|
<el-form-item label="Color">
|
|
<el-color-picker v-model="config.font.color" show-alpha />
|
|
</el-form-item>
|
|
<el-form-item label="FontSize">
|
|
<el-slider v-model="config.font.fontSize" />
|
|
</el-form-item>
|
|
<el-form-item label="zIndex">
|
|
<el-slider v-model="config.zIndex" />
|
|
</el-form-item>
|
|
<el-form-item label="Rotate">
|
|
<el-slider v-model="config.rotate" :min="-180" :max="180" />
|
|
</el-form-item>
|
|
<el-form-item label="Gap">
|
|
<el-space>
|
|
<el-input-number v-model="config.gap[0]" controls-position="right" />
|
|
<el-input-number v-model="config.gap[1]" controls-position="right" />
|
|
</el-space>
|
|
</el-form-item>
|
|
<el-form-item label="Offset">
|
|
<el-space>
|
|
<el-input-number v-model="config.offset[0]" placeholder="offsetLeft"
|
|
controls-position="right" />
|
|
<el-input-number v-model="config.offset[1]" placeholder="offsetTop"
|
|
controls-position="right" />
|
|
</el-space>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue'
|
|
|
|
const config = reactive({
|
|
content: 'vue-manage-system',
|
|
font: {
|
|
fontSize: 16,
|
|
color: 'rgba(0, 0, 0, 0.15)',
|
|
},
|
|
zIndex: -1,
|
|
rotate: -22,
|
|
gap: [100, 100] as [number, number],
|
|
offset: [] as unknown as [number, number],
|
|
})
|
|
</script> |