企业官网建设流程全解析

旅游网站设计与建设论文,金融企业网站制作,网站建设对旅游意义,wordpress小工具界面前言我们在使用 uniapp 开发完移动端项目之后#xff0c;需要对程序的性能进行优化#xff1a;比如防止按钮或者 view 重复点击等。下面是我给出的3种解决方案#xff1a;方案一#xff1a;状态锁核心#xff1a;通过设置变量 true/false 来控制按钮或者 view 的状态。这种…前言我们在使用 uniapp 开发完移动端项目之后需要对程序的性能进行优化比如防止按钮或者 view 重复点击等。下面是我给出的3种解决方案方案一状态锁核心通过设置变量 true/false 来控制按钮或者 view 的状态。这种方式应该最常见。template view !-- 作者知否技术 -- !--1. 视图 -- view :class{ disabled: isLoading } clickhandleSubmit 提交 /view !--2. 按钮 disabled -- uv-button :disabledisLoading clickhandleSubmit 提交 /uv-button !--3. 按钮 loading -- uv-button :loadingisLoading clickhandleSubmit提交/uv-button /view /template script setup import {ref} from vue import orderApi from /api/order/order.js; const isLoading ref(false) // 提交方法 const handleSubmit async () { // 防止重复点击 if (isLoading.value) return // 锁住 isLoading.value true try { const res await orderApi.handleSubmit(order); if (res.code 200) { getReturnFundList(); uni.showToast({ title: 提交成功 }); } else { uni.showToast({ title: 提交失败 }); } } catch (error) { console.error(提交失败:, error); } finally { // 解锁 isLoading.value false; } } /script方案二全局自定义防重复点击指令在项目根目录中新建 /directives/preventClick.js :1. preventClick.js// 防止重复点击指令 exportconst preventClick { // 指令绑定到元素时执行 mounted(el, binding) { // 1. 设置防抖间隔时间默认1000毫秒 const delay binding.value || 1000; // 2. 创建一个标记记录当前是否可点击 el.isDisabledClick false; // 3. 保存原始的点击事件处理函数 const originalClickHandler el.__originalClickHandler; // 4. 创建新的点击事件处理函数 el.__preventClickHandler (event) { // 如果当前不可点击直接拦截点击事件 if (el.isDisabledClick) { event.preventDefault(); // 阻止默认行为 event.stopPropagation(); // 阻止事件冒泡 return; } // 设置为不可点击状态 el.isDisabledClick true; // 5. 执行原始的点击事件处理函数 if (originalClickHandler) { originalClickHandler(event); } // 6. 设置定时器在指定时间后恢复点击 el.preventClickTimer setTimeout(() { // 恢复点击状态 el.isDisabledClick false; // 清除定时器引用 el.preventClickTimer null; }, delay); }; // 7. 移除原始的点击事件添加新的点击事件 el.removeEventListener(click, originalClickHandler); el.addEventListener(click, el.__preventClickHandler); }, // 指令从元素解绑时执行 unmounted(el) { // 8. 清除定时器 if (el.preventClickTimer) { clearTimeout(el.preventClickTimer); el.preventClickTimer null; } // 9. 移除事件监听器 if (el.__preventClickHandler) { el.removeEventListener(click, el.__preventClickHandler); el.__preventClickHandler null; } // 10. 清除自定义属性 el.isDisabledClick null; el.__originalClickHandler null; } };2. 在 main.js 中全局注册指令import { createSSRApp } fromvue; import App from./App.vue; // 导入指令 import { preventClick } from/directives/preventClick; exportfunction createApp() { const app createSSRApp(App); // 全局注册指令指令名为 prevent-click app.directive(prevent-click, preventClick); return { app }; }3.在组件中使用指令template view !-- 方式1使用默认 1000ms 防抖 -- button v-prevent-click clickhandleClick点击/button !-- 方式2自定义防抖时间 -- button v-prevent-click2000 clickhandleClick点击/button /view /template方案三封装一个防重复点击的 Hook在项目目录 hooks 新建文件: usePreventReclick.jsimport { ref } fromvue exportfunction usePreventReclick(delay 1000) { const isDisabled ref(false) // 执行受保护的操作 fn - 要执行的函数建议返回 Promise // 返回 fn 的结果或 undefined如果被阻止 const execute async (fn) { if (isDisabled.value) { console.info(操作被阻止) returnundefined } // 设置为 true isDisabled.value true try { const result await fn() return result } catch (error) { // 抛出异常 throw error } finally { // 延迟后自动重置状态 setTimeout(() { isDisabled.value false }, delay) } } // 解除禁用 const reset () { isDisabled.value false } return { isDisabled, execute, reset } }在项目中使用template view classcontainer button :disabledisLoading :loadingisLoading clickhandleSubmit {{ isLoading ? 正在提交中... : 提交订单 }} /button /view /template script setup import { ref } from vue import { usePreventReclick } from /hooks/usePreventReclick const isLoading ref(false) // 创建防重实例时间 1500 毫秒 const { isDisabled: isLoading, execute } usePreventReclick(1500) const handleSubmit () { execute(async () { // 模拟后端请求 await new Promise() uni.showToast({ title: 提交成功}) }).catch(err { console.error(提交失败:, err) uni.showToast({ title: 提交失败}) }) } /script