vue2.x搭建saas项目系列之八：mixins在大型项目中的使用之道

此篇幅主要介绍、我们是如何做mixins的公共类封装，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代

由于是saas项目，对于Table的搜索、操作都差不多，于是基于类似的场景抽离了多个mixin类，直接在项目中混入即可

Table index.ts

/*
 * @Author: 无招
 * @Date: 2020-11-04 09:42:29
 * @LastEditTime: 2021-01-05 11:53:14
 * @LastEditors: Please set LastEditors
 * @Description: 列表的 头部左侧搜索、分页、以及一些关于 表格的参数 和方法
 */

 
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({
  name: 'TableMixin'
})
export default class extends Vue {
  public loading: boolean = false                   // loading状态
  public searchValue: string = ''                     // search val
  public moreSearchVal: any = {}                    // 更多搜索 search val 
  public searchVisible: boolean = false             // 头部更多搜索 弹窗
  public total: number = 0                        // 分页参数 总个数
  public page: number = 1                         // 分页参数 页码
  public pages: number = 10                        // 总页数
  public limtSize: number = 10                    // 分页参数 页长
  public inputNum: number = 1                     // 左上角 输入框 搜索
  public tableData: any[] = []                    // 列表数据
  public emptyText: string = ''                   // 列表没有的 显示 文字
  public noDataState: boolean = false             // 列表没有的 显示 状态
  public searchObj = {                            // 搜索的基础对象
    pageSize: this.limtSize,
    pageNum: this.page
  }       
  
  created() { 
    this.getTableData()
  }
  // 列表 接口
  public getTableData(): void {  
    // console.log('getTableData')
  }
  
  // 底部 分页操作
  public paginationList(obj: any) {    
    this.limtSize = obj.limit
    this.page = obj.page
    this.searchObj.pageSize = obj.limit
    this.searchObj.pageNum = obj.page
    this.getTableData()
  }
}

页面中使用

import { Component, Vue } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import TableMixin from '@/mixins/table'

export default class extends mixins(TableMixin) {}

到此，mixins在大型项目中的使用之道-文章结束，原创不易，感谢浏览！