@zfqh/uview-x 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.4](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.3...@zfqh/uview-x@0.0.4) (2026-11-10)
+
+**Note:** Version bump only for package @zfqh/uview-x
+
+
+
+
+
+## [0.0.3](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.2...@zfqh/uview-x@0.0.3) (2026-11-10)
+
+
+### Bug Fixes
+
+* 文本框输入过快光标乱跳 ([fdf27f9](http://10.10.10.16/caoben/front-end-tools/commits/fdf27f9c37cde6941af3e8dd2db0c708816d3a2f))
+
+
+
+
+
 ## [0.0.2](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.1...@zfqh/uview-x@0.0.2) (2026-11-09)
 
 **Note:** Version bump only for package @zfqh/uview-x

package/README.md

@@ -37,6 +37,28 @@ export function createApp() {
 }
 ```
 
+以上 easycom 配置适用于 dev 阶段（H5 / 小程序 / 经典 uni-app）；uni-app x Vapor 的 build 阶段不支持 easycom，见下方显式 import。
+
+### 显式 import（推荐；Vapor build 必需）
+
+uni-app x Vapor（蒸汽模式）下，easycom 仅在 dev 阶段可用，build 阶段不支持；用户也可能主动关闭 easycom。为此 `components/uv-*` 内部已经全部改为显式 import，页面只需 import 自己用到的组件：
+
+```vue
+<script setup lang="ts">
+import UvButton from '@zfqh/uview-x/components/uv-button/uv-button.vue';
+import UvIcon from '@zfqh/uview-x/components/uv-icon/uv-icon.vue';
+</script>
+
+<template>
+  <uv-button type="primary" text="提交" @click="onSubmit" />
+  <uv-icon name="search" :size="24" />
+</template>
+```
+
+- 组件入口为 `@zfqh/uview-x/components/uv-<name>/uv-<name>.vue`，与 easycom 路径一致。
+- `examples/uview-vapor`、`examples/uniapp-vapor` 已关闭 easycom（`"easycom": { "autoscan": false }`），用于验证显式 import 在 dev / build 下都可用。
+- `app.use(uviewX)` 只安装 `$uv` 插件能力，不注册组件。
+
 `uni.scss` 引入主题变量，`App.uvue` 引入全局工具样式：
 
 ```scss

package/components/uv-button/uv-button.vue

@@ -114,6 +114,8 @@
 	import { computed } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvIcon from '../uv-icon/uv-icon.vue'
+	import UvLoadingIcon from '../uv-loading-icon/uv-loading-icon.vue'
 	import { useThrottle } from '../../hooks'
 	import { createBem } from '../../utils/compat'
 

package/components/uv-checkbox/uv-checkbox.vue

@@ -42,6 +42,7 @@
 	import { computed, inject, nextTick, onUnmounted, ref, watch } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvIcon from '../uv-icon/uv-icon.vue'
 	import { preventEvent } from '../../utils/compat'
 
 

package/components/uv-dialog/uv-dialog.vue

@@ -96,6 +96,8 @@
 	import { computed, nextTick, onMounted, ref, watch } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvPopup from '../uv-popup/uv-popup.vue'
+	import UvButton from '../uv-button/uv-button.vue'
 	import { useI18n } from '../../hooks'
 
 	defineOptions({

package/components/uv-form-item/uv-form-item.vue

@@ -71,6 +71,9 @@
 	import { computed, inject, onUnmounted, provide, reactive, ref, watch } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvIcon from '../uv-icon/uv-icon.vue'
+	import UvTransition from '../uv-transition/uv-transition.vue'
+	import UvLine from '../uv-line/uv-line.vue'
 
 
 	defineOptions({

package/components/uv-input/uv-input.vue

@@ -70,6 +70,7 @@
 	import { computed, inject, nextTick, ref, watch } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvIcon from '../uv-icon/uv-icon.vue'
 
 
 	defineOptions({
@@ -139,9 +140,16 @@
 		'keyboardheightchange'
 	])
 
-	// 输入框的值
-	const innerValue = ref<any>(p.modelValue !== '' ? p.modelValue : p.value)
+	const toValueString = (value: any): string => (value === null || value === undefined ? '' : String(value))
+
+	const initialValue = toValueString(p.modelValue !== '' ? p.modelValue : p.value)
+	// 绑定到 input 的 value：只表示初始值/外部赋值/formatter 结果，输入过程中不回写，避免光标跳动
+	const innerValue = ref<string>(initialValue)
 	const inputRef = ref<any>(null)
+	// 输入框当前显示值：非响应式，仅用于回写判断与事件 payload，避免每次输入触发组件渲染
+	let currentValue = initialValue
+	// 是否有内容：仅用于清除控件显隐，空/非空切换时才触发渲染
+	const hasValue = ref<boolean>(initialValue !== '')
 	// 是否处于获得焦点状态
 	const focused = ref(false)
 	// 过滤处理方法
@@ -150,19 +158,50 @@
 	// 表单域上下文：用于触发表单校验（provide/inject 替代 $parent 链）
 	const formItemContext: any = inject('uv-form-item-context', null)
 
-	watch(
-		() => p.modelValue,
-		(newVal: any) => {
-			innerValue.value = newVal
-		}
-	)
+	const updateHasValue = (value: string) => {
+		const next = value !== ''
+		if (hasValue.value !== next) hasValue.value = next
+	}
 
-	watch(
-		() => p.value,
-		(newVal: any) => {
-			innerValue.value = newVal
+	// 让 input 的 value 属性真正变化：绑定值已是目标值时，用当前显示值制造一次变化
+	const setBoundValue = (value: string) => {
+		if (innerValue.value !== value) {
+			innerValue.value = value
+			return
+		}
+		if (currentValue !== value) {
+			const display = currentValue
+			innerValue.value = display
+			nextTick(() => {
+				if (innerValue.value !== value) innerValue.value = value
+			})
 		}
-	)
+	}
+
+	// 写入输入框并同步内部当前值（外部赋值、formatter 生效、清空时使用）
+	const applyValue = (value: string) => {
+		setBoundValue(value)
+		currentValue = value
+		updateHasValue(value)
+	}
+
+	// 在下一 tick 统一向上抛出事件，保持 uv-ui 事件顺序
+	const emitValue = (value: string) => {
+		nextTick(() => {
+			emit('input', value)
+			emit('update:modelValue', value)
+			emit('change', value)
+			// 尝试调用uv-form的验证方法
+			if (formItemContext) formItemContext.validate('change')
+		})
+	}
+
+	watch([() => p.modelValue, () => p.value], () => {
+		const next = toValueString(p.modelValue !== '' ? p.modelValue : p.value)
+		// 忽略 v-model 回传的当前输入值，避免受控回写覆盖原生输入
+		if (next === currentValue) return
+		applyValue(next)
+	})
 
 	// x 的 input type 无 password 枚举值，密码由 password 属性控制
 	const inputType = computed(() => (p.type === 'password' ? 'text' : p.type))
@@ -202,7 +241,7 @@
 
 	// 是否显示清除控件
 	const isShowClear = computed(() => {
-		return !!p.clearable && !p.readonly && focused.value && innerValue.value !== ''
+		return !!p.clearable && !p.readonly && focused.value && hasValue.value
 	})
 
 	// 组件的类名
@@ -261,22 +300,27 @@
 
 	// 当键盘输入时，触发input事件
 	const onInput = (e: any) => {
-		const value = (e && e.detail ? e.detail.value : '') || ''
+		const rawValue = toValueString(e && e.detail ? e.detail.value : '')
 		// 格式化过滤方法
 		const formatter = p.formatter || innerFormatter.value
-		const formatValue = typeof formatter === 'function' ? formatter(value) : value
-		// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在nextTick中重新赋予设置后的值才有效
-		innerValue.value = value
-		nextTick(() => {
-			innerValue.value = formatValue
-			valueChange()
-		})
+		const formatValue = typeof formatter === 'function' ? toValueString(formatter(rawValue)) : rawValue
+		// 仅当 formatter 真正改变内容时才回写 value，恒等时保持原生输入不受打断
+		if (formatValue !== rawValue) {
+			currentValue = rawValue
+			applyValue(formatValue)
+		} else {
+			currentValue = formatValue
+			updateHasValue(formatValue)
+		}
+		emitValue(formatValue)
 	}
 
 	// 输入框失去焦点时触发
 	const onBlur = (event: any) => {
-		const value = event && event.detail ? event.detail.value : ''
-		emit('blur', value)
+		const detailValue = event && event.detail && event.detail.value !== undefined ? event.detail.value : currentValue
+		currentValue = toValueString(detailValue)
+		updateHasValue(currentValue)
+		emit('blur', currentValue)
 		// H5端的blur会先于点击清除控件的点击click事件触发，导致focused
 		// 瞬间为false，从而隐藏了清除控件而无法被点击到
 		$uv.sleep(100).then(() => {
@@ -287,14 +331,20 @@
 	}
 
 	// 输入框聚焦时触发
-	const onFocus = () => {
+	const onFocus = (event: any) => {
 		focused.value = true
+		const detailValue = event && event.detail && event.detail.value !== undefined ? event.detail.value : currentValue
+		currentValue = toValueString(detailValue)
+		updateHasValue(currentValue)
 		emit('focus')
 	}
 
 	// 点击完成按钮时触发
-	const onConfirm = () => {
-		emit('confirm', innerValue.value)
+	const onConfirm = (event: any) => {
+		const detailValue = event && event.detail && event.detail.value !== undefined ? event.detail.value : currentValue
+		currentValue = toValueString(detailValue)
+		updateHasValue(currentValue)
+		emit('confirm', currentValue)
 	}
 
 	// 键盘高度发生变化的时候触发此事件
@@ -302,22 +352,10 @@
 		emit('keyboardheightchange', e)
 	}
 
-	// 内容发生变化，进行处理
-	const valueChange = () => {
-		const value = innerValue.value
-		nextTick(() => {
-			emit('input', value)
-			emit('update:modelValue', value)
-			emit('change', value)
-			// 尝试调用uv-form的验证方法
-			if (formItemContext) formItemContext.validate('change')
-		})
-	}
-
 	// 点击清除控件
 	const onClear = () => {
-		innerValue.value = ''
-		valueChange()
+		applyValue('')
+		emitValue('')
 		nextTick(() => {
 			emit('clear')
 		})

package/components/uv-overlay/uv-overlay.vue

@@ -16,6 +16,7 @@
 	import { computed, onUnmounted, watch } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvTransition from '../uv-transition/uv-transition.vue'
 	import { preventEvent } from '../../utils/compat'
 
 	defineOptions({

package/components/uv-popup/uv-popup.vue

@@ -59,6 +59,11 @@
 	import { computed, onMounted, onUnmounted, ref } from 'vue'
 	import { $uv, platform } from '../../utils'
 	import props from './props'
+	import UvIcon from '../uv-icon/uv-icon.vue'
+	import UvOverlay from '../uv-overlay/uv-overlay.vue'
+	import UvTransition from '../uv-transition/uv-transition.vue'
+	import UvSafeBottom from '../uv-safe-bottom/uv-safe-bottom.vue'
+	import UvStatusBar from '../uv-status-bar/uv-status-bar.vue'
 	import { preventEvent } from '../../utils/compat'
 
 	defineOptions({

package/components/uv-tabs/uv-tabs.vue

@@ -80,6 +80,7 @@
 	import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
 	import { $uv } from '../../utils'
 	import props from './props'
+	import UvBadge from '../uv-badge/uv-badge.vue'
 	import { getRect, getRectNvue } from '../../utils/compat'
 
 	defineOptions({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zfqh/uview-x",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "uview-x：面向 uni-app x 蒸汽模式（Vapor）、经典 uni-app Vue3 与 nvue 的 UV UI 组件库，组件保持 uv-ui API。",
   "main": "index.ts",
   "types": "types/index.d.ts",
@@ -40,5 +40,5 @@
     "README.md",
     "CHANGELOG.md"
   ],
-  "gitHead": "abcec16d4c73e83cec02770a553cd89091e35cf3"
+  "gitHead": "2394e0c70de5af7326243f154b4eb92c65baa7f5"
 }