一. 高阶组件封装

1.1. PageContent

• header
• 定义参数类型
• 接受参数
• 自定义事件

interface IProps {
 contentConfig: {
   pageName: string
   header?: {
     title?: string
     btnTitle?: string
   }
   propsList: any[]
   childrenTree?: any
 }
}

const props = defineProps<IProps>()

// 定义事件
const emit = defineEmits(['newClick', 'editClick'])

• propsList
  • 插槽 => 作用于插槽 => 完全的定制化
• pageName

1.2. PageModal

配置文件:

• pageName

• header:

  • newTitle
  • editTitle

• formItems

  • el-form-item => el-input/el-select

某些 select 的 options 数据来自服务器

• modalConfig => mainStore => computed

const modalConfigRef = computed(() => {
  const mainStore = useMainStore();
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id };
  });
  modalConfig.formItems.forEach((item) => {
    if (item.prop === "parentId") {
      item.options.push(...departments);
    }
  });

  return modalConfig;
});

1.3. 页面 hooks 抽取

• usePageContent

import { ref } from 'vue'
import type PageContent from '@/components/page-content/page-content.vue'

function usePageContent() {
  const contentRef = ref<InstanceType<typeof PageContent>>()
  function handleQueryClick(queryInfo: any) {
    contentRef.value?.fetchPageListData(queryInfo)
  }
  function handleResetClick() {
    contentRef.value?.fetchPageListData()
  }

  return {
    contentRef,
    handleQueryClick,
    handleResetClick
  }
}

export default usePageContent

• usePageModal

import { ref } from 'vue'
import type PageModal from '@/components/page-modal/page-modal.vue'

type EditFnType = (data: any) => void

function usePageModal(editCallback?: EditFnType) {
  const modalRef = ref<InstanceType<typeof PageModal>>()
  function handleNewClick() {
    modalRef.value?.setModalVisible()
  }
  function handleEditClick(itemData: any) {
    // 1.让modal显示出来
    modalRef.value?.setModalVisible(false, itemData)
    // 2.编辑的回调
    if (editCallback) editCallback(itemData)
  }

  return { modalRef, handleNewClick, handleEditClick }
}

export default usePageModal

1.4. 小 bug 的处理

• 多余的导入文件
• defineProps<不能来自文件引入>()

二. 页面的细节处理

2.1. 菜单的页面

• 展示子菜单
  • row-key

2.2. PageModal 自定义插槽

2.3. ElTree 的展示

• 获取完整的菜单
• 创建角色时, 携带选中的菜单
  • otherInfo 属性

2.4. 编辑角色数据回显

• mapMenuListToIds
• elTree.value?.setCheckKeys([])

2.5. nextTick

• 使用场景
• 原理
• 源码