MutationObserver用法总结（我知道你们要在vue中想用MutationObserver监听一个特定样式的变化）

如果你想多看看的话，点击这个链接去研究MutationObserver使用方法及配置参考

一般来说拿来用就可以满足需求了

我们有时候会遇到这样一些情况，例如我想要给一个按钮动态的绑定一个样式，这个样式的绑定依赖于我们定义的一个变量，但是该变量也是动态的，变量的值依赖于另外一个内部组件样式的变化

这是我在vue中使用技巧============================》

script如下：

export default {
  name: "HelloWorld",
  data() {
    return {
      isActive: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.watchDialogStyle(this.$refs.dialog.$el);
    });
  },
  methods: {
    openDialog() {
      this.$refs.dialog.$el.style.display = "block";
    },
    dialogBeforeClose() {
      this.$refs.dialog.$el.style.display = "none";
    },
    watchDialogStyle(dialog) {
      const observer = new MutationObserver( (mutations) =>  {
      mutations.forEach((mutation) => {
          if(dialog.style.display === 'none'){
            this.isActive = true;
          }
          else{
            this.isActive = false;
          }
        });
      });
      observer.observe(dialog, {
        attributeFilter: ["style"]
      });
    },
  },
};

模板如下：

<template>
  <div :class="{'mycolor':isActive}" class="hello">
    <el-button
      type="primary"
      class="el-button"
      @click.stop="openDialog"
      >点击</el-button
    >
    <el-dialog
      ref="dialog"
      title="我是dialog"
      width="300px"
      :visible="false"
      :before-close="dialogBeforeClose"
    >
      <div></div>
      <div slot="footer">
        <el-button @click="dialogBeforeClose">取 消</el-button>
        <el-button type="primary" @click="dialogBeforeClose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

用起来还是很方便的，一看就会了，欢迎大家一起交流哈~~~~~