fix: 🐛修复插槽默认值问题

xpyjs · May 22, 2023 · 4263bf5 · 4263bf5
1 parent b6f9daa
commit 4263bf5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -24,9 +24,12 @@
         ]"
         :style="[props.columnStyle, { width: `calc(100% - ${prefixWidth}px` }]"
       >
-        <slot v-if="slots.default" v-bind="toRowData(props.data)" />
+        <slot
+          v-if="isValidSlots(slots.default, props.data)"
+          v-bind="toRowData(props.data)"
+        />
 
-        <template v-else-if="props.prop">{{
+        <template v-else-if="props.prop || props.label">{{
           props.dateFormat
             ? formatDate(originData, props.dateFormat)
             : originData
@@ -71,7 +74,7 @@ const originData = computed(() =>
 );
 
 // #region 计算宽度
-const { $slotsBox, isMerge } = useSlotsBox();
+const { $slotsBox, isMerge, isValidSlots } = useSlotsBox();
 
 const realWidth = computed(() => {
   let curWidth = $slotsBox.tableHeaders.leafs[props!.__index ?? 1].width;

diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
@@ -19,7 +19,7 @@
     <div class="xg-slider-block">
       <!-- 滑块主体 -->
       <slot
-        v-if="slots.content"
+        v-if="isValidSlots(slots.content, props.data)"
         name="content"
         v-bind="toRowData(props.data)"
       />
@@ -28,10 +28,13 @@
         class="xg-slider-content"
         :style="{ backgroundColor: bgColor }"
       >
-        <slot v-if="slots.default" v-bind="toRowData(props.data)" />
+        <slot
+          v-if="isValidSlots(slots.default, props.data)"
+          v-bind="toRowData(props.data)"
+        />
 
         <div
-          v-else-if="props.prop"
+          v-else-if="props.prop || props.label"
           class="slider-text"
           :style="{ 'justify-content': props.alignment }"
         >
@@ -65,7 +68,11 @@
         class="xg-slider-resize left"
         @pointerdown.stop="onResizeLeftDown"
       >
-        <slot v-if="slots.left" name="left" v-bind="toRowData(props.data)" />
+        <slot
+          v-if="isValidSlots(slots.left, props.data)"
+          name="left"
+          v-bind="toRowData(props.data)"
+        />
         <div
           v-else
           class="resize-chunk"
@@ -80,7 +87,11 @@
         class="xg-slider-resize right"
         @pointerdown.stop="onResizeRightDown"
       >
-        <slot v-if="slots.right" name="right" v-bind="toRowData(props.data)" />
+        <slot
+          v-if="isValidSlots(slots.right, props.data)"
+          name="right"
+          v-bind="toRowData(props.data)"
+        />
         <div
           v-else
           class="resize-chunk"
@@ -122,6 +133,7 @@ import useEvent from '@/composables/useEvent';
 import { MoveSliderInternalData, RowData } from '@/typings/data';
 import useLinks from '@/composables/useLinks';
 import useElement from '@/composables/useElement';
+import useSlotsBox from '@/composables/useSlotsBox';
 
 export default defineComponent({
   name: Variables.name.slider
@@ -133,6 +145,7 @@ const props = defineProps(sliderProps);
 const slots = useSlots();
 const { $param } = useParam();
 const { $styleBox } = useStyle();
+const { isValidSlots } = useSlotsBox();
 
 const height = computed(() => {
   if (typeof props.height === 'number') {

diff --git a/src/composables/useSlotsBox.ts b/src/composables/useSlotsBox.ts
@@ -1,7 +1,8 @@
 import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
 import { type RowData } from '@/typings/data';
-import { type Slots } from 'vue';
+import { isSymbol } from 'lodash';
+import { type Slots, type Slot } from 'vue';
 import useData from './useData';
 
 export default () => {
@@ -20,12 +21,13 @@ export default () => {
     return typeof m === 'function' ? m(toRowData(data)) : !!m;
   }
 
-  // watch(
-  //   () => [store.$styleBox.showCheckbox],
-  //   () => {
-  //     store.$slotsBox.setSlots(store.$slotsBox.cols);
-  //   }
-  // );
+  function isValidSlots(slots?: Slot<any>, data?: RowItem) {
+    if (!slots) return false;
 
-  return { $slotsBox: store.$slotsBox, setSlots, isMerge };
+    return (
+      slots?.(toRowData(data))?.filter(item => !isSymbol(item.type)).length > 0
+    );
+  }
+
+  return { $slotsBox: store.$slotsBox, setSlots, isMerge, isValidSlots };
 };