Wed Aug 28 17:10:00 CST 2024 inscode

src/App.vue

@@ -4,12 +4,14 @@ import EditTable from './components/TableForm/EditTable.vue';
 import ElTableColumnFormatter from './components/TableForm/ElTableColumnFormatter.vue';
 import RemoteSearch from './components/Select/RemoteSearch.vue';
 import SelectValueObj from './components/Select/SelectValueObj.vue';
+import HowToUseConfirmPopup from './components/HowToUseConfirmPopup/index.vue'
 
 const tabs = {
   EditTable,
   ElTableColumnFormatter,
   RemoteSearch,
-  SelectValueObj
+  SelectValueObj,
+  HowToUseConfirmPopup
 }
 const current = ref(EditTable)
 
@@ -26,7 +28,10 @@ function handleClick(val) {
       :key="index"
       @click="handleClick(val)"
     >{{ key }}</button>
-    <component :is="current" />
+
+    <div class="content">
+      <component :is="current" />
+    </div>
   </div>
 </template>
 
@@ -34,6 +39,10 @@ function handleClick(val) {
 .active {
   background: red;
 }
+.content{
+  border: 1px solid #000;
+  padding: 12px;
+}
 </style>
 
 

src/components/HowToUseConfirmPopup/index.vue

+<script setup>
+import useConfirmPopup from '../../hooks/useConfirmPopup'
+
+// 模拟Ajax请求
+function ajax(data){
+  debugger
+  return new Promise((resolve,reject)=>{
+    setTimeout(() => {
+      debugger
+      resolve('请求成功')
+    }, 2000);
+  })
+}
+
+// 新增方法
+async function addFn(data){
+  debugger
+  try {
+    debugger
+    const res = await ajax(data)
+    debugger
+    console.log('res',res)
+  } catch (error) {
+    
+  }
+}
+
+// 按钮触发事件
+function handleClick() {
+  useConfirmPopup(
+    '确认新增?',
+    addFn.bind(null, {name:'张三'})
+  )
+}
+</script>
+
+<template>
+  <button @click="handleClick">触发useConfirmPopup</button>
+</template>
+  
\ No newline at end of file

src/hooks/useConfirmPopup.js

@@ -23,6 +23,7 @@ function useConfirmPopup(title, confirmCallBack, cancelCallback) {
         })
 
         try {
+          debugger
           await confirmCallBack()
           done()
         } catch (err) {
@@ -33,6 +34,7 @@ function useConfirmPopup(title, confirmCallBack, cancelCallback) {
         }
 
       } else if (action === 'cancel') {
+        debugger
         // 取消按钮触发事件
         if(confirmDisabled){
           ElMessage({