From b22e4cb098caa42327c0aac333891af3bc080e2c Mon Sep 17 00:00:00 2001
From: forget skyrim <11513667+forget-skyrim@user.noreply.gitee.com>
Date: Tue, 6 Dec 2022 21:54:20 +0000
Subject: [PATCH] =?UTF-8?q?fix(page-header):=20backIcon=20=E6=8F=92?=
 =?UTF-8?q?=E6=A7=BD=E5=9C=A8html=20=E6=96=87=E4=BB=B6=E4=B8=AD=E6=97=A0?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: forget skyrim <11513667+forget-skyrim@user.noreply.gitee.com>
---
 .../src/component/pageHeader/index.vue        |  8 +++---
 package/component/src/utils/vueUtil.ts        | 26 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/package/component/src/component/pageHeader/index.vue b/package/component/src/component/pageHeader/index.vue
index 9e5350ca..1d36c6c5 100644
--- a/package/component/src/component/pageHeader/index.vue
+++ b/package/component/src/component/pageHeader/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="lay-page-header">
     <div class="lay-page-header__left" @click="emits('back')">
-      <slot name="backIcon"
+      <slot :name="backIconSlotName"
         ><i class="layui-icon" :class="[backIcon]"></i
       ></slot>
       <div class="lay-page-header__title">{{ backText }}</div>
@@ -19,7 +19,8 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { useSlots } from "vue";
+import { convertSlotName } from "../../utils";
+import { getCurrentInstance, useSlots } from "vue";
 import "./index.less";
 
 export interface PageHeaderProps {
@@ -34,6 +35,7 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
 });
 
 const emits = defineEmits(["back"]);
-
 const slots = useSlots();
+const instance = getCurrentInstance()!;
+const backIconSlotName = convertSlotName(instance, "backIcon");
 </script>
diff --git a/package/component/src/utils/vueUtil.ts b/package/component/src/utils/vueUtil.ts
index e4bdc309..d7b3fb76 100644
--- a/package/component/src/utils/vueUtil.ts
+++ b/package/component/src/utils/vueUtil.ts
@@ -1,4 +1,4 @@
-import { Component, VNode, VNodeTypes } from "vue";
+import { Component, ComponentInternalInstance, VNode, VNodeTypes } from "vue";
 
 export enum ShapeFlags {
   ELEMENT = 1,
@@ -31,3 +31,27 @@ export const isArrayChildren = (
 ): children is VNode[] => {
   return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
 };
+
+/**
+ * 同时支持驼峰命名和破折号命名的插槽，示例：back-icon 和 backIcon
+ * @param vm 组件实例
+ * @param name 插槽名
+ */
+export function convertSlotName(vm: ComponentInternalInstance, name: string) {
+  const camelCaseName = camelCase(name);
+  const kebabCaseName = kebabCase(name);
+  return vm.slots[camelCaseName] 
+    ? camelCaseName 
+    : vm.slots[kebabCaseName] 
+    ? kebabCaseName
+    : name
+}
+
+export function camelCase(str: string) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+export function kebabCase(key: string) {
+  const result = key.replace(/([A-Z])/g, ' $1').trim();
+  return result.split(' ').join('-').toLowerCase()
+}