vue-coe-observer
observer
Last updated 2 years ago by viniazvd .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-coe-observer 
SYNC missed versions from official npm registry.

vue-coe-observer ✅

<q>based on MutationObserver API</q>

License

Install

yarn add vue-coe-observer

Include Plugin

import Vue from 'vue'

import VueCoeObserver from 'vue-coe-observer'

Vue.use(VueCoeObserver)

Full documentation

Example usage

<template>
  <div id="app">
    <div>
      <div ref="target1">
        <div v-for="item1 in items1" :key="item1.name">{{ item1.id }}</div>
      </div>

      <hr>

      <div ref="target2">
        <div v-for="item2 in items2" :key="item2.name">{{ item2.id }}</div>
      </div>
    </div>
  </div>
</template>

<script>
function getRandomColor () {
  const letters = '0123456789ABCDEF'

  let color = '#'
  for (let i = 0; i < 6; i++) color += letters[ Math.floor(Math.random() * 16) ]

  return color
}

export default {
  name: 'app',

  data () {
    return {
      obs1: {},
      obs2: {},
      items1: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ],
      items2: [
        { id: 11 },
        { id: 22 },
        { id: 33 }
      ]
    }
  },

  mounted () {
    const config = { childList: true }
    const callback = mutations => {
      return mutations.forEach(mutation => {
        if (mutation.type === 'childList') target1.style.color = getRandomColor()
      })
    }
    
    const target1 = this.$refs.target1
    const target2 = this.$refs.target2

    this.obs1 = this.$observer.init(callback)
    this.$observer.start(this.obs1, target1, config)

    this.obs2 = this.$observer.init(callback)
    this.$observer.start(this.obs2, target2, config)

    setTimeout(() => {
      this.items1.push({ id: 4 })
      this.items2.push({ id: 44 })
    }, 3000)

    setTimeout(() => {
      this.items1.push({ id: 5 })
      this.items2.push({ id: 55 })
      this.$observer.stop(this.obs2)
    }, 7000)

    setTimeout(() => {
      this.$observer.stop(this.obs1)
      this.items1.push({ id: 6 })
      this.items2.push({ id: 66 })
    }, 10000)
  }
}
</script>

or

<template>
  <div id="app">
    <div>
      <div ref="target1" class="target1">
        <div v-for="item1 in items1" :key="item1.id">{{ item1.id }}</div>
      </div>
    </div>
  </div>
</template>

<script>
function getRandomColor () {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) color += letters[ Math.floor(Math.random() * 16) ]
  return color
}
export default {
  name: 'app',

  data () {
    return {
      items1: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ]
    }
  },

  observe: {
    target1: {
      target: () => document.querySelector('.target1'),
      callback: mutations => {
        return mutations.forEach(mutation => {
          if (mutation.type === 'childList') document.querySelector('.target1').style.color = getRandomColor()
        })
      },
      config: { childList: true }
    }
  },

  mounted () {
    setTimeout(() => {
      this.items1.push({ id: 4 })
    }, 3000)
    setTimeout(() => {
      this.items1.push({ id: 5 })
    }, 7000)
    setTimeout(() => {
      this.$observer.stop(this.observers.target1)
      this.items1.push({ id: 6 })
    }, 10000)
  }
}
</script>

Current Tags

  • 0.0.2                                ...           latest (2 years ago)

2 Versions

  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |