VUE3 + ElementPlus前端开发知识点总结（三）

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: 选择每三个项中的第一个。

(未完待续)