Angular 版本水印指令

歡迎關注github:https://github.com/myopenresources

安裝

npm install cc-water-marker --save 或 yarn add cc-water-marker

使用

// 業務模塊

import { WaterMarkerModule } from 'cc-water-marker';

 

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    WaterMarkerModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

//業務html，水印寬高是根據元素的寬高定的，請通過css設置元素的寬高

<div class="div" ccWaterMarker [options]="options" [zIndex]="8"></div>

 

//業務組件

import { Component } from '@angular/core';

import { WaterMarkerOptionModel } from 'cc-water-marker';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.less']

})

export class AppComponent {

  options: WaterMarkerOptionModel = {

    watermarkLabel: '這是一個水印'

  };

}

 

 

參數

1. options:WaterMarkerOptionModel; 具體參數如下：
   // 水印文本
   watermarkLabel?: string;
   // 水印起始位置x軸座標
   watermarkX?: number;
   // 水印起始位置Y軸座標
   watermarkY?: number;
   // 水印x軸間隔
   watermarkXSpace?: number;
   // 水印y軸間隔
   watermarkYSpace?: number;
   // 水印字體顏色
   watermarkColor?: string;
   // 水印字體大小
   watermarkFontSize?: string;
   // 水印透明度，要求設置在大於等於0.003
   watermarkAlpha?: number;
   // 水印寬度
   watermarkWidth?: number;
   // 水印高度
   watermarkHeight?: number;
   // 水印傾斜度數
   watermarkAngle?: number;
   // 是否顯示
   showWaterMark?: boolean;
   // 分割符號
   splitChar?: string;

2. zIndex:number; 層級，默認值爲999