亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

antDesign 自定義分頁樣式的實現(xiàn)代碼

 更新時間：2022年10月21日 15:42:57   作者：周家大小姐.  
這篇文章主要介紹了antDesign 自定義分頁樣式的實現(xiàn)代碼，這里用到了自定義指令,如果大家用不到可以按照自己的實際效果開發(fā),本文通過實例代碼給大家詳細講解，需要的朋友可以參考下

原圖

 

設計要的效果圖

上代碼

這里用到了自定義指令,如果大家用不到可以安自己的實際效果開發(fā)

 創(chuàng)建directive/index.js頁面用于把所有自定義指令可以一次引入

/*
 * @Author: 周云芳
 * @Date: 2022-06-28 15:21:41
 * @LastEditors: 周云芳 164591357@qq.com
 * @LastEditTime: 2022-10-21 14:26:58
 * @Description: 用于自動注冊全局自定義指令
 * 使用規(guī)則:
 * 根據(jù)導出的name在頁面使用如directives對象中的name為a-pagination,頁面使用:v-a-pagination
 */
const requireDirective = require.context('./', true, /\.js$/)
// 自定義指令
let directives = {}
requireDirective.keys().map(file => {
  // console.log('file', file)
  const name = removerLastIndex(file)
  console.log('name', name)
  if (name) {
    directives = {
      ...directives,
      [name]: requireDirective(file).default
    }
  }
 
  return false
})
function removerLastIndex(str) {
  const start = str.substring(2, str.length) // 去除路徑中的./ start=el-drag-dialog/index.js
  // str = login/index
  // 獲取最后一個/的索引
  const index = start.lastIndexOf('/')
  // 獲取最后一個/后面的值
  const val = start.substring(index + 1, start.length)
  // 判斷是不是index結尾
  if (val === 'index.js') {
    return start.substring(index, -1)
  }
  return str
}
 
export default {
  install(Vue) {
    Object.keys(directives).forEach(key => {
      Vue.directive(key, directives[key])
    })
  }
}

創(chuàng)建分頁指令頁面在directive文件夾下建a-pagination這文件夾下創(chuàng)建兩個文件index.css,index.js

index.js寫業(yè)務邏輯

/*
 * @Author: 周云芳
 * @Date: 2022-07-19 09:12:39
 * @LastEditors: 周云芳 164591357@qq.com
 * @LastEditTime: 2022-10-21 15:05:49
 * @Description:設置分頁為左右布局 指令使用 v-el-pagination
 */
import './index.css'
export default {
  inserted: (el, binding) => {
    setTimeout(() => {
      // 把分頁條數(shù)放入總條數(shù)后
      const options = el.getElementsByClassName('ant-pagination-options')[0]
      const sizeChange = options.getElementsByClassName(
        'ant-pagination-options-size-changer'
      )[0] // 分頁數(shù)
      const prev = el.getElementsByClassName('ant-pagination-prev')[0]
      //   // 創(chuàng)建兩個左右div
      const liDom = document.createElement('li')
      liDom.className = 'size-change-li'
      //   RDiv.className = 'right-div'
      liDom.appendChild(sizeChange)
      el.insertBefore(liDom, prev) // 在上一頁前插入節(jié)點
    }, 100)
  }
}

效果:

index.css 進行樣式調整

.size-change-li {
    display: inline-block;
}
.ant-pagination-prev .ant-pagination-item-link,
 .ant-pagination-next .ant-pagination-item-link,
.ant-pagination-item {
    border: none;
}
 
.ant-pagination-item {
    font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 14px;
}
 
.ant-pagination-item-active {
    background: #3296FA;
    border-radius: 4px;
}
 
.ant-pagination-item-active a,.ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a{
    color: #FFFFFF;
}

最后效果

最后記得全局自定義指令要在main.js引入

import Directive from '@/directive'
Vue.use(Directive)

頁面使用指令  v-a-pagination

 <a-pagination v-a-pagination show-quick-jumper  show-size-changer  :total="total" :show-total="total => `總共 ${total} 條`"  @change="onChange" />

到此這篇關于antDesign 自定義分頁樣式的文章就介紹到這了,更多相關antDesign 自定義分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論