quasar/docs/src/examples/Intersection/Advanced.vue at dev · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
  <div class="relative-position">
    <div class="example-area q-pa-lg scroll">
      <div class="example-filler" />

      <q-list>
        <q-item
          v-for="n in 30"
          :key="n"
          :data-id="n"
          class="q-my-md q-pa-sm bg-grey-3"
          v-intersection="onIntersection"
        >
          <q-item-section class="text-center" style="background: #eee">
            Item #{{ n }}
          </q-item-section>
        </q-item>
      </q-list>

      <div class="example-filler" />
    </div>

    <div class="example-state bg-primary text-white overflow-hidden rounded-borders text-center absolute-top-left q-ma-md q-pa-sm">
      <transition-group v-if="inView.length > 0" name="in-view" tag="ul">
        <li v-for="i in inView" :key="i" class="in-view-item">
          {{i}}
        </li>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const inView = ref([])

    function onIntersection (entry) {
      if (entry.isIntersecting === true) {
        add(entry.target.dataset.id)
      }
      else {
        remove(entry.target.dataset.id)
      }
    }

    function add (i) {
      remove(i)
      inView.value.push(i)
      inView.value.sort(sortAtoi)
    }

    function remove (i) {
      let index
      while ((index = inView.value.indexOf(i)) > -1) {
        inView.value.splice(index, 1)
        inView.value.sort(sortAtoi)
      }
    }

    function sortAtoi (a, b) {
      return Number(a) - Number(b)
    }

    return {
      inView,
      onIntersection
    }
  }
}
</script>

<style lang="sass" scoped>
.example-state
  width: 50px
  height: 226px
  opacity: 0.85

  ul
    list-style: none
    margin: 0
    padding: 0

  li
    padding: 0.5em

.example-area
  height: 300px

.example-filler
  height: 350px

.in-view-item
  transition: all 0.3s
  display: block

.in-view-enter, .in-view-leave-to
  opacity: 0
  transform: translateX(-30px)

.in-view-leave-active
  position: absolute
</style>