fix(ui/divider): support passing string inset with unit to divider

varletjs · Jun 14, 2021 · 5cbd457 · 5cbd457
1 parent b88edb2
commit 5cbd457
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/varlet-ui/src/divider/Divider.vue b/packages/varlet-ui/src/divider/Divider.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, computed, reactive, onMounted, toRefs } from 'vue'
 import { toSizeUnit } from '../utils/elements'
-import { isBool } from '../utils/shared'
+import { isBool, toNumber } from '../utils/shared'
 import { props } from './props'
 
 export default defineComponent({
@@ -37,16 +37,19 @@ export default defineComponent({
 
       if (isBool(inset) || inset === 0) return { ...baseStyle }
 
-      const absInset = Math.abs(inset)
+      // -18px -> -18
+      const _inset = toNumber(inset)
+      // -18px -> 18px
+      const absInsetWithUnit = Math.abs(_inset) + (inset + '').replace(_inset + '', '')
       return vertical
         ? {
             ...baseStyle,
-            height: `calc(80% - ${toSizeUnit(absInset)})`,
+            height: `calc(80% - ${toSizeUnit(absInsetWithUnit)})`,
           }
         : {
             ...baseStyle,
-            width: `calc(100% - ${toSizeUnit(absInset)})`,
-            left: inset > 0 ? toSizeUnit(inset) : toSizeUnit(0),
+            width: `calc(100% - ${toSizeUnit(absInsetWithUnit)})`,
+            left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0),
           }
     })
 

diff --git a/packages/varlet-ui/src/divider/props.ts b/packages/varlet-ui/src/divider/props.ts
@@ -1,6 +1,6 @@
 export const props = {
   inset: {
-    type: [Boolean, Number],
+    type: [Boolean, Number, String],
     default: false,
   },
   vertical: {