目录

一、message

二、分页

一、message

比如我们删除多个列表的时候，使用message会出现多次，这样体验不是很好，应该是无论删除多少个，都只出现一次，所以我对message进行了二次封装。

1、创建utils/resetMessage.js

/**第一种 */
/**重置message，防止重复点击重复弹出message弹框 */
import {
    Message
} from 'element-ui';
const showMessage = Symbol('showMessage')
class DoneMessage {
    [showMessage](type, options, single) {
        if (single) {
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const message = new DoneMessage();



/**第二种 */
// /**重置message，防止重复点击重复弹出message弹框 */
// import { Message } from "element-ui";
// let messageInstance = null;
// let mainMessage = function DoneMessage (options) {
//     //如果弹窗已存在先关闭
//     if (messageInstance) {
//         messageInstance.close();
//     }
//     messageInstance = Message(options);
// }
// let arr = ['success', 'warning', 'info', 'error'];
// arr.forEach(function (type) {
//     mainMessage[type] = function (options) {
//         if (typeof options === 'string') {
//             options = {
//                 message: options
//             };
//         }
//         options.type = type;
//         return mainMessage(options);
//     };
// });
// export const message = mainMessage;

2、在main全局引入

import { message } from '@/utils/resetMessage';
Vue.use(ElementUI)
Vue.prototype.$mess = message; //部分页面需要
// Vue.prototype.$mess = message; //全部页面

3、页面使用

this.$mess.error('删除成功')

二、分页

对分页进行封装，修改成自己的样式，整个项目的分页就可以统一起来

1、封装组件Pagination/index.vue

<template>
  <div id="pagination" class="pagination-container">
    <el-pagination
      align="right"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    total: { //总条数
      required: true,
      type: Number
    },
    // page: { //页码
    //   type: Number,
    //   default: 0
    // },
    page: { //页码
      type: Number,
      default: 1
    },
    limit: { //每页条数
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default () {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      //   // 开始页码是0
      //   get () {
      //     return this.page + 1
      //   },
      //   set (val) {
      //     this.$emit('update:page', val - 1)
      //   }
      get () {
        return this.page
      },
      set (val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get () {
        return this.limit
      },
      set (val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
    },
    handleCurrentChange (val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    },


    // 页码是从0开始
    // handleSizeChange (val) {
    //   this.$emit('pagination', { page: this.currentPage - 1, limit: val })     
    //   //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange (val) {
    //   this.$emit('pagination', { page: val - 1, limit: this.pageSize })
    //   //   console.log(`当前页: ${val}`);
    // },
  },
}
</script>


<style lang="scss" >
#pagination {
  .el-pager li {
    background-color: transparent;
    color: #000;
    border: 1px solid #d0d0d1;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 0 3px;
  }

  .el-pager li:not(.disabled).active {
    background-color: #2e3192;
    color: #fff;
  }

  .el-pager li:hover {
    color: #000;
  }

  .el-pagination .btn-prev {
    background-color: transparent !important;
    color: #000;
    border: 1px solid #d0d0d1;
    margin: 0 5px;
    min-width: 25px;
    padding: 0;
    height: 25px;
    line-height: 25px;
  }

  .el-pagination .btn-next {
    background-color: transparent !important;
    color: #000;
    border: 1px solid #d0d0d1;
    margin: 0 5px;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    padding: 0;
  }

  .el-pagination__jump {
    margin-top: -1px;
  }

  .el-pagination__editor.el-input .el-input__inner {
    line-height: 26px;
    width: 40px;
  }
  .el-pagination__editor.el-input .el-input__inner {
    height: 26px;
    border-color: #d0d0d1 !important;
  }
  .el-pagination__sizes .el-input .el-input__inner {
    height: 26px;
    border-color: #d0d0d1 !important;
  }
  .el-pagination {
    margin: 30px 0 20px 0;
    // overflow: auto;
    // display: flex;
    // align-items:center ;
    // flex-wrap: wrap;
  }
  .el-pager li.active + li {
    border-left: 1;
  }
}
</style>

<style lang="scss" scoped>
.center {
  padding: 0 30px;
}

.pagination {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

2、页面使用

 <Pagination
        v-if="page.total > 0"
        :total="page.total"
        :page.sync="page.page"
        :limit.sync="page.pagesize"
        @pagination="getList"
      ></Pagination>

<script>
import { MenuGetList } from '@/api/Menu'
import Pagination from '@/components/Pagination/index.vue'

export default {
  components: {
    Pagination,
  },
  data () {
    return {
      tableData: [],//数据
      page: {
        page: 1,//当前页
        pagesize: 10,//每页大小
        total: 50,//总条数
      },
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    getList () {
      //   重新渲染数据
      this.getlist()
    },
    //   获取全部数据
    async getlist () {
      const res = await MenuGetList(this.page)
      this.tableData = res.data.records
      this.page.total = res.data.total
    },
  }
}
</script>