vue-manage-system/src/views/element/watermark.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>