packages/docs/src/examples/v-infinite-scroll/usage.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-infinite-scroll/usage.vue

91 строка2 KB

J-Sek

docs(VInfiniteScroll): fix usage example in VPlay

24 мар 2026, 14:03

24 мар 2026, 14:03664adc5

<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
    :script="script"
  >
    <div>
      <v-infinite-scroll
        v-bind="props"
        @load="load"
      >
        <template v-for="(item, index) in items" :key="item">
          <div :class="['pa-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
            Item number {{ item }}
          </div>
        </template>
      </v-infinite-scroll>
    </div>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-infinite-scroll'
  const model = ref('default')
  const options = []
  const items = ref(Array.from({ length: 30 }, (k, v) => v + 1))

  function api () {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(Array.from({ length: 10 }, (k, v) => v + items.value.at(-1) + 1))
      }, 1000)
    })
  }

  async function load ({ done }) {
    // Perform API call
    const res = await api()

    items.value.push(...res)

    done('ok')
  }

  const props = computed(() => {
    return {
      height: 300,
      onLoad: 'load',
    }
  })

  const slots = computed(() => {
    return `
  <template v-for="(item, index) in items" :key="item">
    <div :class="['pa-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
      Item number #{{ item }}
    </div>
  </template>
`
  })

  const code = computed(() => {
    return `<v-infinite-scroll${propsToString(props.value)}>${slots.value}</v-infinite-scroll>`
  })

  const script = computed(() => {
    return `<script setup>
  import { ref } from 'vue'

  const items = ref(Array.from({ length: 30 }, (k, v) => v + 1))

  async function api () {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(Array.from({ length: 10 }, (k, v) => v + items.value.at(-1) + 1))
      }, 1000)
    })
  }
  async function load ({ done }) {
    // Perform API call
    const res = await api()

    items.value.push(...res)

    done('ok')
  }
<` + '/script>'
  })
</script>