前言
之前咱们是已经封装了一个随机模块, 在这个随机模块中能够生成随机的用户信息, 并没有被用起来.
另外咱们还有一个想法, 那就是单独封装一个表格相关的样式模块, 也还没有实现.
所以,咱们继续开搞.
使用生成的随机用户数据
首先, 修改一下App.vue获取用户数据的逻辑, 使用随机数据.
import random from "./zdpui/js/random.js";
let users = ref(random.users(8))
此时我们可以发现, 代码少了非常多, 然后去界面看看效果.
在这里插入图片描述
效果也非常的不错, 数据非常的真实.
此时App.vue完整代码如下:
<script setup>
import {onMounted, ref} from "vue";
import random from "./zdpui/js/random.js";
let users = ref(random.users(8))
</script>
<template>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="user.id">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style scoped>
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
thead {
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
}
th {
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px;
text-align: left;
}
tbody tr:nth-child(even) {
background-color: #f3f4f6;
}
tbody tr:hover {
background-color: #e5e7eb;
transition: background-color 0.3s;
}
tbody td {
padding: 12px;
text-align: left;
border-top: 1px solid #e5e7eb;
}
th, td {
vertical-align: middle;
}
</style>
表格样式调整
为了便于封装统一的样式, 我们给这个表格样式取个名字, 就叫table1吧, 简单点, 意思就是我们的第一套表格样式.
我是取名鬼才,大家有想法的可以留言哈...
先个table加上样式:
<table class="table1">
然后在之前的所有样式前面加上一个层级, 表示是属于 table1 下面的样式:
table.table1 {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.table1 thead {
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
}
.table1 th {
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px;
text-align: left;
}
.table1 tbody tr:nth-child(even) {
background-color: #f3f4f6;
}
.table1 tbody tr:hover {
background-color: #e5e7eb;
transition: background-color 0.3s;
}
.table1 tbody td {
padding: 12px;
text-align: left;
border-top: 1px solid #e5e7eb;
}
.table1 th,
.table1 td {
vertical-align: middle;
}
此时刷新页面, 确保样式没有变化:
在这里插入图片描述
封装表格样式模块
接下来, 我们就可以把这个样式代码抽离出来, 放到一个单独的css文件中了.
/*表格样式1开始*/
table.table1 {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.table1 thead {
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
}
.table1 th {
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px;
text-align: left;
}
.table1 tbody tr:nth-child(even) {
background-color: #f3f4f6;
}
.table1 tbody tr:hover {
background-color: #e5e7eb;
transition: background-color 0.3s;
}
.table1 tbody td {
padding: 12px;
text-align: left;
border-top: 1px solid #e5e7eb;
}
.table1 th,
.table1 td {
vertical-align: middle;
}
/*表格样式1结束*/
此时, 我的项目结构是下面这样的:
在这里插入图片描述
使用封装的样式
接着我们回到App.vue, 只需要简单的引入css样式文件就行了.
import "./zdpui/css/table.css";
此时App.vue的完整代码如下:
<script setup>
import {onMounted, ref} from "vue";
import random from "./zdpui/js/random.js";
import "./zdpui/css/table.css";
let users = ref(random.users(8))
</script>
<template>
<div>
<table class="table1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="user.id">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
刷新浏览器, 可以发现, 整体样式还是没有变化:
在这里插入图片描述
说明我们封装得比较成功.
总结
到目前为止, 我们就把之前的两个想法实现了, 完美, 可惜我不喝酒, 不然和大家喝酒庆祝一下!!!
至少我自己是比较开心的, 虽然简单, 但是我封装了自己的第一个样式文件, 第一个js文件, 后面可以不断的复用, 而且是没有任何第三方依赖的, 非常的舒服.
这比较符合我自己的预期啊.
接下来, 就是将html代码封装为组件了.
我们需要将html代码封装到一个组件中,就是我们的表格组件, 这个组件接收我们传入的表格内容数据和表头数据, 进行渲染.
期待我们能尽快实现这个目标.
