0.0.6 • Published 1 year ago
meixiwatermark v0.0.6
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>