描述

监听 dom 元素属性变化，支持回调函数处理，例如宽度、高度、class 类变化 等等

1.示例

推荐打开控制查看 dom元素节点 开始监听 设置容器高度300px 设置容器高度400px 设置容器高度100px

box-1

box-2

box-3

box-4

box-5

box-6

box-7

box-8

box-9

box-10

<template>
  <div>
    <el-divider content-position="left">推荐打开控制查看 dom元素节点 {{ listen ? '监听中...' : '' }}</el-divider>

    <el-button type="primary" @click="listen = !listen">{{ listen ? '停止监听' : '开始监听' }}</el-button>
    <el-button @click="onSetScrollHeight('300px')">设置容器高度300px</el-button>
    <el-button @click="onSetScrollHeight('400px')">设置容器高度400px</el-button>
    <el-button @click="onSetScrollHeight('100px')">设置容器高度100px</el-button>
    <el-button type="primary" @click="onForceUpdate" v-if="listen">强制刷新</el-button>

    <div
      class="batchElsPosInContainer-view"
      style="overflow-x: hidden; overflow-y: auto; height: 400px;border: 1px solid chocolate;"
      ref="scrollView"
    >
      <div :class="`batchElsPosInContainer-box-${item}`" v-for="item in total" :key="item">box-{{ item }}</div>
    </div>
  </div>
</template>

<script>
import { observerElementMutation, setStyle } from 'sf-utils2'

export default {
  data() {
    return {
      total: 10,
      listen: false // 开始监听
    }
  },

  watch: {
    listen: {
      handler(newVal) {
        if (this._observerMuation) {
          newVal ? this._observerMuation.start() : this._observerMuation.end()
        }
      }
    }
  },

  mounted() {
    // 先初始化，获取到observerElementMutation 实例对象
    this._observerMuation ||= observerElementMutation({
      callback: () => {
        alert('监听到高度变化了')
      },
      options: { el: this.$refs.scrollView }
    })
  },
  methods: {
    onSetScrollHeight(val) {
      // 设置dom style
      setStyle(this.$refs.scrollView, 'height', val)
    },

    onForceUpdate() {
      this._observerMuation && this._observerMuation?.forceUpdate()
    }
  }
}
</script>
<style>

.batchElsPosInContainer-view {
  overflow-x: hidden;
  overflow-y: auto;
  height: 400px;
  border: 1px solid chocolate;
  margin: 12px 0;
}
.batchElsPosInContainer-view > div {
  background: #eee;
  padding: 20px;
  text-align: center;
}
.batchElsPosInContainer-view > div + div {
  margin-top: 12px;
}

</style>

显示代码 复制代码 复制代码

打印结果：

2.入参说明

主参数

参数	说明	类型	是否必填	默认值
callback	监听变化后，要执行自定义的回调函数	Function	-	-
options	选项, 详情查看 👇	Object	-	-

options 说明

参数	说明	类型	是否必填	默认值
el	监听目标的 dom 元素	HtmlElement	-	-
attribute	监听的属性集合	Array<String>	-	-
observerOptions	一个可选的 MutationObserverInit (opens new window) 对象	Object	-	-

实例对象方法

参数	说明	类型	是否必填	默认值
init	初始化	Function	-	-
forceUpdate	强制执行，刷新	Function	-	-
start	开始监听	Function	-	-
end	结束监听	Function	-	-

3.源码

源码，点开查看 👈

import debounce from '../base/debounce'
import getStyle from './getStyle'
import { _MutationObserver } from './_constant'

/**
 * 监听元素属性变化，例如宽度、高度
 * @param {Function} callback
 * @param {Object} options
 * @returns {*}
 */
function observerElementMutation({
  callback = () => {},
  options = {
    el: null,
    attribute: ['height'],
    observerOptions: {
      attributes: true,
      childLIst: true,
      attributeOldValue: true,
      subtree: true
    }
  }
}) {
  observerElementMutation.fn = observerElementMutation.prototype = {
    start() {
      if (!this.observer) {
        // console.error('[warning] 缺少初始化参数')
        this.init()
      }
      this.observer.observe(this.defaultOptions.el, this.defaultOptions.observerOptions)
      return this
    },
    forceUpdate() {
      Object.keys(this.recordOldValue).forEach(v => {
        this.recordOldValue[v] = getStyle(this.defaultOptions.el, v)
      })
      callback.apply(this, arguments)
      return this
    },
    end() {
      if (this.observer) {
        console.warn('[end] 卸载监听成功')
        this.observer.disconnect()
        this.observer.takeRecords()
        this.observer = null
      }
      return this
    },
    init() {
      this.defaultOptions = {
        el: null,
        attribute: ['height'],
        ...options,
        observerOptions: {
          attributes: true,
          childLIst: true,
          attributeOldValue: true,
          subtree: true,
          ...(options.observerOptions || {})
        }
      }
      this.recordOldValue = this.defaultOptions.attribute.reduce((pre, cur) => {
        if (cur) pre[cur] = null
        return pre
      }, {})
      const observerCallback = mutationList => {
        if (
          Object.keys(this.recordOldValue).every(v => {
            if (this.recordOldValue[v] !== getStyle(this.defaultOptions.el, v)) {
              this.recordOldValue[v] = getStyle(this.defaultOptions.el, v)
              return false
            }
            return true
          })
        )
          return
        callback.apply(this, arguments)
      }
      const debounceDivResizeHandler = debounce(observerCallback.bind(this), 300)
      this.observer = new _MutationObserver(debounceDivResizeHandler)
      return this
    }
  }
  observerElementMutation.fn.init.prototype = observerElementMutation.fn
  return new observerElementMutation.fn.init()
}