79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<template>
|
|
<!-- 站内信 -->
|
|
<div class="forum">
|
|
<div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
|
|
|
|
<el-card style="width: 90%">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>Card name</span>
|
|
</div>
|
|
</template>
|
|
<p v-for="o in 2" :key="o" class="text item">{{ "List item " + o }}</p>
|
|
<template #footer>
|
|
<div class="card-footer">
|
|
<span>Card footer</span>
|
|
</div>
|
|
</template>
|
|
</el-card>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref, // 响应式基础
|
|
watch, // 侦听器
|
|
onMounted, // 组件挂载完成后执行
|
|
onUpdated, // 组件更新后执行
|
|
onUnmounted, // 组件销毁前执行
|
|
} from "vue";
|
|
const refname = ref("");
|
|
function load() {
|
|
// 加载更多数据
|
|
}
|
|
watch(refname, async (newQuestion, oldQuestion) => {
|
|
// 变化后执行
|
|
});
|
|
onMounted(() => {
|
|
// 组件挂载完成后执行
|
|
});
|
|
onUpdated(() => {
|
|
// 组件更新后执行
|
|
});
|
|
onUnmounted(() => {
|
|
// 组件销毁前执行
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.forum {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.infinite-list {
|
|
width: 90%;
|
|
height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.card-header{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.card-footer{
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content:flex-end;
|
|
align-items: center;
|
|
}
|
|
</style>
|