配置参数

config

event

配合page.hook使用

<template>
    <div>
        <page @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :pageConfig="pageConfig"></page>
        <v-md-editor v-model="result"
                     style="width: 100%"
                     mode="preview"></v-md-editor>
    </div>
</template>

<script lang="ts">
    import { defineComponent, reactive, toRefs} from 'vue';
    import page from '@/components/page/page.vue';
    import pageNation from '@/components/hooks/page';
    export default defineComponent({
      name: 'pages',
      components: {
        page
      },
      setup () {
        const search = reactive({
          result: '',
          getList :() => {
            search.result = '``` javascript \n' +
              JSON.stringify(pageAction.pageConfig, null, 2) +
              '\n```';
          },
          handleCurrentChange: (val:number) => {
            pageAction.handleCurrentChange(val);
          },
          handleSizeChange: (val:number) => {
            pageAction.handleSizeChange(val)
          }
        });
          // 传入配置对象的实例,与需要页码页数变换 调用的函数
        const pageAction = pageNation(search, 'getList');
        pageAction.pageConfig.total = 300;
        search.result = '``` javascript \n' +
          JSON.stringify(pageAction.pageConfig, null, 2) +
          '\n```';
        const usePage = toRefs(pageAction);
        const useSearch = toRefs(search);
        return {
          ...usePage,
          ...useSearch
        }
      }
    })
</script>

page.hook 源码

import {reactive} from 'vue';
import projectConfigs from '@/config';

function pageNation(search: any, funName: string = projectConfigs.pageHookConfig.defaultSearchFunctionName) {
  const pageTool = reactive({
    pageConfig: projectConfigs.pageConfig,
    handleSizeChange: (val: number) => {
      pageTool.pageConfig.pageSize = val;
      search[funName]();
    },
    handleCurrentChange: (val: number) => {
      pageTool.pageConfig.currentPage = val;
      search[funName]();
    }
  });

  return pageTool;
}

export default pageNation;