Componentes Elementemt Plus
el-tabs: el-tabs se utilizan para mostrar un conjunto de contenido correspondiente, y se pueden cambiar diferentes áreas de contenido haciendo clic en la página de la pestaña.
Instrucciones:
<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>
Entre ellos, v-model está vinculado al valor de índice de la página de pestaña seleccionada actualmente, y el atributo de tipo especifica el estilo de la etiqueta, que puede ser tarjeta, tarjeta de borde, simple, píldoras, etc.
Parámetros opcionales:
- v-model: el valor de índice de la página de pestaña seleccionada actualmente, que debe vincularse mediante v-model
- tipo: estilo de etiqueta, los valores opcionales son card, border-card, simple, pills, etc.
- cerrable: si la pestaña se puede cerrar, el valor predeterminado es falso
- estirar: si el ancho es adaptable, el valor predeterminado es falso
- before-leave: la función de enlace antes de cambiar de pestaña
el-pagination: el-pagination se utiliza para mostrar datos en páginas.
Instrucciones:
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>
Entre ellos, el modelo v está vinculado al valor de índice del número de página actual, el tamaño de página especifica el número de elementos de datos por página, el total especifica el número total de elementos de datos, el diseño especifica el diseño del componente de paginación y el La combinación se puede personalizar, como "total, tamaños, anterior, buscapersonas, siguiente, puente".
Parámetros opcionales:
- v-model: el valor de índice del número de página actual, debe vincularse usando v-model
- tamaño de página: el número de elementos de datos por página, el valor predeterminado es 10
- total: el número total de elementos de datos, debe especificarse
- diseño: el diseño del componente de paginación
- pager-count: el número de botones de número de página, cuando el número total de páginas excede este valor, colapsará
- prev-text: reemplaza el texto predeterminado de la página anterior
- texto siguiente: reemplaza el texto predeterminado de la página siguiente
- fondo: ya sea para agregar un color de fondo al botón de paginación
- disabled: si se desactiva el componente de paginación
- hide-on-single-page: si ocultar el componente de paginación cuando solo hay una página
- cambio actual: la función de devolución de llamada se activa cuando se cambia el número de página
función de paginación
<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 数组变化，以便当数据改变时重置当前页码。-->Solicitud de Axios
Axios es una biblioteca HTTP basada en Promise que se puede usar en el navegador y en Node.js. Axios es fácil de usar, extensible y admite el envío de solicitudes XMLHttpRequests desde navegadores y solicitudes http desde 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);
});
estilo css
Pseudoelementos y pseudoclases CSS
Un selector especial para seleccionar partes de un documento. Nos permiten lograr más efectos y estilos en la página sin agregar elementos HTML redundantes. Estos son algunos pseudoelementos y pseudoclases de CSS comunes y sus usos:
::antes y ::después de los pseudo-elementos: Estos dos pseudo-elementos pueden insertar contenido antes o después del elemento seleccionado, usualmente usado para agregar íconos u otro contenido decorativo.
button::before {
content: "\f067";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
}
parámetro:
- contenido: el contenido a insertar, que puede ser texto, imágenes, valores de atributos, etc.
- display: El atributo de visualización del elemento, el valor predeterminado es en línea.
- posición: el atributo de posicionamiento del elemento, el valor predeterminado es estático.
- índice z: el orden de apilamiento de los elementos.
:hover pseudo-clase: Esta pseudo-clase nos permite cambiar el estilo del elemento cuando el mouse pasa sobre él, como cambiar el color de la fuente, el color de fondo, el estilo del borde, etc.
button:hover {
background-color: #ccc;
color: #fff;
}
parámetro:
- color: color del texto.
- color de fondo: color de fondo.
- borde: Estilo de borde.
- tamaño de fuente: tamaño de fuente.
Pseudoclase :nth-child(): esta pseudoclase puede seleccionar el elemento secundario de un elemento principal para controlar el estilo. Se puede utilizar para lograr efectos como el diseño de cuadrícula.
ul li:nth-child(odd) {
background-color: #f0f0f0;
}
parámetro:
- par/impar: selecciona elementos pares o impares.
- n: Selecciona todos los elementos.
- 2n: Seleccione cada dos elementos.
- 3n+1: Seleccione el primero de cada tres elementos.
(continuará)
