refactor: post list component

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/3445/head
Ryan Wang 2022-05-11 15:47:07 +08:00
parent 8b483b5f00
commit b16570a0b3
1 changed files with 14 additions and 14 deletions

View File

@ -1,13 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import FilledLayout from "@/layouts/FilledLayout.vue"; import FilledLayout from "@/layouts/FilledLayout.vue";
import {VButton} from "@/components/base/button"; import { VButton } from "@/components/base/button";
import {VCard} from "@/components/base/card"; import { VCard } from "@/components/base/card";
import {VSpace} from "@/components/base/space"; import { VSpace } from "@/components/base/space";
import {VTag} from "@/components/base/tag"; import { VTag } from "@/components/base/tag";
import {VInput} from "@/components/base/input"; import { VInput } from "@/components/base/input";
import {IconBookRead, IconSettings} from "@/core/icons"; import { IconBookRead, IconSettings } from "@/core/icons";
import {posts} from "./posts-mock"; import { posts } from "./posts-mock";
import {ref} from "vue"; import { ref } from "vue";
const postsRef = ref( const postsRef = ref(
posts.map((item) => { posts.map((item) => {
@ -25,14 +25,14 @@ const handleCheckAll = () => {
item.checked = checkAll.value; item.checked = checkAll.value;
}); });
}; };
handleCheckAll() handleCheckAll();
</script> </script>
<template> <template>
<FilledLayout> <FilledLayout>
<div class="flex items-center justify-between p-4 bg-white"> <div class="flex items-center justify-between p-4 bg-white">
<div class="flex-1 self-center min-w-0"> <div class="flex-1 self-center min-w-0">
<h2 class="flex text-xl font-bold text-gray-800 truncate"> <h2 class="flex text-xl font-bold text-gray-800 truncate">
<IconBookRead class="self-center mr-2"/> <IconBookRead class="self-center mr-2" />
<span>文章</span> <span>文章</span>
</h2> </h2>
</div> </div>
@ -48,7 +48,7 @@ handleCheckAll()
class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center" class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
> >
<div class="flex-1"> <div class="flex-1">
<VInput placeholder="输入关键词搜索"/> <VInput placeholder="输入关键词搜索" />
</div> </div>
<div class="flex flex-row gap-3"> <div class="flex flex-row gap-3">
<div>分类</div> <div>分类</div>
@ -106,7 +106,7 @@ handleCheckAll()
2020-01-07 2020-01-07
</time> </time>
<span> <span>
<IconSettings/> <IconSettings />
</span> </span>
</div> </div>
</div> </div>