新增el-btn点击执行时间加载

src/directives/v-el-btn.ts

@@ -0,0 +1,40 @@
+import sleep from "../utils/sleep";
+
+const loadingName: string = 'xc-loading'
+
+const VElBtn = {
+    // 这里有个 bug 如果使用了 v-loading 的话
+    created(el: HTMLHtmlElement, binding, vnode, prevVnode) {
+        el.addEventListener('click', async (ev: Event) => {
+            ev.stopPropagation();
+            let startTime: Date = new Date();
+            try {
+                vnode.ref.i.props.loading = true
+                el.setAttribute(loadingName, 'true')
+                if (binding.value.func) {
+                    await binding.value.func(binding.value.value)
+                } else {
+                    await binding.value();
+                }
+            } catch (e) {
+                console.error(e)
+            }
+            let endTime = new Date()
+            if (endTime.getTime() - startTime.getTime() < 1000) {
+                await sleep(500)
+            }
+            el.setAttribute(loadingName, 'false')
+            vnode.ref.i.props.loading = false
+        });
+    },
+    updated(el: HTMLHtmlElement, binding, vnode, prevVnode) {
+        let loading: string | boolean = el.getAttribute(loadingName)
+        if (loading) {
+            loading = loading === 'true'
+            vnode.ref.i.props.loading = loading
+        }
+    },
+
+}
+
+export default VElBtn

src/main.js

@@ -15,6 +15,7 @@ import DataVVue3 from '@kjgl77/datav-vue3'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 import print from 'vue3-print-nb'
+import VElBtn from "@/directives/v-el-btn";
 
 addRoutes()
 
@@ -35,6 +36,7 @@ app.use(ElementPlus, {locale: zhCn, size: store.state.app.elementSize})
 app.use(store)
 app.use(router)
 app.use(DataVVue3)
+app.directive('el-btn', VElBtn)
 app.use(print)
 app.use(VXETable)
 app.use(JsonViewer);

src/utils/xckeydown.ts

@@ -1,7 +1,6 @@
 import {Ref, ref} from 'vue'
 import {ElMessage} from "element-plus";
 
-
 const direction: string[] = ['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp']
 export const xcEvent: Ref<Event | null> = ref(null)
 

src/views/settings/Test.vue

@@ -1,36 +1,30 @@
 <template>
-  <xc-combo-grid-v2
-      v-model="obj"
-      clearable
-      filterable
-      code="codesd"
-      name="namead"
-      :data="data"/>
-</template>
-
-<script setup>
-import XcComboGridV2 from "../../components/xiao-chan/combo-grid/XcComboGridV2.vue";
-import {obtainSurgicalItems} from "../../api/zhu-yuan-yi-sheng/shou-shu-shen-qing";
+  <div @click="上面">
+    <el-button v-el-btn="el1">不传参数</el-button>
+  </div>
+  <el-button v-el-btn="{func:el1, value: 23}">单个传参</el-button>
+  <el-button v-el-btn="{func:el1, value: {a: 1 ,b: 2}}">多个传参</el-button>
 
+  <div style="border: 1px solid; height: 200px; width: 200px"
+       v-loading="loading"/>
 
-const model = ref('')
+</template>
 
-const obj = ref({
-  codesd: '',
-  namead: ''
-})
+<script setup>
+import sleep from "@/utils/sleep";
 
-const data = ref ([])
+const loading = ref(false)
 
-const queryOperation = (val) => {
-  return obtainSurgicalItems(val, 0)
+const el1 = async (val) => {
+  loading.value = true
+  await sleep(500)
+  loading.value = false
 }
 
+const 上面 = () => {
+  console.log('上面')
+}
 
-onMounted(async () => {
-  data.value = await obtainSurgicalItems('12', 0)
-  // console.log(data.value)
-})
 </script>
 
 <style lang="scss">