ElememtPlus组件
el-tabs：el-tabs用于展示一组具有对应关系的内容，可通过点击标签页来切换不同的内容区域。
使用方法：
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="标签1">内容1</el-tab-pane>
<el-tab-pane label="标签2">内容2</el-tab-pane>
</el-tabs>其中，v-model绑定的是当前选中的标签页的索引值，type属性指定了标签样式，可以选择card、border-card、simple、pills等。
可选参数：
- v-model：当前选中标签页的索引值，必须使用v-model绑定
- type：标签样式，可选值为card、border-card、simple、pills等
- closable：是否可关闭标签页，默认为false
- stretch：是否宽度自适应，默认为false
- before-leave：切换标签页前的钩子函数
el-pagination：el-pagination用于分页展示数据。
使用方法：
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>其中，v-model绑定的是当前页码的索引值，page-size指定每页的数据条数，total指定总的数据条数，layout指定分页组件的布局方式，可以自定义组合，如"total, sizes, prev, pager, next, jumper"。
可选参数：
- v-model：当前页码的索引值，必须使用v-model绑定
- page-size：每页的数据条数，默认为10
- total：总的数据条数，必须指定
- layout：分页组件的布局方式
- pager-count：页码按钮的数量，当总页数超过该值时会折叠
- prev-text：替换默认的上一页文本
- next-text：替换默认的下一页文本
- background：是否为分页按钮添加背景颜色
- disabled：是否禁用分页组件
- hide-on-single-page：当只有一页时是否隐藏分页组件
- current-change：页码切换时触发的回调函数
分页功能
<template>
<div>
<ul>
<li v-for="page in pages" :key="page">
<button @click="currentPage = page">{{ page }}</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [], // 所有数据
pageSize: 10, // 每页数据数量
currentPage: 1 // 当前页码
};
},
computed: {
pageCount() {
return Math.ceil(this.items.length / this.pageSize); // 计算总页数
},
pages() {
const startPage = Math.max(1, this.currentPage - 2); // 开始页码
const endPage = Math.min(this.pageCount, startPage + 4); // 结束页码
const pages = [];
for (let i = startPage; i <= endPage; i++) {
pages.push(i);
}
return pages; // 返回当前需要渲染的页码数组
},
paginatedItems() {
const startIndex = (this.currentPage - 1) * this.pageSize; // 计算起始数据索引
const endIndex = startIndex + this.pageSize; // 计算结束数据索引
return this.items.slice(startIndex, endIndex); // 返回当前页码对应的数据数组
}
},
watch: {
items() {
this.currentPage = 1; // 当数据改变时重置当前页码
}
}
};
</script>
<!-- items 数组为所有数据，pageSize 为每页数据数量，currentPage 为当前页码。-->
<!--通过计算得到总页数，以及当前需要渲染的页码数组。-->
<!--在页面中通过 v-for 渲染页码按钮，并在点击时修改当前页码。-->
<!--通过计算得到当前页码对应的数据数组，用于在页面中渲染当前页的数据。-->
<!--同时在 watch 监听 items 数组变化，以便当数据改变时重置当前页码。-->Axios请求
Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 中。Axios 具有易用性、可拓展性、并且支持从浏览器中发送 XMLHttpRequests 请求以及 Node.js 中发送 http 请求。
// 导入 Axios 库
import axios from 'axios';
// 发送 GET 请求
axios.get('/api/endpoint')
.then(function (response) {
// 请求成功后的回调函数
console.log(response.data);
})
.catch(function (error) {
// 请求失败后的回调函数
console.log(error);
});
//-------------------------------------------------
//Axios 还支持其他请求方式，如 POST、PUT、DELETE 等，通过传递一个配置对象来实现。
//以下是一个使用 POST 请求发送 JSON 数据的示例：
// 导入 Axios 库
import axios from 'axios';
// 定义请求数据
const data = {
name: 'John Doe',
age: 30
};
// 发送 POST 请求
axios.post('/api/user', data)
.then(function (response) {
// 请求成功后的回调函数
console.log(response.data);
})
.catch(function (error) {
// 请求失败后的回调函数
console.log(error);
});
//-----------------------------------------------------
//当需要在每个请求中都携带一些默认的参数时，可以通过 Axios 的 defaults 属性来设置：
// 导入 Axios 库
import axios from 'axios';
// 设置基础 URL
axios.defaults.baseURL = 'https://api.example.com';
// 设置请求头
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
// 发送 GET 请求
axios.get('/api/endpoint')
.then(function (response) {
// 请求成功后的回调函数
console.log(response.data);
})
.catch(function (error) {
// 请求失败后的回调函数
console.log(error);
});
//--------------------------------------------------------
//除此之外，Axios 还支持拦截器，用于在请求或响应被处理前对其进行拦截和修改。
//以下是一个拦截器的示例，用于在每个请求中都添加一个 token：
// 导入 Axios 库
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 获取 token 并添加到请求头
const token = localStorage.getItem('token');
if (token) {
config.headers.common['Authorization'] = 'Bearer ' + token;
}
return config;
}, function (error) {
// 处理请求错误
return Promise.reject(error);
});
// 发送 GET 请求
axios.get('/api/endpoint')
.then(function (response) {
// 请求成功后的回调函数
console.log(response.data);
})
.catch(function (error) {
// 请求失败后的回调函数
console.log(error);
});CSS样式
CSS 伪元素和伪类
用于选择文档中某些部分的特殊选择器。它们可以让我们在页面上实现更多的效果和样式，而不需要增加多余的 HTML 元素。下面是一些常见的 CSS 伪元素和伪类及其用途：
::before 和 ::after 伪元素： 这两个伪元素可以在选定元素的前面或后面插入内容，通常用来添加图标或其他装饰性内容。
button::before {
content: "\f067";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
}参数：
- content: 插入的内容，可以是文本、图片、属性值等。
- display: 元素的 display 属性，默认为 inline。
- position: 元素的定位属性，默认为 static。
- z-index: 元素的堆叠顺序。
:hover 伪类： 这个伪类可以让我们在鼠标悬停在元素上时改变元素的样式，例如改变字体颜色、背景颜色、边框样式等。
button:hover {
background-color: #ccc;
color: #fff;
}参数：
- color: 文本颜色。
- background-color: 背景颜色。
- border: 边框样式。
- font-size: 字体大小。
:nth-child() 伪类： 这个伪类可以选择某个父元素的第几个子元素来进行样式控制。可以用来实现网格布局等效果。
ul li:nth-child(odd) {
background-color: #f0f0f0;
}参数：
- even/odd: 选择偶数或奇数项。
- n: 选择所有项。
- 2n: 选择每两个项。
- 3n+1: 选择每三个项中的第一个。
(未完待续)
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
