Vue2实现应用添加水印的功能
需求
有的情况,我们需要给我们的网页添加水印。我们可以使用第三方库Watermark Design
。官方地址:https://watermark-design.github.io/watermark/zh/
效果
示例代码
入口文件main.js
import WatermarkDesign from '@watermark-design/vue';
Vue.use(WatermarkDesign)
vue容器App.vue
<template>
<div class="app">
<Watermark content="hello watermark" :width="200" :height="200">
<el-button type="primary" @click="goTo('test')">跳转到测试页-1</el-button>
<el-button type="primary" @click="goTo('test2')"
>跳转到测试页-2</el-button
>
<router-view></router-view>
</Watermark>
</div>
</template>
<script>
import watermark from '@/components/watermark/index.vue'
export default {
components: {
watermark,
},
data() {
return {}
},
methods: {
goTo(path) {
this.$router.push(path)
},
},
}
</script>
<style lang="less" scoped>
.app {
// width: 800px;
// height: 600px;
border: 1px solid;
}
</style>