watermark-dom
watermark-dom copied to clipboard
saucxs
调用remove方法不生效
原谅我们单位的代码荡不出来，只能放图，init生效了，但是remove不了，是我哪里写错了吗
狗皮膏药式修复：注释掉这些代码：
// //监听dom是否被移除或者改变属性的回调函数
// var callback = function (records){
// if ((globalSetting && records.length === 1) || records.length === 1 && records[0].removedNodes.length >= 1) {
// loadMark(globalSetting);
// }
// };
// const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
// var watermarkDom = new MutationObserver(callback);
可以让remove正常使用。但是也失去了监听dom变化重新添加水印的能力。 我在vue中感觉是，vue中节点先变化了，然后又被上面的代码加回来了
各位注意看源代码，人家给了配置了，设置monitor之后，会使用window.MutationObserver，来observe这个dom包括子节点的变化，如果你这个时候使用remove，window.MutationObserve监听到了dom的变化，会重新调用loadMark，然后水印就会被重新添加回来，意思是你既然使用了monitor为true，就不要尝试用remove了，如果想要使用remove就把monitor设置成false，因为它默认会设置成true。 @saucxs 这里有一个问题，就是使用了init的时候，会给window设置load和resize事件，这个时候就要注意remove了，remove的时候，建议根据monitor的值，来决定是否给window把这两个事件监听给去掉，否则，这边刚调完remove去掉了水印，窗口一变化，水印立刻又有了。 我这边变通办法：为了使用load和resize，只能放弃init，因为事件添加了之后，无法去掉，使用load，然后我手动添加和去除resize和load事件。
亲测可以重新设置一个空格水印来实现取消水印的效果。
watermark.load({ watermark_txt: ' ' // 水印的内容 注意：不能是空字符串，必须是空格。 })
亲测可以重新设置一个空格水印来实现取消水印的效果。
watermark.load({ watermark_txt: ' ' // 水印的内容 注意：不能是空字符串，必须是空格。 })
这个真的有用
2023考古，还有人在解决这个vue下remove失效的问题吗
在mounted里this.loadMark();，在beforeDestory里watermark.remove()，就ok了，去别的页面没有水印；
loadMark() {
watermark.load({...this.waterMarkText, monitor: false })
},
缩放页面变大解决： mounted里加入：window.addEventListener('resize', this.loadMark); beforeDestory里加入window.removeEventListener('resize', this.loadMark);
2023考古，还有人在解决这个vue下remove失效的问题吗
在mounted里this.loadMark();，在beforeDestory里watermark.remove()，就ok了，去别的页面没有水印；
loadMark() { watermark.load({...this.waterMarkText, monitor: false }) },缩放页面变大解决： mounted里加入：window.addEventListener('resize', this.loadMark); beforeDestory里加入window.removeEventListener('resize', this.loadMark);
有效！
亲测可以重新设置一个空格水印来实现取消水印的效果。
watermark.load({ watermark_txt: ' ' // 水印的内容 注意：不能是空字符串，必须是空格。 })
曲线救国了，困扰多时的问题。其实这个改起来因该不复杂，只要remove时候去掉监听就行了，只是作者好像不更新了
