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

今天药忘吃喽~ 2022-11-01 04:20 218阅读 0赞

> 此篇幅主要介绍、我们是如何做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在大型项目中的使用之道-文章结束，原创不易，感谢浏览！