@mpxjs/webpack-plugin 2.10.15-4 → 2.10.15-prelease.1

package/lib/runtime/components/react/mpx-slider.tsx

@@ -0,0 +1,444 @@
+/**
+ * ✔ min 最小值
+ * ✔ max 最大值
+ * ✔ step 步长
+ * ✔ disabled 是否禁用
+ * ✔ value 当前取值
+ * ✔ color 背景条的颜色（已废弃，使用 backgroundColor）
+ * ✔ selected-color 已选择的颜色（已废弃，使用 activeColor）
+ * ✔ activeColor 已选择的颜色
+ * ✔ backgroundColor 背景条的颜色
+ * ✔ block-size 滑块的大小
+ * ✔ block-color 滑块的颜色
+ * ✘ show-value 是否显示当前 value
+ * ✔ bindchange 完成一次拖动后触发的事件
+ * ✔ bindchanging 拖动过程中触发的事件
+ */
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  useEffect,
+  useState,
+  createElement,
+  ForwardedRef,
+  useContext,
+  useMemo
+} from 'react'
+import {
+  View,
+  ViewStyle
+} from 'react-native'
+import { GestureDetector, Gesture, GestureStateChangeEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler'
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
+import { warn } from '@mpxjs/utils'
+
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils'
+import Portal from './mpx-portal'
+import { FormContext, FormFieldValue } from './context'
+
+export interface SliderProps {
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  value?: number
+  color?: string
+  'selected-color'?: string
+  activeColor?: string
+  backgroundColor?: string
+  'block-size'?: number
+  'block-color'?: string
+  name?: string
+  bindchange?: (event: any) => void
+  catchchange?: (event: any) => void
+  bindchanging?: (event: any) => void
+  catchchanging?: (event: any) => void
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+const Slider = forwardRef<
+  HandlerRef<View, SliderProps>,
+  SliderProps
+>((props: SliderProps, ref: ForwardedRef<HandlerRef<View, SliderProps>>): JSX.Element => {
+  const {
+    min: rawMin = 0,
+    max: rawMax = 100,
+    step: rawStep = 1,
+    disabled = false,
+    value: rawValue,
+    color,
+    'selected-color': selectedColor,
+    activeColor = selectedColor || color || '#1aad19',
+    backgroundColor = color || '#e9e9e9',
+    'block-size': rawBlockSize = 28,
+    'block-color': blockColor = '#ffffff',
+    name,
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  // 确保数值类型正确
+  const min = typeof rawMin === 'string' ? parseFloat(rawMin) : rawMin
+  const max = typeof rawMax === 'string' ? parseFloat(rawMax) : rawMax
+  const step = typeof rawStep === 'string' ? parseFloat(rawStep) : rawStep
+  const value = rawValue !== undefined ? (typeof rawValue === 'string' ? parseFloat(rawValue) : rawValue) : undefined
+  const blockSize = typeof rawBlockSize === 'string' ? parseFloat(rawBlockSize) : rawBlockSize
+
+  // 如果没有提供 value，则使用 min 作为默认值
+  const defaultValue = value !== undefined ? value : min
+  const nodeRef = useRef(null)
+  const trackRef = useRef(null)
+  const [currentValue, setCurrentValue] = useState(defaultValue)
+  const [trackWidth, setTrackWidth] = useState(0)
+
+  const thumbPosition = useSharedValue(0)
+  const isDragging = useSharedValue(false)
+  const startDragPosition = useSharedValue(0) // 记录拖拽开始时的位置
+  const startDragValue = useSharedValue(0) // 记录拖拽开始时的值
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  const propsRef = useRef(props)
+  propsRef.current = props
+
+  const formContext = useContext(FormContext)
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    hasPositionFixed
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef
+  })
+
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
+  // 使用 useRunOnJSCallback 处理手势回调
+  const runOnJSCallbackRef = useRef({
+    triggerChangeEvent: (newValue: number) => {
+      setCurrentValue(newValue)
+      const currentProps = propsRef.current
+      const changeHandler = currentProps.bindchange || currentProps.catchchange
+      if (changeHandler) {
+        changeHandler(getCustomEvent('change', {}, { layoutRef, detail: { value: newValue } }, currentProps))
+      }
+    },
+    triggerChangingEvent: (newValue: number) => {
+      const currentProps = propsRef.current
+      const changingHandler = currentProps.bindchanging || currentProps.catchchanging
+      if (changingHandler) {
+        changingHandler(getCustomEvent('changing', {}, { layoutRef, detail: { value: newValue } }, currentProps))
+      }
+    }
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
+  // 限制步长，确保 step 大于 0，并且可被 (max - min) 整除
+  const validateStep = (step: number, min: number, max: number): number => {
+    if (step <= 0) return 1
+    if ((max - min) % step !== 0) {
+      warn(`Step ${step} is not a divisor of range ${max - min}`)
+    }
+    return step
+  }
+
+  const validStep = validateStep(step, min, max)
+
+  // 将值约束在 min-max 范围内，并按步长对齐
+  const constrainValue = (val: number, minVal: number = min, maxVal: number = max, stepVal: number = validStep): number => {
+    const constrained = Math.max(minVal, Math.min(maxVal, val))
+    const steps = Math.round((constrained - minVal) / stepVal)
+    return minVal + steps * stepVal
+  }
+
+  // 计算滑块位置
+  const getThumbPosition = (val: number, trackW: number = trackWidth, minVal: number = min, maxVal: number = max): number => {
+    if (trackW === 0) return 0
+    const percentage = (val - minVal) / (maxVal - minVal)
+    const position = percentage * trackW
+    return position
+  }
+
+  // 手势处理
+  const panGesture = useMemo(() => {
+    const getThumbPositionWorklet = (val: number, trackW: number, minVal: number, maxVal: number): number => {
+      'worklet'
+      if (trackW === 0) return 0
+      const percentage = (val - minVal) / (maxVal - minVal)
+      return percentage * trackW
+    }
+
+    const constrainValueWorklet = (val: number, minVal: number, maxVal: number, stepVal: number): number => {
+      'worklet'
+      const constrained = Math.max(minVal, Math.min(maxVal, val))
+      const steps = Math.round((constrained - minVal) / stepVal)
+      return minVal + steps * stepVal
+    }
+
+    return Gesture.Pan()
+      .enabled(!disabled) // 通过手势启用状态控制是否可拖拽
+      .onBegin(() => {
+        'worklet'
+        if (trackWidth === 0) return
+        isDragging.value = true
+        // 记录拖拽开始时的位置 - 使用当前的动画位置
+        startDragPosition.value = thumbPosition.value
+        // 根据当前位置反推值
+        const percentage = thumbPosition.value / trackWidth
+        const currentVal = min + percentage * (max - min)
+        startDragValue.value = constrainValueWorklet(currentVal, min, max, validStep)
+      })
+      .onUpdate((event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
+        if (trackWidth === 0) return
+
+        // 基于拖拽开始位置计算新位置
+        const newX = startDragPosition.value + event.translationX
+        const clampedX = Math.max(0, Math.min(trackWidth, newX))
+
+        // 计算新值
+        const percentage = clampedX / trackWidth
+        const rawValue = min + percentage * (max - min)
+        const newValue = constrainValueWorklet(rawValue, min, max, validStep)
+
+        // 更新滑块位置 - 使用约束后的值对应的位置
+        const constrainedPosition = getThumbPositionWorklet(newValue, trackWidth, min, max)
+        thumbPosition.value = constrainedPosition
+
+        // 只触发 changing 事件，不更新 currentValue（避免干扰拖拽）
+        runOnJS(runOnJSCallback)('triggerChangingEvent', newValue)
+      })
+      .onEnd((event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
+        isDragging.value = false
+
+        // 基于拖拽开始位置计算最终位置
+        const newX = startDragPosition.value + event.translationX
+        const clampedX = Math.max(0, Math.min(trackWidth, newX))
+        const percentage = clampedX / trackWidth
+        const rawValue = min + percentage * (max - min)
+        const finalValue = constrainValueWorklet(rawValue, min, max, validStep)
+
+        // 确保滑块位置与最终值匹配
+        const finalPosition = getThumbPositionWorklet(finalValue, trackWidth, min, max)
+        thumbPosition.value = finalPosition
+
+        // 更新 currentValue 并触发 change 事件
+        runOnJS(runOnJSCallback)('triggerChangeEvent', finalValue)
+      })
+  }, [disabled, trackWidth, min, max, validStep, runOnJSCallback])
+
+  // 当 value 属性变化时更新位置
+  useEffect(() => {
+    const newValue = constrainValue(defaultValue)
+    setCurrentValue(newValue)
+    // 同时更新动画位置
+    thumbPosition.value = getThumbPosition(newValue)
+  }, [defaultValue, min, max, validStep])
+
+  // 当 trackWidth 变化时更新滑块位置
+  useEffect(() => {
+    // 只在非拖拽状态下更新位置
+    if (!isDragging.value) {
+      thumbPosition.value = getThumbPosition(currentValue)
+    }
+  }, [trackWidth, currentValue])
+
+  // 动画样式
+  const animatedThumbStyle = useAnimatedStyle(() => {
+    const blockSizeNum = Math.max(12, Math.min(28, blockSize))
+    const trackHeight = 4
+    return {
+      position: 'absolute',
+      top: -((blockSizeNum - trackHeight) / 2),
+      left: Math.max(0, Math.min(trackWidth - blockSizeNum, thumbPosition.value - (blockSizeNum / 2))),
+      width: blockSizeNum,
+      height: blockSizeNum,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+
+  // 轨道布局回调
+  const onTrackLayout = (event: any) => {
+    const { width } = event.nativeEvent.layout
+    setTrackWidth(width)
+  }
+
+  // 表单相关处理
+  const resetValue = () => {
+    const currentProps = propsRef.current
+    const currentValue = currentProps.value !== undefined ? currentProps.value : currentProps.min || 0
+    const parsedValue = typeof currentValue === 'string' ? parseFloat(currentValue) : currentValue
+    const currentMin = typeof currentProps.min === 'string' ? parseFloat(currentProps.min) : (currentProps.min || 0)
+    const currentMax = typeof currentProps.max === 'string' ? parseFloat(currentProps.max) : (currentProps.max || 100)
+    const currentStep = typeof currentProps.step === 'string' ? parseFloat(currentProps.step) : (currentProps.step || 1)
+    const resetVal = parsedValue !== undefined ? parsedValue : currentMin
+    const validatedStep = validateStep(currentStep, currentMin, currentMax)
+    const constrainedVal = constrainValue(resetVal, currentMin, currentMax, validatedStep)
+    setCurrentValue(constrainedVal)
+    thumbPosition.value = getThumbPosition(constrainedVal, trackWidth, currentMin, currentMax)
+  }
+
+  const getValue = () => {
+    return currentValue
+  }
+
+  if (formValuesMap) {
+    if (!name) {
+      warn('If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(name, { getValue, resetValue })
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (formValuesMap && name) {
+        formValuesMap.delete(name)
+      }
+    }
+  }, [])
+
+  // 样式定义
+  const blockSizeNum = Math.max(12, Math.min(28, blockSize))
+  const trackHeight = 4
+
+  const containerStyle: ViewStyle = extendObject({} as ViewStyle, {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    minHeight: Math.max(blockSizeNum + 8, 40),
+    paddingHorizontal: 14 // 固定内边距，不受 block-size 影响
+  }, normalStyle, layoutStyle)
+
+  const trackStyle: ViewStyle = {
+    flex: 1,
+    height: trackHeight,
+    backgroundColor,
+    borderRadius: trackHeight / 2,
+    position: 'relative'
+  }
+
+  // 动画进度条样式
+  const animatedProgressStyle = useAnimatedStyle(() => {
+    return {
+      height: '100%',
+      backgroundColor: activeColor,
+      borderRadius: trackHeight / 2,
+      width: Math.max(0, thumbPosition.value)
+    }
+  })
+
+  const thumbStyle: ViewStyle = {
+    width: blockSizeNum,
+    height: blockSizeNum,
+    backgroundColor: blockColor,
+    borderRadius: blockSizeNum / 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4
+  }
+
+  const innerProps = useInnerProps(
+    extendObject({}, props, layoutProps, {
+      ref: nodeRef
+    }),
+    [
+      'min',
+      'max',
+      'step',
+      'disabled',
+      'value',
+      'color',
+      'selected-color',
+      'activeColor',
+      'backgroundColor',
+      'block-size',
+      'block-color',
+      'bindchange',
+      'catchchange',
+      'bindchanging',
+      'catchchanging'
+    ],
+    { layoutRef }
+  )
+
+  const sliderContent = createElement(
+    View,
+    extendObject({}, innerProps, { style: containerStyle }),
+    // 轨道容器
+    createElement(
+      View,
+      {
+        style: trackStyle,
+        onLayout: onTrackLayout,
+        ref: trackRef
+      },
+      // 进度条 - 使用动画样式
+      createElement(Animated.View, {
+        style: animatedProgressStyle
+      }),
+      // 滑块容器
+      createElement(
+        GestureDetector,
+        {
+          gesture: panGesture
+        },
+        createElement(
+          Animated.View,
+          {
+            style: [animatedThumbStyle]
+          },
+          // 滑块
+          createElement(View, {
+            style: thumbStyle
+          })
+        )
+      )
+    )
+  )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, sliderContent)
+  }
+
+  return sliderContent
+})
+
+Slider.displayName = 'MpxSlider'
+export default Slider

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -207,8 +207,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
   const touchfinish = useSharedValue(true)
-  // 记录onUpdate时的方向，用于进行onFinalize中的值修正
-  const preUpdateTransDir = useSharedValue(0)
   // 记录上一帧的绝对定位坐标
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
@@ -431,9 +429,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }, [])
 
-  function handleSwiperChange (current: number) {
-    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-    bindchange && bindchange(eventData)
+  function handleSwiperChange (current: number, pCurrent: number) {
+    if (pCurrent !== currentIndex.value) {
+      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+      bindchange && bindchange(eventData)
+    }
   }
 
   const runOnJSCallbackRef = useRef({
@@ -482,7 +482,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && preIndex !== null && preIndex !== undefined && bindchange) {
+    if (newIndex !== preIndex && bindchange) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
@@ -517,9 +517,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    // 1. 如果用户在touch的过程中, 外部更新了current以内部为准（小程序表现）
+    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
     // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-    if (propCurrent !== currentIndex.value && touchfinish.value) {
+    if (propCurrent !== currentIndex.value) {
       updateCurrent(propCurrent, step.value)
     }
   }, [propCurrent])
@@ -757,7 +757,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           translation: moveDistance,
           transdir: moveDistance
         }
-        preUpdateTransDir.value = moveDistance
         // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
         const { half } = computeHalf(eventData)
         if (childrenLength.value > 1 && half) {
@@ -795,17 +794,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         'worklet'
         if (touchfinish.value) return
         touchfinish.value = true
-        /**
-         * 安卓修正
-         * 问题：部分安卓机型onFinalize中拿到的absoluteX 有问题
-         * 案例：比如手指从右向左滑的时候，onUpdate拿到的是241.64346313476562， 而onFinalize中拿到的是241.81817626953125，理论上onFinalize中应该比onUpdate小才对吧
-         * 解决方式：修正
-        */
         // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
         const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance,
-          transdir: Math.abs(moveDistance) > 1 ? moveDistance : preUpdateTransDir.value
+          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
         }
         // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
         if (childrenLength.value === 1) {

package/lib/runtime/components/react/mpx-view.tsx

@@ -287,16 +287,13 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear') {
-        const dimensionWidth = calcPercent(width as NumberVal, layoutWidth) || 0
-        const dimensionHeight = calcPercent(height as NumberVal, layoutHeight) || 0
-        // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
-        if (dimensionWidth && dimensionHeight) {
-          dimensions = {
-            width: dimensionWidth,
-            height: dimensionHeight
-          } as { width: NumberVal, height: NumberVal }
-        }
+      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+        // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
+        // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
+        dimensions = {
+          width: 0,
+          height: 0
+        } as { width: NumberVal, height: NumberVal }
       } else {
         dimensions = {
           width: isPercent(width) ? width : +width,

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -76,6 +76,7 @@ const styles = StyleSheet.create({
     borderRadius: 10
   }
 })
+
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
   const { src, bindmessage, bindload, binderror } = props
   const mpx = global.__mpx
@@ -126,10 +127,27 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     style: defaultWebViewStyle
   })
 
+  const hostValidate = (url: string) => {
+    const host = url && new URL(url).host
+    const hostWhitelists = mpx.config.rnConfig?.webviewConfig?.hostWhitelists || []
+    if (hostWhitelists.length) {
+      return hostWhitelists.some((item: string) => {
+        return host.endsWith(item)
+      })
+    } else {
+      return true
+    }
+  }
+
   if (!src) {
     return null
   }
 
+  if (!hostValidate(src)) {
+    console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
+    return null
+  }
+
   const _reload = function () {
     if (__mpx_mode__ !== 'ios') {
       fristLoaded.current = false // 安卓需要重新设置
@@ -182,6 +200,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
   }
   const _message = function (res: WebViewMessageEvent) {
+    if (!hostValidate(res.nativeEvent?.url)) {
+      return
+    }
     let data: MessageData = {}
     let asyncCallback
     const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
@@ -232,7 +253,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         break
       default:
         if (type) {
-          const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+          const implement = mpx.config.rnConfig.webviewConfig && mpx.config.rnConfig.webviewConfig.apiImplementations && mpx.config.rnConfig.webviewConfig.apiImplementations[type]
           if (isFunction(implement)) {
             asyncCallback = Promise.resolve(implement(...params))
           } else {

package/lib/runtime/components/react/types/getInnerListeners.d.ts

@@ -84,12 +84,16 @@ interface ExtendedNativeTouchEvent extends NativeTouchEvent {
   _stoppedEventTypes?: Set<string>
 }
 
+interface GlobalEventState {
+  needPress: boolean
+  identifier: null | number
+}
+
 export {
   NativeTouchEvent,
   Props,
   AdditionalProps,
   RemoveProps,
-  UseInnerPropsConfig,
   InnerRef,
   LayoutRef,
   PropsRef,
@@ -98,5 +102,6 @@ export {
   ExtendedNativeTouchEvent,
   EventConfig,
   RawConfig,
-  EventType
+  EventType,
+  GlobalEventState
 }

package/lib/runtime/components/web/mpx-input.vue

@@ -56,6 +56,20 @@
           if (val !== -1) this.setSelectionRange(undefined, val)
         },
         immediate: true
+      },
+      focus: {
+        handler (val) {
+          if (val) {
+            this.$nextTick(() => {
+              this.$refs.input.focus()
+            })
+          } else {
+            this.$nextTick(() => {
+              this.$refs.input.blur()
+            })
+          }
+        },
+        immediate: true
       }
     },
     render (createElement) {