verce-vue-test 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "type": "module",
   "scripts": {

package/src/App.vue

@@ -33,6 +33,9 @@ import { RouterView } from 'vue-router'
         <el-menu-item index="/employee">
           <span>员工管理</span>
         </el-menu-item>
+        <el-menu-item index="/thousandth">
+          <span>千分位输入</span>
+        </el-menu-item>
         <el-menu-item index="/about">
           <span>关于</span>
         </el-menu-item>

package/src/components/ElInputThousandth.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+
+defineOptions({ name: 'ElInputThousandth' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | string | undefined]
+}>()
+
+const isFocused = ref(false)
+const displayValue = ref('')
+const inputRef = ref<InstanceType<typeof import('element-plus')['ElInput']>>()
+
+function formatThousandth(val: string | number | undefined): string {
+  if (val === undefined || val === null || val === '') return ''
+  const str = String(val)
+  const num = Number(str)
+  if (isNaN(num)) return ''
+  const parts = str.split('.')
+  const intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  if (parts.length > 1) {
+    return intPart + '.' + parts[1]
+  }
+  return intPart
+}
+
+function stripNonNumeric(val: string): string {
+  let result = val.replace(/[^\d.]/g, '')
+  const dotIndex = result.indexOf('.')
+  if (dotIndex !== -1) {
+    result = result.slice(0, dotIndex + 1) + result.slice(dotIndex + 1).replace(/\./g, '')
+  }
+  if (dotIndex !== -1) {
+    const parts = result.split('.')
+    if (parts[1].length > 2) {
+      result = parts[0] + '.' + parts[1].slice(0, 2)
+    }
+  }
+  return result
+}
+
+function handleInput(val: string) {
+  const cleaned = stripNonNumeric(val)
+  displayValue.value = cleaned
+  if (cleaned === '' || cleaned === '.') {
+    emit('update:modelValue', undefined)
+  } else {
+    emit('update:modelValue', Number(cleaned))
+  }
+}
+
+function handleFocus() {
+  isFocused.value = true
+  const raw = props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== ''
+    ? String(props.modelValue)
+    : ''
+  displayValue.value = raw
+}
+
+function handleBlur() {
+  isFocused.value = false
+  if (props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== '') {
+    displayValue.value = formatThousandth(props.modelValue)
+  } else {
+    displayValue.value = ''
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!isFocused.value) {
+      displayValue.value = formatThousandth(val)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <el-input
+    ref="inputRef"
+    :model-value="displayValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @input="handleInput"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>

package/src/router/index.ts

@@ -44,6 +44,11 @@ const router = createRouter({
       name: 'employee',
       component: () => import('../views/EmployeeView.vue'),
     },
+    {
+      path: '/thousandth',
+      name: 'thousandth',
+      component: () => import('../views/ThousandthView.vue'),
+    },
   ],
 })
 

package/src/views/ThousandthView.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <span>千分位输入演示</span>
+    </template>
+
+    <el-form :model="form" label-width="120px" style="max-width: 600px">
+      <el-form-item label="金额">
+        <ElInputThousandth v-model="form.amount" placeholder="请输入金额" />
+      </el-form-item>
+
+      <el-form-item label="价格">
+        <ElInputThousandth v-model="form.price" placeholder="请输入价格" />
+      </el-form-item>
+
+      <el-form-item label="数量">
+        <el-input-number v-model="form.quantity" :min="1" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-divider />
+
+    <el-descriptions title="表单数据" :column="1" border>
+      <el-descriptions-item label="金额">{{ form.amount }}</el-descriptions-item>
+      <el-descriptions-item label="价格">{{ form.price }}</el-descriptions-item>
+      <el-descriptions-item label="数量">{{ form.quantity }}</el-descriptions-item>
+    </el-descriptions>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import ElInputThousandth from '@/components/ElInputThousandth.vue'
+
+const form = reactive({
+  amount: undefined as number | undefined,
+  price: undefined as number | undefined,
+  quantity: 1,
+})
+
+const handleSubmit = () => {
+  ElMessage.success('提交成功！')
+  console.log('form data:', { ...form })
+}
+
+const handleReset = () => {
+  form.amount = undefined
+  form.price = undefined
+  form.quantity = 1
+}
+</script>