Vue使用自定義指令實現(xiàn)頁面底部加水印
更新時間：2021年06月04日 14:20:35 作者：卡洛背心
本文主要實現(xiàn)給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價值，感興趣的小伙伴們可以參考一下
項目場景
給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等
實現(xiàn)思路
- 這里使用的技術(shù)主要是canvas,在實現(xiàn)水印的過程中，主要使用了canvas的特性
- 使用 canvas 特性生成 base64 格式的圖片文件，然后設(shè)置其字體大小，顏色等
- 最后將其設(shè)置為背景圖片，這就實現(xiàn)了頁面的水印效果
實現(xiàn)效果
實現(xiàn)代碼
<template>
<div class="water-marker" >
<div v-waterMarker="{text:'卡洛背心 - 版權(quán)所有',textColor:'rgba(180, 180, 180, 0.4)'}">
<div class="water-marker-item">測試問題啊測試問題啊測試問題啊測試問題啊測試問題啊測試問題啊</div>
</div>
</div>
</template>
<script>
import waterMarker from '../../directive/test/waterMarker'
export default {
directives: {
waterMarker
},
data(){
return{
}
},
methods:{
}
}
</script>
<style lang="scss">
.water-marker{
height: 300px;
.water-marker-item{
line-height: 300px;
}
}
</style>
waterMarker.js文件如下：
function addWaterMarker(str, parentNode, font, textColor) {
// 水印文字，父元素，字體，文字顏色
var can = document.createElement('canvas')
parentNode.appendChild(can)
can.width = 200
can.height = 150
can.style.display = 'none'
var cans = can.getContext('2d')
cans.rotate((-20 * Math.PI) / 180)
cans.font = font || '16px Microsoft JhengHei'
cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, can.width / 10, can.height / 2)
parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
const waterMarker = {
bind: function (el, binding) {
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
},
}
export default waterMarker
到此這篇關(guān)于Vue使用自定義指令實現(xiàn)頁面底部加水印的文章就介紹到這了,更多相關(guān)Vue 頁面底部加水印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇iview日期控件,雙向綁定日期格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js每天必學(xué)之過濾器與自定義過濾器,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
一文詳解VueUse中useAsyncState的實現(xiàn)原理
在Vue 3 Composition API中,我們可以使用自定義鉤子函數(shù)來封裝可復(fù)用的邏輯,useAsyncState是一個用于管理異步狀態(tài)的自定義鉤子函數(shù),本文將給大家介紹一下useAsyncState的實現(xiàn)原理,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue2的diff算法的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue實現(xiàn)flv格式視頻播放,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue3新擬態(tài)組件庫開發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫開發(fā)流程——table組件源碼,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue中實現(xiàn)權(quán)限控制的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06