Watermark 水印



<template>
  <el-button @click="submit"
             type="primary">全局水印</el-button>
  <el-button @click="submit1"
             type="primary">局部水印</el-button>
  <el-button @click="del"
             type="danger">删除水印</el-button>
  <br /> <br />
  <div id="test"
       style="width:300px;height:300px;border:1px solid #ccc;position:relative;"></div>
</template>
<script>
export default {
  data () {
    return {
      obj: '',
      obj1: '',
      create: false
    }
  },
  methods: {
    submit () {
      if (this.create) {
        this.$message.success('已经创建水印了')
        return
      }
      this.create = true;
      this.$message.success('添加水印成功')
      this.obj = this.$Watermark({ text: 'avue全局水印' })
    },
    submit1 () {
      this.obj1 = this.$Watermark({ id: 'test', fontSize: '14px', width: '100', height: '80', text: 'avue局部水印' })
    },
    del () {
      this.obj.remove();
      this.obj1.remove();
      this.create = false;
    },
  }
}
</script>
显示代码

Variables

参数说明类型可选值默认值
text文字内容String-avue商用通用无敌大水印
fontSize字体大小String-30px
fontStyle字体类型String-黑体
width字体的宽度String-200
height字体的高度String-400
color字体颜色String-rgba(100,100,100,0.15)
degree文本旋转角度String--20
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档