【CustomPagination：基于Vue 3与Element Plus的高效二次封装分页器】

news2025/5/15 23:24:24

CustomPagination：基于Vue 3与Element Plus的高效二次封装分页器

在现代Web应用开发中，分页是处理大量数据列表时不可或缺的功能。Element Plus等UI库提供了基础的分页组件，但在大型项目中，为了追求极致的用户体验和视觉统一，我们往往需要进行二次封装。本文将详细介绍我们如何基于Vue 3和Element Plus，对分页器进行二次封装，打造一个名为 CustomPagination 的组件，以满足项目特定的设计规范，并探讨其设计思路、实现细节、应用案例以及带来的益处与思考。

一、组件概述与背景

1. 组件功能定位与使用场景：

CustomPagination 是一个专为表格数据展示设计的分页控制组件。它适用于任何需要将大量数据分割成多个页面进行展示的场景，例如后台管理系统中的数据列表、用户列表、订单列表等。

2. 开发此组件的业务背景：

在我们的“能源管理平台”项目中，存在大量的数据监控和管理模块。UI设计团队对所有表格和数据展示组件都有着严格且统一的视觉要求，特别是针对分页器的外观和交互细节。

3. 现有实现的不足或待解决的问题：

Element Plus的默认分页器虽然功能强大，但在以下几个方面未能完全满足我们的特定需求：

  • 视觉风格不统一：默认分页器的样式与项目整体暗色系、科技感的UI风格存在差异。
  • 交互细节需定制：设计稿要求特定的交互元素和布局，如“总计：XXX”、“XX条/页”下拉框的样式、以及一个一体化的页码输入和跳转按钮。
  • 组件复用性与维护成本：如果每个使用分页的地方都单独调整样式和逻辑，将导致代码冗余、不一致，并增加后期维护难度。

4. 组件的技术定位：

CustomPagination 定位为一个基础UI组件。它的目标是提供一个高度可复用、符合项目UI规范的标准分页解决方案，供项目内其他业务组件或页面直接调用。

二、设计目标与原则

1. 功能目标：

  • 精确实现设计稿要求的视觉样式和交互行为。
  • 提供总条数显示、每页条数选择、页码导航、页码输入跳转等核心分页功能。
  • 支持禁用状态。
  • 易于集成到现有表格或列表组件中。

2. 性能目标：

  • 确保组件自身渲染性能高效，不引入不必要的重绘和重排。
  • 在数据量较大时，分页切换流畅。

3. 可维护性目标：

  • 代码结构清晰，注释完整，易于理解和修改。
  • 逻辑内聚，分页相关的核心逻辑封装在组件内部。
  • 提供明确的TypeScript类型定义。

4. 可扩展性目标：

  • 虽然初期主要满足当前项目设计，但保留一定的可配置性（如 pageSizes, pagerCount）。
  • 未来可考虑通过插槽等方式增强定制能力。

5. 设计原则：

  • 单一职责：组件专注于分页功能本身。
  • Props驱动与事件通知：通过Props接收配置，通过Emits通知状态变更。
  • 高内聚、低耦合：组件内部逻辑独立，对外部依赖最小。
  • 开发者友好：提供简洁易懂的API和清晰的文档。

三、组件设计与API

1. 组件的对外接口/Props设计 (附TypeScript类型定义)：

interface PaginationProps {
  /**
   * 总条目数
   */
  total: number;
  /**
   * 当前页码 (支持 .sync 或 v-model:currentPage)
   */
  currentPage: number;
  /**
   * 每页条数 (支持 .sync 或 v-model:pageSize)
   */
  pageSize: number;
  /**
   * 可选的每页条数数组
   */
  pageSizes?: number[];
  /**
   * 页码按钮的数量，当总页数超过该值时会折叠
   */
  pagerCount?: number;
  /**
   * 是否禁用分页
   */
  disabled?: boolean;
}

2. 事件设计与处理方式：

组件通过 defineEmits 定义了以下事件：

const emit = defineEmits<{
  /**
   * 当前页码更新事件，用于 v-model:currentPage
   */
  (e: 'update:currentPage', page: number): void;
  /**
   * 每页条数更新事件，用于 v-model:pageSize
   */
  (e: 'update:pageSize', size: number): void;
  /**
   * 统一的分页参数变更事件，当页码或每页条数改变时触发
   * 建议父组件监听此事件进行数据请求
   */
  (e: 'pagination-change', params: { page: number; size: number }): void;
}>();
  • update:currentPage 和 update:pageSize 主要用于支持 v-model。
  • pagination-change 是一个更通用的事件，当页码或每页条数发生任何有效变化后触发，父组件通常监听此事件来重新获取数据。

3. 插槽设计与定制能力：

当前版本的 CustomPagination 主要通过Props进行配置，未设计复杂的插槽。其主要定制能力体现在对Element Plus组件的样式覆盖和结构重组上，以达到设计稿要求。未来如果需要更灵活的UI片段替换，可以考虑引入具名插槽。

4. 组件内部结构：

组件模板主要由以下几部分构成：

  • 总条数显示区域 (.total-info)。
  • 每页条数选择下拉框 (.pagesize-dropdown-wrapper，使用 el-dropdown 实现)。
  • 核心页码导航区域 (基于简化的 el-pagination)。
  • 页码输入和跳转区域 (.jumper-container，使用 el-input 和自定义按钮实现一体化效果)。

这些元素通过Flexbox进行布局和对齐。

四、实现细节

1. 组件结构与核心代码：

为了更清晰地展示实现细节，我们来看一下 CustomPagination 组件的核心代码片段。

(1.1) 组件模板 (<template>)

<!-- src/components/custom-pagination/index.vue -->
<template>
  <div class="common-pagination-container" v-if="total > 0">
    <div class="pagination-inner-container">
      <!-- 总计信息 -->
      <div class="total-info">总计: {{ total }}</div>

      <!-- 每页条数选择 (使用el-dropdown定制) -->
      <div class="pagesize-dropdown-wrapper">
        <el-dropdown trigger="click" @command="handleSizeChange">
          <div class="el-dropdown-link">
            {{ pageSize }} 条/页
            <i class="el-icon-arrow-down el-icon--right"></i> {/* 自定义箭头样式 */}
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-for="size in pageSizes" 
                :key="size" 
                :command="size"
              >
                {{ size }} 条/页
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- Element Plus基础分页 (只保留核心导航) -->
      <el-pagination
        background
        layout="prev, pager, next" {/* 精简布局，只保留翻页和页码 */}
        :total="total"
        :current-page="internalCurrentPage" {/* 注意这里绑定的是内部状态 */}
        :page-size="internalPageSize"     {/* 同上 */}
        :pager-count="pagerCount"
        @current-change="handlePageChange"
        class="custom-pagination" {/* 自定义样式类，用于:deep选择器 */}
      />

      <!-- 一体化跳转功能 -->
      <div class="jumper-container">
        <div class="jump-input-wrapper">
          <el-input v-model="jumpPage" class="jump-page-input" @keyup.enter="handleJumpPage"/>
          <div class="jumper-button" @click="handleJumpPage">跳转</div>
        </div>
      </div>
    </div>
  </div>
</template>
  • 整体布局：使用 Flexbox (pagination-inner-container) 进行右对齐布局。
  • 每页条数选择：通过 el-dropdown 实现高度自定义的下拉选择。
  • 核心页码导航：借用 el-pagination 的 prev, pager, next 布局。
  • 一体化跳转：将 el-input 和自定义按钮组合，并通过CSS调整边框和圆角实现视觉连接。@keyup.enter 添加了回车跳转功能。

(1.2) 组件逻辑 (<script setup lang="ts">)

// src/components/custom-pagination/index.vue
import { ref, watch } from 'vue';

// Props 定义 (同上节)
// Emits 定义 (同上节)

// 内部状态
const internalCurrentPage = ref(props.currentPage);
const internalPageSize = ref(props.pageSize);
const jumpPage = ref<string | number>('');

// 监听外部props变化，同步内部状态
watch(() => props.currentPage, (val) => {
  if (val !== internalCurrentPage.value) internalCurrentPage.value = val;
});
watch(() => props.pageSize, (val) => {
  if (val !== internalPageSize.value) internalPageSize.value = val;
});

// 事件处理函数
function handlePageChange(page: number) { // el-pagination的@current-change
  if (props.disabled) return;
  internalCurrentPage.value = page;
  emit('update:currentPage', page);
  emit('pagination-change', { page, size: internalPageSize.value });
}

function handleSizeChange(size: number) { // el-dropdown的@command
  if (props.disabled) return;
  internalPageSize.value = size;
  internalCurrentPage.value = 1; // 切换条数时，重置到第一页
  emit('update:pageSize', size);
  emit('update:currentPage', 1);
  emit('pagination-change', { page: 1, size });
}

function handleJumpPage() { // 跳转按钮点击或回车
  if (props.disabled || !jumpPage.value) return;
  let page = parseInt(jumpPage.value as string);
  if (isNaN(page) || page < 1) {
    page = 1;
  } else {
    const maxPage = Math.ceil(props.total / internalPageSize.value);
    page = Math.min(page, maxPage); // 确保页码在有效范围内
  }
  internalCurrentPage.value = page;
  emit('update:currentPage', page);
  emit('pagination-change', { page, size: internalPageSize.value });
  jumpPage.value = '';
}

// defineExpose (同上节)
  • Props 和 Emits：如上节所述，支持 v-model 和统一的 pagination-change 事件。
  • 内部状态管理：通过 internalCurrentPage 和 internalPageSize 与 el-pagination 交互，并响应外部 props 的变化。
  • 输入校验：handleJumpPage 中对跳转页码进行严格校验。

2. 样式实现与响应式处理 (<style lang="less" scoped>)

// src/components/custom-pagination/index.vue
.common-pagination-container {
  .pagination-inner-container {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
  }
  .total-info { /* ... */ }
  .pagesize-dropdown-wrapper {
    .el-dropdown-link { /* ... */ 
      i { /* 自定义CSS箭头 */
        border-top: 12px solid #fff; /* ... */
      }
    }
  }
  :deep(.el-pagination) { /* 深度定制el-pagination样式 */
    /* ... 通过CSS变量和直接覆盖内部类名调整样式 ... */
  }
  .jumper-container {
    .jump-input-wrapper {
      .jump-page-input :deep(.el-input__wrapper) {
        border-right: none; 
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .jumper-button {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        &::before { /* 中间竖线 */
          content: ''; position: absolute; left: 0; top: 0px; bottom: 0px; width: 1px; background-color: #3b86bf;
        }
      }
    }
  }
}
:deep(.el-dropdown-menu) { /* 下拉菜单样式 */
  /* ... */
}
  • Scoped CSS 与 :deep()：确保样式局部化，同时能修改子组件内部样式。
  • CSS变量与直接覆盖：结合使用Element Plus提供的CSS变量和直接覆盖内部类名的方式进行样式定制。
  • 一体化输入框：通过调整相邻元素的 border 和 border-radius，并用伪元素 ::before 绘制分割线，实现视觉上的无缝连接。

3. 性能优化点：

  • 组件本身逻辑不复杂，主要渲染开销在Element Plus子组件。我们通过简化 el-pagination 的 layout，只渲染必要部分。
  • v-if="total > 0" 避免了在没有数据时渲染整个分页器。
  • 事件处理函数中增加了 props.disabled 判断，避免不必要的操作。

五、优化与性能

1. 渲染性能：

组件结构相对简单，主要依赖Element Plus组件。通过按需渲染（v-if）和简化内部el-pagination的layout，减少了不必要的DOM节点。

2. 用户体验优化点：

  • 视觉一致性：严格遵循设计稿，提供统一的视觉体验。
  • 交互明确：自定义的下拉箭头和一体化跳转按钮，交互更直观。
  • 输入容错：跳转页码输入时，对无效输入（非数字、超出范围）进行了处理，自动校正到有效页码。
  • 回车跳转：为跳转输入框添加了回车事件，提升操作效率。

六、应用案例

1. 基础用法案例 (v-model绑定)：

<template>
  <div>
    <!-- 假设这里有一个表格 -->
    <div class="table-placeholder">表格数据展示区域</div>

    <CustomPagination
      v-model:current-page="paginationState.currentPage"
      v-model:page-size="paginationState.pageSize"
      :total="paginationState.total"
      @pagination-change="handleDataFetch"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import CustomPagination from '@/components/custom-pagination/index.vue'; // 确保路径正确

const paginationState = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0, // 通常由API返回
});

// 模拟数据获取
async function fetchData(page: number, size: number) {
  console.log(`Fetching data for page: ${page}, size: ${size}`);
  // 实际项目中，这里会调用API
  // 假设API返回了155条数据
  paginationState.total = 155; 
  // 更新表格数据...
}

function handleDataFetch(params: { page: number; size: number }) {
  fetchData(params.page, params.size);
}

// 初始化加载第一页数据
fetchData(paginationState.currentPage, paginationState.pageSize);
</script>

<style scoped>
.table-placeholder {
  height: 200px;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #888;
}
</style>

2. 在弹窗内表格中的应用 (如 charging-facility-dialog.vue)：

<!-- charging-facility-dialog.vue -->
<template>
  <CustomerDialog v-model:visible="newVisible">
    <!-- ... dialog title and search ... -->
    <div class="common-table-container" v-loading="isLoading">
      <table class="common-data-table" v-if="filteredTableData.length > 0">
        <!-- ... table head and body ... -->
      </table>
      <div class="common-empty-container" v-else>
        <NoData />
      </div>

      <!-- 使用自定义分页器 -->
      <div v-if="filteredTableData.length > 0">
        <CustomPagination
          :total="total"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          @pagination-change="onPaginationChange" 
        />
      </div>
    </div>
  </CustomerDialog>
</template>

<script setup lang="ts">
import CustomPagination from '@/components/custom-pagination/index.vue';
// ... 其他 imports 和 setup逻辑 ...

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
// ... tableData, isLoading 等 ...

// 父组件（弹窗）的数据获取逻辑
async function fetchData() {
  isLoading.value = true;
  // 构造请求参数，包含 currentPage.value 和 pageSize.value
  const params = { 
    /* ...其他筛选条件... */
    __page: currentPage.value, 
    __pagesize: pageSize.value 
  };
  try {
    // const res = await Api.getEquipmentInfo(params);
    // tableData.value = res.pageData;
    // total.value = res.itemCount;
  } finally {
    isLoading.value = false;
  }
}

// CustomPagination的事件回调
function onPaginationChange(params: { page: number; size: number }) {
  // currentPage 和 pageSize 已经通过 v-model 更新
  fetchData(); // 直接调用数据获取
}

// 初始化或弹窗显示时加载数据
// watch(() => props.visible, (isVisible) => { if(isVisible) fetchData() } );
</script>
  • 截图效果：(此处可以配上组件在项目中实际应用的截图，展示其与整体UI的融合效果)

七、重构与迭代

本组件是在项目初期对Element Plus分页器进行样式调整的基础上，逐步演化而来的。

  • 重构前：分散在各个Vue文件中的 :deep() 样式覆盖和零散的 el-pagination 配置。
  • 重构思路：
    1. 统一需求：收集所有分页场景下的设计稿要求，确定统一的视觉和交互标准。
    2. 提取共性：将共同的样式和布局抽象出来。
    3. 组件化封装：创建一个独立的 .vue 文件，将模板、逻辑和样式封装在一起。
    4. 定义清晰API：设计Props和Emits，确保易用性和灵活性。
  • 重构后效果：显著减少了代码冗余，提高了开发效率，保证了UI一致性，降低了维护成本。

八、学习与收获

  • 技术决策：选择基于Element Plus进行二次封装而非完全造轮子，是在项目时间和成熟度之间做的权衡。我们利用了Element Plus的稳定性和核心逻辑，同时通过深度定制满足了UI需求。
  • 挑战与解决：
    • 样式覆盖：Element Plus组件内部DOM结构复杂，精确覆盖特定元素的样式需要耐心调试 :deep() 选择器，并理解其权重。
    • 交互细节模拟：如一体化跳转按钮的实现，需要巧妙运用CSS技巧（如负margin、边框处理、伪元素）。
  • 设计模式应用：组件本身遵循了良好的封装和单一职责原则。通过Props和Emits实现了父子组件的单向数据流和事件通信。

九、未来规划

  • 待解决的问题或限制：
    • 目前对Element Plus版本有一定依赖，升级时需注意兼容性。
    • 国际化支持：当前文案（如“总计”、“条/页”、“跳转”）是硬编码的，未来可考虑通过i18n方案实现多语言。
  • 计划中的新功能：
    • 更灵活的布局选项：例如允许将总条数、每页条数选择器等放置在分页器的不同位置。
    • 提供更多插槽：允许用户自定义分页器的某些部分，如页码按钮的渲染。
  • 性能优化方向：对于超大数据总量（百万级以上）且页数极多的情况，可以研究 el-pagination 内部的页码渲染策略，看是否有进一步优化的空间（尽管通常后端API会限制最大查询页数）。

十、设计资源与代码

  • 组件完整代码：src/components/custom-pagination/index.vue (如前文所示)
  • 使用示例文档：src/components/custom-pagination/example.vue 和 src/components/custom-pagination/README.md
  • 设计稿/原型链接：(此处可链接到项目的UI设计稿或原型中关于分页器的具体页面)

通过这次二次封装，我们不仅得到了一个满足项目需求的自定义分页组件，也在组件化开发、CSS深度定制以及Vue 3组合式API的应用上获得了宝贵的经验。希望这些分享能对您有所启发。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2376434.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深度学习中的查全率与查准率：如何实现有效权衡

深度学习中的查全率与查准率：如何实现有效权衡

&#x1f4cc; 友情提示&#xff1a; 本文内容由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;创作平台的gpt-4-turbo模型辅助生成&#xff0c;旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证&#xff0c;建议读者通过官方文档或实践进一步确认…
阅读更多...
Windows玩游戏的时候，一按字符键就显示桌面

Windows玩游戏的时候，一按字符键就显示桌面

最近打赛伯朋克 2077 的时候&#xff0c;不小心按错键了&#xff0c;导致一按字符键就显示桌面。如下&#xff1a; 一开始我以为是输入法的问题&#xff08;相信打游戏的人都知道输入法和奔跑键冲突的时候有多烦&#xff09;&#xff0c;但是后来解决半天发现并不是。在网上搜…
阅读更多...
Gemini 2.5 Flash和Pro预览版价格以及上下文缓存的理解

Gemini 2.5 Flash和Pro预览版价格以及上下文缓存的理解

Gemini 2.5 Flash和Pro预览版价格 Gemini 2.5 Flash 预览版就是 Google 的最新 AI 大模型&#xff0c;能处理巨量内容。可以免费体验&#xff0c;但有次数和功能上的限制&#xff1b;付费层级才开放全部高级功能。价格也比传统 API 略有不同&#xff0c;尤其在“思考预算”“上…
阅读更多...
vue2 头像上传+裁剪组件封装

vue2 头像上传+裁剪组件封装

背景&#xff1a;最近在进行公司业务开发时&#xff0c;遇到了头像上传限制尺寸的需求&#xff0c;即限制为一寸证件照&#xff08;宽295像素&#xff0c;高413像素&#xff09;。 用到的第三方库&#xff1a; "vue-cropper": "^0.5.5" 完整组件代码&…
阅读更多...
AI-02a5a5.神经网络-与学习相关的技巧-权重初始值

AI-02a5a5.神经网络-与学习相关的技巧-权重初始值

权重的初始值 在神经网络的学习中&#xff0c;权重的初始值特别重要。实际上&#xff0c;设定什么样的权重初始值&#xff0c;经常关系到神经网络的学习能否成功。 不要将权重初始值设为 0 权值衰减&#xff08;weight decay&#xff09;&#xff1a;抑制过拟合、提高泛化能…
阅读更多...
【springcloud学习(dalston.sr1)】Eureka单个服务端的搭建（含源代码）（三）

【springcloud学习(dalston.sr1)】Eureka单个服务端的搭建（含源代码）（三）

该系列项目整体介绍及源代码请参照前面写的一篇文章【springcloud学习(dalston.sr1)】项目整体介绍&#xff08;含源代码&#xff09;&#xff08;一&#xff09; 这篇文章主要介绍单个eureka服务端的集群环境是如何搭建的。 通过前面的文章【springcloud学习(dalston.sr1)】…
阅读更多...
Node.js数据抓取技术实战示例

Node.js数据抓取技术实战示例

Node.js常用的库有哪些呢&#xff1f;比如axios或者node-fetch用来发送HTTP请求&#xff0c;cheerio用来解析HTML&#xff0c;如果是动态网页的话可能需要puppeteer这样的无头浏览器。这些工具的组合应该能满足大部分需求。 然后&#xff0c;可能遇到的难点在哪里&#xff1f;…
阅读更多...
windows10 安装 QT

windows10 安装 QT

本地环境有个qt文件&#xff0c;这里是5.14.2 打开一个cmd窗口并指定到该文件根目录下 .\qt-opensource-windows-x86-5.14.2.exe --mirror https://mirrors.ustc.edu.cn/qtproject 执行上面命令 记住是文件名&#xff0c;记住不要傻 X的直接复制&#xff0c;是你的文件名 点击…
阅读更多...
WordPress 和 GPL – 您需要了解的一切

WordPress 和 GPL – 您需要了解的一切

如果您使用 WordPress&#xff0c;GPL 对您来说应该很重要&#xff0c;您也应该了解它。查看有关 WordPress 和 GPL 的最全面指南。 您可能听说过 GPL&#xff08;通常被称为 WordPress 的权利法案&#xff09;&#xff0c;但很可能并不完全了解它。这是有道理的–这是一个复杂…
阅读更多...
C++书本摆放 2024年信息素养大赛复赛 C++小学/初中组 算法创意实践挑战赛 真题详细解析

C++书本摆放 2024年信息素养大赛复赛 C++小学/初中组 算法创意实践挑战赛 真题详细解析

目录 C++书本摆放 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、运行结果 五、考点分析 六、 推荐资料 1、C++资料 2、Scratch资料 3、Python资料 C++书本摆放 2024年信息素养大赛 C++复赛真题 一、题目要求 1、编程实现 中科智慧科技…
阅读更多...
RabbitMQ 核心概念与消息模型深度解析（一）

RabbitMQ 核心概念与消息模型深度解析（一）

一、RabbitMQ 是什么 在当今分布式系统盛行的时代&#xff0c;消息队列作为一种至关重要的中间件技术&#xff0c;扮演着实现系统之间异步通信、解耦和削峰填谷等关键角色 。RabbitMQ 便是消息队列领域中的佼佼者&#xff0c;是一个开源的消息代理和队列服务器&#xff0c;基于…
阅读更多...
论文阅读笔记——双流网络

论文阅读笔记——双流网络

双流网络论文 视频相比图像包含更多信息&#xff1a;运动信息、时序信息、背景信息等等。 原先处理视频的方法&#xff1a; CNN LSTM&#xff1a;CNN 抽取关键特征&#xff0c;LSTM 做时序逻辑&#xff1b;抽取视频中关键 K 帧输入 CNN 得到图片特征&#xff0c;再输入 LSTM&…
阅读更多...
LabVIEW在电子电工教学中的应用

LabVIEW在电子电工教学中的应用

在电子电工教学领域&#xff0c;传统教学模式面临诸多挑战&#xff0c;如实验设备数量有限、实验过程存在安全隐患、教学内容更新滞后等。LabVIEW 作为一款功能强大的图形化编程软件&#xff0c;为解决这些问题提供了创新思路&#xff0c;在电子电工教学的多个关键环节发挥着重…
阅读更多...
Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标

Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标

1、定义icon组件代码&#xff1a; <template><svg :class"svgClass" aria-hidden"true"><use :xlink:href"iconName" :fill"color"/></svg> </template><script> export default defineComponen…
阅读更多...
生活破破烂烂，AI 缝缝补补（附提示词）

生活破破烂烂，AI 缝缝补补（附提示词）

写在前面&#xff1a;​【Fire 计算器】已上线&#xff0c;快算算财富自由要多少​ 现实不总温柔&#xff0c;愿你始终自渡。 请永远拯救自己于水火之中。 毛绒风格提示词&#xff08;供参考&#xff09;&#xff1a; 1. 逼真毛绒风 Transform this image into a hyperrealist…
阅读更多...
张 。。 通过Token实现Loss调优prompt

张 。。 通过Token实现Loss调优prompt

词编码模型和 API LLM不匹配，采用本地模型 理性中性案例（针对中性调整比较合理） 代码解释：Qwen2模型的文本编码与生成过程 这段代码展示了如何使用Qwen2模型进行文本的编码和解码操作。 模型加载与初始化 from transformers import AutoModelForCausalLM, AutoTokenizer
阅读更多...
JVM学习专题（一）类加载器与双亲委派

JVM学习专题（一）类加载器与双亲委派

目录 1、JVM加载运行全过程梳理 2、JVM Hotspot底层 3、war包、jar包如何加载 4、类加载器 我们来查看一下getLauncher&#xff1a; 1.我们先查看getExtClassLoader() 2、再来看看getAppClassLoader(extcl) 5、双亲委派机制 1.职责明确&#xff0c;路径隔离​&#xff…
阅读更多...
PyTorch API 9 - masked, nested, 稀疏, 存储

PyTorch API 9 - masked, nested, 稀疏, 存储

文章目录 torch.randomtorch.masked简介动机什么是 MaskedTensor&#xff1f; 支持的运算符一元运算符二元运算符归约操作查看与选择函数 torch.nested简介构造方法数据布局与形状支持的操作查看嵌套张量的组成元素填充张量的相互转换形状操作注意力机制 与 torch.compile 的配…
阅读更多...
进程相关面试题20道

进程相关面试题20道

一、基础概念与原理 1.进程的定义及其与程序的本质区别是什么&#xff1f; 答案&#xff1a;进程是操作系统分配资源的基本单位&#xff0c;是程序在数据集合上的一次动态执行过程。核心区别&#xff1a;​ 动态性&#xff1a;程序是静态文件&#xff0c;进程是动态执行实例…
阅读更多...
Linux复习笔记（五） 网络服务配置（dhcp)

Linux复习笔记（五） 网络服务配置（dhcp)

二、网络服务配置 2.5 dhcp服务配置&#xff08;不涉及实际操作&#xff09; 要求&#xff1a;知道原理和常见的参数配置就行 2.5.1 概述DHCP&#xff08;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff09; DHCP&#xff08;Dynamic Host Conf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023