fix(ui/utils): support vw vh

affects: @varlet/ui
varletjs · Jun 4, 2021 · b444ed0 · b444ed0
1 parent a6b4e42
commit b444ed0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/packages/varlet-ui/src/counter/Counter.vue b/packages/varlet-ui/src/counter/Counter.vue
@@ -12,8 +12,8 @@
         name="minus"
         :class="[!decrementButton ? 'var-counter--hidden' : null]"
         :style="{
-          width: buttonSize ? toSizeUnit(buttonSize) : null,
-          height: buttonSize ? toSizeUnit(buttonSize) : null,
+          width: toSizeUnit(buttonSize),
+          height: toSizeUnit(buttonSize),
         }"
         v-ripple="{
           disabled: !ripple || disabled || readonly || disableDecrement || !decrementButton || isMin,
@@ -26,8 +26,8 @@
       <input
         class="var-counter__input"
         :style="{
-          width: inputWidth ? toSizeUnit(inputWidth) : null,
-          fontSize: inputTextSize ? toSizeUnit(inputTextSize) : null,
+          width: toSizeUnit(inputWidth),
+          fontSize: toSizeUnit(inputTextSize),
         }"
         :inputmode="toNumber(decimalLength) === 0 ? 'numeric' : 'decimal'"
         :readonly="readonly || formReadonly"
@@ -41,8 +41,8 @@
         name="plus"
         :class="[!incrementButton ? 'var-counter--hidden' : null]"
         :style="{
-          width: buttonSize ? toSizeUnit(buttonSize) : null,
-          height: buttonSize ? toSizeUnit(buttonSize) : null,
+          width: toSizeUnit(buttonSize),
+          height: toSizeUnit(buttonSize),
         }"
         v-ripple="{
           disabled: !ripple || disabled || readonly || disableIncrement || !incrementButton || isMax,

diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
@@ -78,6 +78,12 @@ export const isPx = (value: unknown) => (isString(value) && value.endsWith('px')
 // example 1%
 export const isPercent = (value: unknown) => isString(value) && value.endsWith('%')
 
+// example 1vw
+export const isVw = (value: unknown) => isString(value) && value.endsWith('vw')
+
+// example 1vh
+export const isVh = (value: unknown) => isString(value) && value.endsWith('vh')
+
 // example return 1
 export const toPxNum = (value: unknown): number => {
   if (isNumber(value)) {
@@ -88,6 +94,14 @@ export const toPxNum = (value: unknown): number => {
     return +(value as string).replace('px', '')
   }
 
+  if (isVw(value)) {
+    return (+(value as string).replace('vw', '') * window.innerWidth) / 100
+  }
+
+  if (isVh(value)) {
+    return (+(value as string).replace('vh', '') * window.innerHeight) / 100
+  }
+
   if (isRem(value)) {
     const num = +(value as string).replace('rem', '')
     const rootFontSize = window.getComputedStyle(document.documentElement).fontSize
@@ -99,16 +113,17 @@ export const toPxNum = (value: unknown): number => {
     return toNumber(value)
   }
 
+  // % and other
   return 0
 }
 
-// example return 1px | 1%
+// example return 1px 1% 1vw 1vh 1rem null
 export const toSizeUnit = (value: unknown) => {
   if (value == null) {
     return null
   }
 
-  if (isPercent(value)) {
+  if (isPercent(value) || isVw(value) || isVh(value) || isRem(value)) {
     return value
   }
 
@@ -136,7 +151,10 @@ interface ScrollToOptions {
   animation: (progress: number) => number
 }
 
-export function scrollTo(element: HTMLElement | Window, { top = 0, left = 0, duration = 300, animation }: ScrollToOptions) {
+export function scrollTo(
+  element: HTMLElement | Window,
+  { top = 0, left = 0, duration = 300, animation }: ScrollToOptions
+) {
   const startTime = Date.now()
 
   const scrollTop = getScrollTop(element)

diff --git a/packages/varlet-ui/src/utils/shared.ts b/packages/varlet-ui/src/utils/shared.ts
@@ -19,7 +19,7 @@ export interface CacheInstance<T> {
 }
 
 export const toNumber = (val: number | string | boolean | undefined | null): number => {
-  if (val === undefined || val === null) return 0
+  if (val == null) return 0
 
   if (isString(val)) {
     val = parseFloat(val)