github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/components/Waterfall.vue (about)

     1  <script setup lang="ts">
     2  import {Waterfall} from '@/components/Waterfall'
     3  import {ContentWrap} from '@/components/ContentWrap'
     4  import {useI18n} from '@/hooks/web/useI18n'
     5  import {ref, unref} from 'vue'
     6  
     7  const data = ref<any>([])
     8  
     9  const getList = () => {
    10    const list: any = []
    11    for (let i = 0; i < 20; i++) {
    12      // 随机 100, 500 之间的整数
    13      // const height = Mock.Random.integer(100, 500)
    14      // const width = Mock.Random.integer(100, 500)
    15      // list.push(
    16      //   Mock.mock({
    17      //     width,
    18      //     height,
    19      //     id: toAnyString(),
    20      //     // http更换为https
    21      //     image_uri: Mock.Random.image(`${width}x${height}`).replace('http://', 'https://')
    22      //   })
    23      // )
    24    }
    25    data.value = [...unref(data), ...list]
    26    if (unref(data).length >= 60) {
    27      end.value = true
    28    }
    29  }
    30  getList()
    31  
    32  const {t} = useI18n()
    33  
    34  const loading = ref(false)
    35  
    36  const end = ref(false)
    37  
    38  const loadMore = () => {
    39    loading.value = true
    40    setTimeout(() => {
    41      getList()
    42      loading.value = false
    43    }, 1000)
    44  }
    45  </script>
    46  
    47  <template>
    48    <ContentWrap :title="t('router.waterfall')">
    49      <Waterfall
    50        :data="data"
    51        :loading="loading"
    52        :end="end"
    53        :props="{
    54          src: 'image_uri',
    55          height: 'height'
    56        }"
    57        @load-more="loadMore"
    58      />
    59    </ContentWrap>
    60  </template>