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

改之前是这样的


改之后是这样的

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

ElementUI 分页组件内容样式修改https://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>

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

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

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说4 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录8 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app