Vue设置简单的页面水印效果

<template>

    <div class="watermark">

        <div class="watermarkWrap">

            <div

                    :style="`color:${color};transform: rotate(${rotate}deg);width:${wm_w}%;height:${wm_h}%`"

                    class="wm"

                    v-for="(i,index) in watermarkNum"

                    :key="index"

            >{{watermarkText}}</div>

        </div>

    </div>

</template>

<script>

    export default {

        name: 'waterMark',

        components: {},

        data() {

            return {

                watermarkNum: 0, //水印数量

                watermarkRow: 2, //列数

                watermarkLine: 4, //行数

                rotate: -20, //文字旋转角度

                color: "#ccc", //文字颜色

                watermarkText: "魔主恋上九尾狐", //水印文字

                wm_w: 50,//水印宽度百分比

                wm_h: 20 //水印高度百分比

            }

        },

        created() {

        },

        mounted(){

            this.setWatermark();

        },

        computed: {},

        watch: {},

        methods: {

            //创建水印

            setWatermark() {

                let that = this;

                that.watermarkNum = that.watermarkRow * that.watermarkLine; //总水印数 = 行数 x 列数

                that.wm_w = 100 / that.watermarkRow;

                that.wm_h = 100 / that.watermarkLine;

            }

        }

    }

</script>

<style lang="scss" scoped>

    .watermark {

        .watermarkWrap{

            overflow: hidden;

            position: fixed;

            width: 100%;

            height: 100%;

            left: 0;

            top: 0;

            pointer-events: none;

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

        }

        .wm {

            display: flex;

            justify-content: center;

            align-items: center;

        }

    }

</style>