chore: update debounce demo

This commit is contained in:
xiaoxian521
2022-10-16 15:29:03 +08:00
parent b6f0e7736c
commit 2cc1d8d736
4 changed files with 45 additions and 51 deletions

View File

@@ -1,7 +1,6 @@
import { Directive, type DirectiveBinding, type VNode } from "vue";
import elementResizeDetectorMaker from "element-resize-detector";
import type { Erd } from "element-resize-detector";
import { optimizeFps } from "@pureadmin/utils";
import { emitter } from "/@/utils/mitt";
const erd: Erd = elementResizeDetectorMaker({
@@ -14,9 +13,7 @@ export const resize: Directive = {
const width = elem.offsetWidth;
const height = elem.offsetHeight;
if (binding?.instance) {
optimizeFps(() => {
emitter.emit("resize", { detail: { width, height } });
})();
emitter.emit("resize", { detail: { width, height } });
} else {
vnode.el.dispatchEvent(
new CustomEvent("resize", { detail: { width, height } })

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { debounce } from "@pureadmin/utils";
import { useDebounceFn, useThrottleFn } from "@vueuse/core";
import { debounce, throttle } from "@pureadmin/utils";
defineOptions({
name: "Debounce"
@@ -16,9 +15,9 @@ const handle = () => {
const immediateDebounce = debounce(handle, 1000, true);
const debounceClick = useDebounceFn(handle, 1000);
const debounceClick = debounce(handle, 1000);
const throttleClick = useThrottleFn(handle, 1000, false);
const throttleClick = throttle(handle);
</script>
<template>
@@ -52,5 +51,3 @@ const throttleClick = useThrottleFn(handle, 1000, false);
</el-card>
</div>
</template>
<style scoped></style>