快捷導(dǎo)航

vue項(xiàng)目使用typescript創(chuàng)建抽象類及其使用方式

更新時(shí)間：2024年03月04日 09:00:44 作者：左直拳

這篇文章主要介紹了vue項(xiàng)目使用typescript創(chuàng)建抽象類及其使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1、創(chuàng)建抽象類

據(jù)說(shuō)js類中，“#”開(kāi)頭的變量或方法，就是私有變量或方法（見(jiàn)拙作《vue項(xiàng)目中的類》）。

但是，現(xiàn)在TypeScript有private、protected、public等全套關(guān)鍵詞。

export abstract class ListPage {
  #queryForm //查詢框表單對(duì)象，例如：const queryForm = ref()，<el-form ref="queryForm">
  #myPageSetup //分頁(yè)對(duì)象，例如：const myPageSetup = cloneDeep(pageSetup)

  constructor(queryForm, pageSetup) {
    this.#queryForm = queryForm
    this.#myPageSetup = pageSetup
  }

  //列表數(shù)據(jù)請(qǐng)求。抽象方法，子類必須實(shí)現(xiàn)
  abstract doQuery(): void

  //查詢
  onSearch = () => {
    this.#myPageSetup.pageIndex = 1
    this.doQuery()
  }
  //重置
  onReset = () => {
    this.#queryForm.value.resetFields()
  }
  //跳轉(zhuǎn)至指定頁(yè)碼
  onPageChange = (pageIndex) => {
    this.#myPageSetup.pageIndex = pageIndex
    this.doQuery()
  }
  //改變分頁(yè)大小
  onPageSizeChange = (size) => {
    this.#myPageSetup.pageIndex = 1
    this.#myPageSetup.pageSize = size
    this.doQuery()
  }
  //排序
  onColumnSort = ({ prop, order }) => {
    this.#myPageSetup.order = order
    this.#myPageSetup.sort = prop
    this.doQuery()
  }
}

2、應(yīng)用該抽象類

class MyListPage extends ListPage {
  constructor() {
    super(defaultQueryForm, myPageSetup) // 在派生類的構(gòu)造函數(shù)中必須調(diào)用super()
  }

//實(shí)現(xiàn)抽象方法。async代表異步，基類中的沒(méi)有聲明是否異步，既可以異步，也可以不異步。
  doQuery = async () => {
	//巴拉巴拉巴拉
  }
}
const myListPage = new MyListPage()
myListPage.onSearch()