前端开发场景集 — 5个真实工作场景

// watch：设备类型变化时，清除已填的专属字段 watch(() => formData.deviceType, (newVal, oldVal) => { if (newVal !== oldVal && oldVal) { // 清空上一个类型的专属字段 formData.tempRange = '' formData.installLocation = '' formData.pressureLevel = '' formRef.value?.clearValidate() } }) // computed：动态校验规则 const dynamicRules = computed(() => { const base = { deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }], reporter: [{ required: true, message: '请选择报修人', trigger: 'change' }], phone: [ { required: true, message: '请输入联系方式', trigger: 'blur' }, { validator: phoneValidator, trigger: 'blur' } ← 自定义校验器 ], description: [{ required: true, message: '请描述故障', trigger: 'blur' }] } // 高紧急时追加必填 if (formData.urgency === 'high') { base.impactScope = [{ required: true, message: '请填写影响范围', trigger: 'blur' }] base.measuresTaken = [{ required: true, message: '请填写已采取措施', trigger: 'blur' }] } return base }) // 自定义手机号校验器 const phoneValidator = (rule, value, callback) => { const phoneReg = /^1[3-9]\d{9}$/ if (!phoneReg.test(value)) { callback(new Error('请输入正确的手机号')) } else { callback() } }

// 提交逻辑 const handleSubmit = async () => { const valid = await formRef.value?.validate() if (!valid) return // 二次确认 try { await ElMessageBox.confirm( '确认提交报修工单？提交后无法修改。', '确认提交', { confirmButtonText: '确认提交', cancelButtonText: '取消', type: 'warning' } ) // 用户点确认后，真正提交 await repairApi.create(formData) ElMessage.success('工单提交成功') router.push('/repair/list') } catch { // 用户取消，什么都不做 } }

<el-button v-permission="'device:add'">新增</el-button> <el-button v-permission="'device:edit'">编辑</el-button> <el-button v-permission="'device:delete'" type="danger">删除</el-button> <el-button v-permission="'device:export'">导出</el-button>

const containerHeight = 600 // 容器可见高度 const itemHeight = 40 // 每项高度 const visibleCount = Math.ceil(containerHeight / itemHeight) + 2 // 多渲染2个缓冲 // 滚动时计算可视范围 const onScroll = () => { const scrollTop = container.value.scrollTop startIndex = Math.floor(scrollTop / itemHeight) endIndex = startIndex + visibleCount offsetY = startIndex * itemHeight // 内容偏移 visibleItems = allItems.slice(startIndex, endIndex) }

// stores/tagsView.js export const useTagsViewStore = defineStore('tagsView', () => { const cachedViews = ref([]) // 缓存的组件名列表 const visitedViews = ref([]) // 标签页列表 // 添加缓存（打开标签页时调用） function addCachedView(view) { if (cachedViews.value.includes(view.name)) return if view.meta?.noCache) return // 不需要缓存的页面跳过 cachedViews.value.push(view.name) } // 删除缓存（关闭标签页时调用） function delCachedView(view) { const idx = cachedViews.value.indexOf(view.name) if (idx > -1) cachedViews.value.splice(idx, 1) } return { cachedViews, visitedViews, addCachedView, delCachedView } })

// 缓存组件的生命周期 onMounted(() => { // 只在首次挂载时执行 fetchDetail() }) onActivated(() => { // 每次从缓存激活时执行 refreshIfNeeded() // 比如详情页需要刷新 }) onDeactivated(() => { // 每次离开（但不是销毁）时执行 // 适合暂停定时器等 })