VUE3 + ElementPlus front-end development knowledge points summary (3)

ElementemtPlus components

el-tabs: el-tabs are used to display a set of corresponding content, and different content areas can be switched by clicking the tab page.

Instructions:

<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>

Among them, v-model is bound to the index value of the currently selected tab page, and the type attribute specifies the label style, which can be card, border-card, simple, pills, etc.

Optional parameters:

v-model: The index value of the currently selected tab page, which must be bound using v-model
type: label style, optional values are card, border-card, simple, pills, etc.
closable: Whether the tab can be closed, the default is false
stretch: whether the width is adaptive, the default is false
before-leave: the hook function before switching tabs

el-pagination: el-pagination is used to display data in pages.

Instructions:

<el-pagination
  v-model:current-page="currentPage"
  :page-size="pageSize"
  layout="prev, pager, next"
  :total="total"
  @current-change="handleCurrentChange"
/>

Among them, v-model is bound to the index value of the current page number, page-size specifies the number of data items per page, total specifies the total number of data items, layout specifies the layout of the pagination component, and the combination can be customized, such as "total , sizes, prev, pager, next, jumper".

Optional parameters:

v-model: the index value of the current page number, must be bound using v-model
page-size: the number of data items per page, the default is 10
total: the total number of data items, must be specified
layout: the layout of the pagination component
pager-count: The number of page number buttons, when the total number of pages exceeds this value, it will collapse
prev-text: replace the default previous page text
next-text: replace the default next page text
background: Whether to add a background color to the pagination button
disabled: Whether to disable the paging component
hide-on-single-page: Whether to hide the paging component when there is only one page
current-change: the callback function triggered when the page number is switched

paging function

<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 request

Axios is a Promise-based HTTP library that can be used in the browser and Node.js. Axios is easy to use, extensible, and supports sending XMLHttpRequests requests from browsers and http requests from Node.js.

// 导入 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 style

CSS pseudo-elements and pseudo-classes

A special selector for selecting parts of a document. They allow us to achieve more effects and styles on the page without adding redundant HTML elements. Here are some common CSS pseudo-elements and pseudo-classes and their uses:

::before and ::after pseudo-elements: These two pseudo-elements can insert content before or after the selected element, usually used to add icons or other decorative content.

button::before {
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}

parameter:

content: The content to insert, which can be text, pictures, attribute values, etc.
display: The display attribute of the element, the default is inline.
position: The positioning attribute of the element, the default is static.
z-index: The stacking order of the elements.

:hover pseudo-class: This pseudo-class allows us to change the style of the element when the mouse hovers over it, such as changing the font color, background color, border style, etc.

button:hover {
  background-color: #ccc;
  color: #fff;
}

parameter:

color: text color.
background-color: background color.
border: Border style.
font-size: Font size.

:nth-child() pseudo-class: This pseudo-class can select the child element of a parent element for style control. Can be used to achieve effects such as grid layout.

ul li:nth-child(odd) {
  background-color: #f0f0f0;
}

parameter:

even/odd: Select even or odd items.
n: Selects all items.
2n: Select every two items.
3n+1: Select the first of every three items.

(to be continued)