自定义指令实现Element Plus分页组件内容样式修改

改之前是这样的

改之后是这样的

因为之前我也有写过文章讲解Vue2-ElementUI分页组件的样式修改。

 ElementUI 分页组件内容样式修改icon-default.png?t=N7T8https://blog.csdn.net/qq_54548545/article/details/139728064且通常情况下,一个项目若是大量使用到分页组件,咱们也不可能每个.vue文件都去写一长串代码,所以这次我将说一下如何将这种方式改写成 自定义指定的方式实现 Element Plus分页组件样式修改。


// directives/pagi/index.js
export default {// 绑定即触发,el为DOM元素,binding能读取元素上绑定的各内容集合的对象mounted(el, binding) {// 找到需要修改内容的元素let dom = el.childNodes[el.childNodes.length - 1].childNodes[0]dom.innerHTML = binding.value// 为了更加清楚看出修改部分dom.style.color = 'red'},updated(el, binding) {let dom = el.childNodes[el.childNodes.length - 1].childNodes[0]// 如果绑定的内容与原始内容一致就不需要修改,这里要考虑边界值if (binding.value !== binding.oldValue) {dom.innerHTML = binding.value}}
}
// directives/index.js
import pagi from "./pagi"
// 自定义指令对象,用于遍历注册
const directives = {pagi
}
// 批量注册指令并暴露到main.js中去便于注册
export default {install(app) {Object.keys(directives).forEach((key) => {app.directive(key, directives[key])})}
}
// main.js中引入以下代码// 引入并使用自定义指令
import directive from './directives'
app.use(directive);
  <h4>修改分页器Go文字自定义指令</h4><div class="demo-pagination-block"><div class="demonstration">Jump to</div><el-pagination v-pagi="'You Jump, I Jump!'" v-model:current-page="currentPage3" v-model:page-size="pageSize3":size="size" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"@size-change="handleSizeChange" @current-change="handleCurrentChange" /></div><div class="demo-pagination-block"><div class="demonstration">All combined</div><el-pagination v-pagi="'You Jump, I Jump!'" v-model:current-page="currentPage4" v-model:page-size="pageSize4":page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"@current-change="handleCurrentChange" /></div>
<script setup>
import { ref } from 'vue'
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)const handleSizeChange = (val) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {console.log(`current page: ${val}`)
}
</script>

同样的思路可以解决很多代码复用的问题,记得举一反三。

积跬步,至江河。加油ヾ(◍°∇°◍)ノ゙

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux vim编辑文件界面的所有命令

Vim 是一个高度可配置的文本编辑器&#xff0c;广泛用于 Unix、Linux 和 macOS 系统。它提供了一套丰富的命令和快捷键来高效地进行文本编辑。下面列举了一些 Vim 编辑文件界面中最常用和基础的命令和快捷键&#xff0c;但请注意 Vim 的命令集非常庞大&#xff0c;这里只涵盖了…

nginx配置反向代理404问题

使用Nginx进行反向代理,代码如下: server {listen 85;server_name _;charset utf-8;location /thirdServiceApi/ {proxy_pass https://www.test.net/thirdServiceApi/;proxy_set_header Host $http_ho

Mac怎么录屏带声音,学会这2种方法,轻松解决

在数字化时代&#xff0c;录屏已经成为我们工作、学习和娱乐中不可或缺的一部分。对于Mac用户来说&#xff0c;Mac怎么录屏带声音是一个非常实用又重要的操作&#xff0c;无论是为了保存会议内容、制作教学视频还是为了录制游戏视频&#xff0c;这一功能都能为我们提供极大的便…

会员运营体系设计及SOP梳理

一些做会员的经验和方法分享给大家&#xff0c;包括顶层思考、流程的梳理、组织的建立&#xff0c;后续会做成系列&#xff0c;最近几期主要围绕顶层策略方面&#xff0c;以下是核心内容的整理&#xff1a; 1、会员运营体系设计 顶层设计与关键业务定位&#xff1a;建立客户运营…

Web学习day03

maven&Mybatis 目录 maven&Mybatis 文章目录 一、maven 1.1作用 1.2仓库 1.3命令 1.4依赖范围 1.5生命周期 二、MyBatis 2.1简介 2.2API 2.3增删改的实现&案例 总结 一、maven 1.1作用 统一项目结构&#xff1b;项目构建&#xff1a;通过简单命令&a…

Java 枚举教程

Java 枚举是一种特殊的类&#xff0c;用于表示一组固定的常量值。枚举类使用 enum 关键字来定义&#xff0c;通常用于表示一组相关的常量&#xff0c;比如季节、月份、星期天等。本文将详细介绍 Java 枚举的基本概念、使用方法以及一些高级用法。 1. 定义枚举类 枚举类使用 e…

GitHub 站点打不开

遇到的问题 您是否遇到过GitHub网站打不开的情况&#xff0c;正如下图所示&#xff1a; 解决方案 以下是一些常见的解决方案&#xff1a; 1. 检查网络连接 确保你的设备已连接到互联网。尝试访问其他网站&#xff0c;确保不是你的网络问题。 C:\Vinca>ping github.…

Vue+SpringBoot实现仿网盘项目

目录 一、效果展示 二、前端代码 三、后端代码及核心解释 四、进阶开发与思路 一、效果展示 1.1读取文件夹内的文件 1.2删除功能 1.3 上传文件 1.4 文件下载 对应的网盘实际地址与对应下载内容&#xff1a; 二、前端代码 2.1 创建vue项目&#xff08;需要有vuex与router&…

称重传感器有哪些种类

有关称重传感器的知识&#xff0c;称重传感器是众多传感器产品中的一种&#xff0c;也是很常用的传感器之一&#xff0c;那么称重传感器有哪些种类&#xff0c;称重传感器的分类方式是什么样的&#xff0c;一起来了解下。 称重传感器的分类 主要有六种称重传感器类型&#xf…

C++笔试真题

可变分区管理方案 最佳适应&#xff1a;空闲区按容量递增最坏适应&#xff1a;空闲区按容量递减首先适应&#xff1a;空闲区按地址递增 C的结构体中有构造函数。 Linux新建用户或组 useradd&#xff1a;命令用于建立用户账号usermod&#xff1a;修改用户账号groupadd&#…

【模块化与包管理】:解锁【Python】编程的高效之道

目录 1.什么是模块&#xff1f; 2. 模块的导入过程 3. 理解命名空间 4. import语句的多种形式 5. 模块的执行与重新导入 6. 包&#xff08;Package&#xff09; 7. sys模块和os模块 sys模块 常用属性 示例&#xff1a;使用sys模块 os模块 常用功能 示例&#xff1…

【鸿蒙学习笔记】使用动画

官方文档&#xff1a;使用动画 目录标题 属性动画&#xff1a;通用属性发生改变时而产生的属性渐变效果animationanimateTo自定义属性动画 AnimatableExtend 转场动画&#xff1a;是页面或组件的切换动画 , 显示/隐藏 切换时的动画出现/消失转场&#xff1a;实现一个组件出现或…

redis内存分析

阿里云redis集群对key进行hash后保存在对应的后端节点&#xff0c;使每个节点的key数量大致相同&#xff0c;但是如果存在大key&#xff0c;就会导致单个节点内存用满&#xff0c;可以使用redis-rdb-tools 或rdr来对内存进行分析。 redis-rdb-tools redis-rdb-tools通过对dum…

【Superset】dashboard 自定义URL

URL设置 在发布仪表盘&#xff08;dashboard&#xff09;后&#xff0c;可以通过修改看板属性中的SLUG等&#xff0c;生成url 举例&#xff1a; http://localhost:8090/superset/dashboard/test/ 参数设置 以下 URL 参数可用于修改仪表板的呈现方式&#xff1a;此处参考了官…

SolidWorks滚花螺栓制作-cnblog

目标 规划基准图形 确定尺寸&#xff0c;单位mm 我 对固定好的图形进行旋转 倒角 设置螺纹 注意改变深度为15mm 收尾位置补全 滚花 建立基准面 制作多边形 添加穿透 扫描切除 圆周阵列 成品完成

春风得意特斯拉(六)

占据顶流的炼金术 科技企业的创始人&#xff0c;也是品牌传播的载体和IP&#xff0c;他们自觉或不自觉的人设和流量会自动加持到品牌身上&#xff0c;让品牌和人设双向赋能&#xff0c;成为媒体的流量宠儿。纵观全球&#xff0c;科技行业创始人个人品牌打造之路也各有千秋。国外…

【深度学习】手动完成线性回归!

&#x1f34a;嗨&#xff0c;大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; )&#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官、CSDN人工智能领域优质创作者 。 易编橙&#xff1a;一个帮助编程小…

现代码头装卸系统:技术创新与效率提升

引言 码头装卸系统在全球贸易和物流链中扮演着至关重要的角色。随着全球化进程的加快&#xff0c;国际贸易量不断增加&#xff0c;港口作为货物进出主要枢纽&#xff0c;其装卸效率直接影响到整个物流链的运作效率和成本。一个高效、现代化的码头装卸系统不仅能提高港口的货物处…

JVM是如何创建一个对象的?

哈喽&#xff0c;大家好&#x1f389;&#xff0c;我是世杰。 本文我为大家介绍面试官经常考察的**「Java对象创建流程」** 照例在开头留一些面试考察内容~~ 面试连环call Java对象创建的流程是什么样?JVM执行new关键字时都有哪些操作?JVM在频繁创建对象时&#xff0c;如何…

JVM垃圾回收器详解

垃圾回收器 JDK 默认垃圾收集器&#xff08;使用 java -XX:PrintCommandLineFlags -version 命令查看&#xff09;&#xff1a; JDK 8&#xff1a;Parallel Scavenge&#xff08;新生代&#xff09; Parallel Old&#xff08;老年代&#xff09; JDK 9 ~ JDK20: G1 堆内存中…