Vue前端添加水印功能

概要

前端Vue在页面添加水印，且不影响页面其他功能使用，初级代码水准即可使用，且有防人修改或者删除功能！

提示：适用于Vue，组件已经封装开箱即用，有对应配置项！

技术细节

1. 需要展示水印的界面这里以demo.vue为例 引入核心文件(组件) waterMask.vue ，直接复制粘贴即可

// watermask类名不能省略， 此类名组件有检测，即使人为删除也会重新创建，提高安全性
template>
    div class="watermask">
        water-mask>/water-mask>
    /div>
/template>
script>
import waterMask from './waterMark.vue';	// 文件在同级下
export default {
   
    components: {
   waterMask},
}
/script>

2. 引入核心文件(组件) waterMask.vue,和 demo.vue 位于同级服务器托管网下，所有的属性修改都在 data=>initProps下 不用在意怎么实现，直接复制粘贴即可，做一个合格的CV工程师

template>
    div class="_waterMask">/div>
/template>
script>
export default {
   
    props: {
   
        //是否允许通过js或者开发者工具等途径修改水印DOM节点（水印的id，attribute属性，节点的删除）
        //true为允许，默认不允许
        inputAllowDele: {
   
            type: Boolean,
            default: false
        },
        //是否在销毁组件时去除水印节点（前提是允许用户修改DOM，否则去除后会再次自动生成）
        // true会，默认不会
        inputDestroy: {
   
            type: Boolean,
            default: false
        }
    },
    data() {
   服务器托管网
        return {
   
            drawer: true,
            maskDiv: {
   }

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 从零开始：PHP实现阿里云直播的简单方法！

1. 配置阿里云直播的推流地址和播放地址 使用阿里云直播功能前，首先需要在阿里云控制台中创建直播应用，然后获取推流地址和播放地址。 推流地址一般格式为： rtmp://{Domain}/{AppName}/{StreamName}?auth_key={Auth…