# Watermark 水印

TIP

2.0.1+



<div style="width:400px">
  <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>
</div>
<script>
export default {
  data(){
    return {
      obj:'',
      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.watermark({id:'test',fontSize:'14px',width:'100',height:'80',text:'avue局部水印'})
      },
      del(){
        this.obj.remove();
        this.create=false;
      },
  }
}
</script>


Expand Copy

# 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: 9/1/2021, 3:44:54 PM