voice-analisys-tools/src/modules/Home/SearchList.vue

<template>
  <a-card id="search-result" :header-style="{ backgroundColor: ' #7786BC', borderRadius: '10px 10px 0 0' }">
    <template #title>
      <div class="title">搜索结果</div>
    </template>
    <template #extra>
      <div class="title">共{{ total <= 9999 ? total : '9999+' }}条</div>
    </template>
    <!--  -->
    <a-list
      style="width: 100%"
      :max-height="scroll_height"
      :bordered="false"
      :scrollbar="scrollbar"
      @reach-bottom="toLoadMore"
    >
      <template #scroll-loading>
        <div v-if="bottom">无更多数据了</div>
        <a-spin v-else />
      </template>
      <a-list-item
        :class="current_id === item.id ? 'item-active' : ''"
        style="cursor: pointer"
        v-for="item in search_list"
        :key="item.id"
        @click="checkDetail(item)"
      >
        <div v-html="item.content" class="clamped-text"></div>
      </a-list-item>
    </a-list>
    <a-spin class="loading" v-if="is_loading" />
  </a-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  current: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  set_loading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['checkDetail']);

const search_list = computed(() => {
  return props.list;
});

const is_loading = computed(() => {
  return props.setLoading;
});

const bottom = ref(false);
const scrollbar = ref(true);
const scroll_height = ref('calc(100vh - 220px)');
const current_id = ref('');

const toLoadMore = () => {
  if (props.current * props.pageSize >= props.total) {
    bottom.value = true;
    return;
  }
  // 去加载第二页数据
  bottom.value = false;
  emit('loadMore');
};
// 查看详情
const checkDetail = (item) => {
  current_id.value = item.id;
  emit('checkDetail', item);
};

onMounted(() => {
  window.addEventListener('resize', () => {
    const height = document.getElementById('search-result').offsetHeight;
    scroll_height.value = height + 'px';
  });
});
</script>
<style scoped lang="css">
.arco-card {
  height: 100%;
  border-radius: 10px 10px 0 0;
}
.arco-list-item:hover {
  background: rgba(61, 104, 225, 0.8);
  color: #fff;
}
.item-active {
  background: #3d68e1;
  color: #fff;
}
.title {
  color: #fff;
}

.clamped-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 3em;
}

:deep(.search-result-high) {
  color: #f00;
}
:deep(.arco-card-body) {
  padding: 0 !important;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>