fes.js/assets/js/v-1c0edac3.2e98d304.js

"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[835],{4710:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-1c0edac3",path:"/reference/plugin/plugins/watermark.html",title:"@fesjs/plugin-watermark",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"disabled",slug:"disabled",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"createWatermark",slug:"createwatermark",children:[]}]}],filePathRelative:"reference/plugin/plugins/watermark.md",git:{updatedTime:1653450562e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5243:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const e=(0,a(6252).uE)('<h1 id="fesjs-plugin-watermark" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-watermark" aria-hidden="true">#</a> @fesjs/plugin-watermark</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>给页面添加水印效果</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>\n        <span class="token property">&quot;@fesjs/plugin-watermark&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n    <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n        <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled" aria-hidden="true">#</a> disabled</h3><p>是否禁用水印，默认是<code>false</code>。</p><p>可以在开发环境关闭水印：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n    <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n        <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="createwatermark" tabindex="-1"><a class="header-anchor" href="#createwatermark" aria-hidden="true">#</a> createWatermark</h3><p>创建水印功能，通过 <code>@fesjs/fes</code> 导入 API：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createWatermark<span class="token punctuation">,</span> destroyWatermark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>\n\n<span class="token function">createWatermark</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&#39;我是水印&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 生成水印</span>\n<span class="token function">destroyWatermark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 销毁水印</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>默认参数是：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>\n    content <span class="token operator">=</span> <span class="token string">&#39;请勿外传&#39;</span><span class="token punctuation">,</span>\n    container <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">,</span>\n    width <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span>\n    height <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span>\n    textAlign <span class="token operator">=</span> <span class="token string">&#39;center&#39;</span><span class="token punctuation">,</span>\n    textBaseline <span class="token operator">=</span> <span class="token string">&#39;middle&#39;</span><span class="token punctuation">,</span>\n    fontSize <span class="token operator">=</span> <span class="token string">&#39;14px&#39;</span><span class="token punctuation">,</span>\n    fontFamily <span class="token operator">=</span> <span class="token string">&#39;Microsoft Yahei&#39;</span><span class="token punctuation">,</span>\n    fillStyle <span class="token operator">=</span> <span class="token string">&#39;rgba(184, 184, 184, 0.3)&#39;</span><span class="token punctuation">,</span>\n    rotate <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">,</span>\n    zIndex <span class="token operator">=</span> <span class="token number">99999</span><span class="token punctuation">,</span>\n    timestamp <span class="token operator">=</span> <span class="token string">&#39;YYYY-MM-DD HH:mm&#39;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>如果不需要时间戳，则可以设置<code>timestamp</code>为<code>false</code>。</p>',19),p={},t=(0,a(3744).Z)(p,[["render",function(n,s){return e}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]);