MutationObserver 小实践

54 阅读1分钟

` // if(this.$store.state.user.isLoack&& (!this.checkRole(['province']))) { // let dom1 = document.querySelector('.home-wrap') // let dom2 = document.querySelector('.layer') // let dom3 = document.querySelector('.layer-text') // let dom4 = document.querySelector('.home')

//   this.nodes = [dom1,dom2,dom3,dom4]
//   const restStyle = () => {
//     dom1.style.cssText = 'position: relative;'
//     dom2.style.cssText = 'position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 999;'
//     dom3.style.cssText = 'color: #f01; font-weight: bold; left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);'
//     dom4.style.cssText  = 'overflow: hidden !important;filter: blur(3.5px) !important;'
//     console.log('函数调用')
//     this.nodes.forEach(node => {
//       this.observer.observe(node, { attributes: true });
//     })
//   }
//   // 监控样式改动
//   this.observer = new MutationObserver(mutations => {
//     mutations.forEach(mutation => {
//       if (mutation.type === 'attributes' && mutation.attributeName == 'style') {
//         // 重置被修改的样式
//         console.log('样式被修改', mutation)
//         this.observer.disconnect();
//         restStyle()
//       }
//     });
//   });
//   this.nodes.forEach(node => {
//     this.observer.observe(node, { attributes: true });
//   })
// }`


destroyed() {     this.observer.disconnect();   }