vue2server7 2.3.10 → 2.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "2.3.10",
+  "version": "2.3.11",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/8.text

@@ -0,0 +1,14 @@
+<el-input
+  v-model="value"
+  @input="value = format(value)"
+/>
+
+<script setup>
+const format = (v) => {
+  v = v.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.')
+  if (v.startsWith('.')) v = '0' + v
+  const arr = v.split('.')
+  if (arr.length > 2) v = arr[0] + '.' + arr.slice(1).join('')
+  return v
+}
+</script>

package/test/66.text

@@ -1,181 +0,0 @@
-下面给你一个Vue3 + Element Plus里“父组件是表格，点行/按钮弹出修改 Dialog”的标准封装方式：把 Dialog 做成独立组件，通过 v-model 控制显示，父组件把“当前行数据”传进去；Dialog 内部用本地表单副本编辑，点击保存再把结果 emit 回父组件。
-
-⸻
-
-1）子组件：EditDialog.vue（封装 Dialog）
-
-关键点：
-	•	用 modelValue + update:modelValue 做 v-model（显示/隐藏）
-	•	接收 row（要编辑的数据）
-	•	watch row：每次打开时深拷贝到本地 form
-	•	保存时 emit('submit', form) 给父组件
-
-<template>
-  <el-dialog
-    :model-value="visible"
-    title="修改"
-    width="520px"
-    @close="handleClose"
-  >
-    <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
-      <el-form-item label="姓名" prop="name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-
-      <el-form-item label="年龄" prop="age">
-        <el-input-number v-model="form.age" :min="0" />
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <el-button @click="emitVisible(false)">取消</el-button>
-      <el-button type="primary" :loading="saving" @click="handleSubmit">保存</el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang="ts">
-import { computed, reactive, ref, watch } from "vue"
-import type { FormInstance, FormRules } from "element-plus"
-
-type Row = { id: number; name: string; age: number }
-
-const props = defineProps<{
-  modelValue: boolean
-  row?: Row | null
-}>()
-
-const emit = defineEmits<{
-  (e: "update:modelValue", v: boolean): void
-  (e: "submit", v: Row): void
-  (e: "closed"): void
-}>()
-
-const visible = computed(() => props.modelValue)
-
-const formRef = ref<FormInstance>()
-const saving = ref(false)
-
-// 本地表单副本（避免直接改父组件传入的 row）
-const form = reactive<Row>({
-  id: 0,
-  name: "",
-  age: 0,
-})
-
-const rules: FormRules = {
-  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-  age: [{ required: true, message: "请输入年龄", trigger: "change" }],
-}
-
-// 每次 row 改变（尤其是点击不同表格行），刷新本地 form
-watch(
-  () => props.row,
-  (val) => {
-    if (!val) return
-    // 简单深拷贝（行数据如果有更深层结构可换 lodash.clonedeep）
-    Object.assign(form, JSON.parse(JSON.stringify(val)))
-    // 打开时清理校验提示
-    formRef.value?.clearValidate?.()
-  },
-  { immediate: true, deep: true }
-)
-
-function emitVisible(v: boolean) {
-  emit("update:modelValue", v)
-}
-
-function handleClose() {
-  emit("closed")
-}
-
-async function handleSubmit() {
-  if (!formRef.value) return
-  await formRef.value.validate()
-
-  try {
-    saving.value = true
-    // 交给父组件去调接口/更新表格
-    emit("submit", { ...form })
-    emitVisible(false)
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-
-⸻
-
-2）父组件：TablePage.vue（表格 + 弹窗）
-
-关键点：
-	•	父组件维护：dialogVisible、currentRow
-	•	点击行/按钮：设置 currentRow，再 dialogVisible = true
-	•	接收子组件 submit：调用接口更新后刷新表格
-
-<template>
-  <el-table :data="tableData" style="width: 100%">
-    <el-table-column prop="name" label="姓名" />
-    <el-table-column prop="age" label="年龄" />
-    <el-table-column label="操作" width="120">
-      <template #default="{ row }">
-        <el-button link type="primary" @click="openEdit(row)">修改</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
-
-  <EditDialog
-    v-model="dialogVisible"
-    :row="currentRow"
-    @submit="handleUpdate"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue"
-import EditDialog from "./EditDialog.vue"
-
-type Row = { id: number; name: string; age: number }
-
-const tableData = ref<Row[]>([
-  { id: 1, name: "Alice", age: 18 },
-  { id: 2, name: "Bob", age: 22 },
-])
-
-const dialogVisible = ref(false)
-const currentRow = ref<Row | null>(null)
-
-function openEdit(row: Row) {
-  // 这里建议也做一次拷贝，避免 currentRow 与表格 data 同引用
-  currentRow.value = JSON.parse(JSON.stringify(row))
-  dialogVisible.value = true
-}
-
-async function handleUpdate(payload: Row) {
-  // 1) 调接口更新
-  // await api.updateUser(payload)
-
-  // 2) 本地示例：更新 tableData
-  const idx = tableData.value.findIndex((x) => x.id === payload.id)
-  if (idx !== -1) tableData.value[idx] = payload
-
-  // 3) 或者你也可以直接 reloadList()
-}
-</script>
-
-
-⸻
-
-3）常见坑（你可能会遇到）
-	1.	不要直接在 Dialog 里改 props.row
-	•	Vue 会警告，而且你会把表格行数据“实时改掉”，点取消也回不去
-✅ 用本地 form 副本（上面就是这么做的）
-	2.	点击不同的行要能刷新弹窗内容
-	•	需要 watch(props.row)，每次赋值给 form
-	3.	关闭弹窗时表单校验提示残留
-	•	打开时 clearValidate() 或关闭时 resetFields()（看你的需求）
-
-⸻
-
-如果你把“表单字段”和“行数据结构（row）”贴出来（比如有嵌套对象、字典下拉、日期范围之类），我可以把这个封装升级成更完整的版本：支持 open(row)、支持新增/编辑同一个 Dialog、支持异步加载详情、支持表单重置与防抖提交。