vuecli3加typescript使用混入mixin

最新推荐文章于 2025-05-17 18:58:16 发布

LLL_LH

最新推荐文章于 2025-05-17 18:58:16 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/103309350

Vue 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一种使用Vue混入的方法来统一处理表格分页和表单清空逻辑，通过创建mixin.ts文件并导入Vue与Component，实现了分页配置、分页事件响应、表单清空及数据请求功能。此混入可在多个组件间复用，提高代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、新建一个mixin.ts

import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Mixin extends Vue {
  // table 默认分页
  private pages = {
    page: 1,
    row: 10
  }

  // 每页条数更改
  private sizeChange(val: number) {
    this.pages.row = val;
    (this as any).getData()
  }

  // 页码更改查询
  private currentChage(val: number) {
    this.pages.page = val;
    (this as any).getData()
  }

  // 清空表单
  private clearForm(form: object, noClearName: string = '') {
    for (let i in form) {
      // if (i !== noClearName) if ((form as any)[i] !== null) (form as any)[i] = ''
      if (i !== noClearName) (form as any)[i] = ''
    }
  }

  // 去对象空KEY
  private removeKeyOrNull(form: object) {
    for (let i in form) {
      (form as any)[i] === '' ? delete (form as any)[i] : ''
    }
    return form
  }

  // 删除提示
  private promptAction(msg: string = '该操作不可逆是否继续') {
    return new Promise((reslove: any, reject: any) => {
      this.$confirm(msg).then(() => {
        reslove();
      }).catch(() => {
        reject();
      })
    })
  }
}

2、在main.ts引入

import mixin from './mixin'
Vue.mixin(mixin);

3、在组件中使用

// 获取用户
  private getData() {
    this.tableLoading = true;
    (this as any).$axios
      .get(
        `user?page=${(this as any).pages.page}&rows=${
          (this as any).pages.row
        }
      )
      .then((res: any) => {
        this.tableData = res.data;
        this.tableLoading = false;
      });
  }