meixiwatermark

当某些文件/图片需要水印的时候，可以使用该组件。

项目结构

        |-- lib ---------------------------------打包后文件夹
    |   |-- UseWaterMark.d.ts
    |   |-- UseWaterMark.js
    |   |-- config.d.ts
    |   |-- config.js
    |   |-- demo.html
    |   |-- index.d.ts
    |   |-- index.js
    |   |-- meixiwatermark.common.js
    |   |-- meixiwatermark.umd.js
    |   |-- meixiwatermark.umd.min.js
    |-- packages ---------------------------------插件主要文件夹
    |   |-- .DS_Store
    |   |-- UseWaterMark.js
    |   |-- UseWaterMark.ts
    |   |-- config.js
    |   |-- config.ts
    |   |-- index.js
    |   |-- index.ts ---------------------------------插件入口文件
    |   |-- type.d.ts
    |   |-- component ---------------------------------组件文件夹
    |       |-- meixiWaterMark.vue --------------------水印组件
    |-- src

组件预览

安装依赖

npm install meixiwatermark

项目文件

/// index.ts
// 入口文件导出
export {
    // 函数式创建水印
    UseWaterMark,
    //单个vue工程文件
    meixiWaterMark
}

插件使用

<!--组件式使用-->
<meixi-water-mark :font-size='25' :rotate='-45' :text='`魅熙`' :x='30' :y='30' style='width: 672px;height: 378px'>
    <template slot='waterMarkContent'>
        <img src='https://i1.hdslb.com/bfs/archive/8be18ccf97b4630e5545959da67bb57339a5f53c.jpg@672w_378h_1c_!web-home-common-cover.webp'
             style='width: 100%;height: 100%;position: relative;z-index: -1'>
    </template>
</meixi-water-mark>

函数式使用

<div ref='test' style='width: 672px;height: 378px'>
    <img src='https://i1.hdslb.com/bfs/archive/8be18ccf97b4630e5545959da67bb57339a5f53c.jpg@672w_378h_1c_!web-home-common-cover.webp'
         style='width: 100%;height: 100%;position: relative;z-index: -1'>
</div>

//第一个参数为element节点 需包含子节点
//第二个类型为textProps
//第三个类型为textStyle
const waterMark = new UseWaterMark(this.$refs.test, {text: '魅熙', observer: true}, {
    rotate: -33,
    x: 15,
    y: 15,
    fontSize: 15,
});

meixiwatermark Api

props

| 参数 | 类型 | 默认值 | 可选值 | 描述 | |------------|---------|--------|-----------------------------------------------------------------------------------------------|--------------------------| | text | String | 魅熙 | / | 水印的内容 | | fontWeight | String | normal | 见类型 | 文字字重 | | x | Number | 20 | / | 水印横轴间隔 | | y | Number | 20 | / | 水印竖轴间隔 | | fontSize | Number | 16 | | 水印文字大小 | | rotate | Number | -22 | | 水印旋转内容 | | observer | Boolean | true | true/false | 开启后当子节点属性被修改删除后都将重新渲染内容。 |

emit 事件

暂无

slot 插槽

<!--waterMarkContent需要被打上水印的内容-->
<template slot='waterMarkContent'>
    <img src='https://i1.hdslb.com/bfs/archive/8be18ccf97b4630e5545959da67bb57339a5f53c.jpg@672w_378h_1c_!web-home-common-cover.webp'
         style='width: 100%;height: 100%;position: relative;z-index: -1'>
</template>