@lihh/n-wrapper

n-wrapper

事件代理 vue 组件

当实际的业务中出现类似Tooltip组件的话，需要点击 window/ document 来隐藏。此组件n-wrapper 可以代替 window 来接受事件冒泡，从而告诉你何种事件被触发，决定权在您手中。避免过度的事件绑定在 window 上

简体中文 | English

下载

npm install @lihh/n-wrapper -S

yarn add @lihh/n-wrapper -S

pnpm install @lihh/n-wrapper -S

使用实例

n-wrapper 位置

需要将组件n-wrapper 包括在最外层，来接受事件冒泡

<script lang="ts" setup>
import { NWrapper } from "@lihh/n-wrapper";
</script>

<template>
  <n-wrapper>
    <!--  此处是root 组件。   -->
  </n-wrapper>
</template>

TS 版本 使用实例

<script lang="ts" setup>
import { ref, inject, onUnmounted } from "vue";
import {
  IWrapperInjectFn,
  IWrapperInjectFnParams,
  wrapperProvideKey,
} from "@lihh/n-wrapper";

const clickCallback = (args: IWrapperInjectFnParams) => {
  if (args[0] === "click") {
    showFlag.value = false;
  }
};

const [installFn, unInstallFn] = inject<IWrapperInjectFn>(wrapperProvideKey)!;
installFn(clickCallback);

const showFlag = ref(false);
onUnmounted(() => {
  unInstallFn(clickCallback);
});
</script>

<template>
  <div class="n-wrapper-test">
    <div @click.stop="showFlag = true" role="button" class="button">
      <span>点击 测试n-wrapper</span>
    </div>
    <div v-show="showFlag" class="dialog" @click="showFlag = false"></div>
  </div>
</template>

JS 版本 使用实例

<script setup>
import { ref, inject, onUnmounted } from "vue";
import { IWrapperInjectFn, wrapperProvideKey } from "@lihh/n-wrapper";

const clickCallback = (args) => {
  if (args[0] === "click") {
    showFlag.value = false;
  }
};

const [installFn, unInstallFn] = inject(wrapperProvideKey);
installFn(clickCallback);

const showFlag = ref(false);
onUnmounted(() => {
  unInstallFn(clickCallback);
});
</script>

<template>
  <div class="n-wrapper-test">
    <div @click.stop="showFlag = true" role="button" class="button">
      <span>点击 测试n-wrapper</span>
    </div>
    <div v-show="showFlag" class="dialog" @click="showFlag = false"></div>
  </div>
</template>

导出类型

export type IFn<T = any> = (...args: T[]) => any;
export type IWrapperInstallFn = (fn: IFn<IWrapperInjectFnParams>) => void;
export type IWrapperUninstallFn = (fn: IFn) => void;
export type IWrapperInjectFnParams = [string, Event];
export type IWrapperInjectFn = [IWrapperInstallFn, IWrapperUninstallFn];
export const wrapperProvideKey = Symbol() as InjectionKey<IWrapperInjectFn>;
export const WrapperProps = {
  eventNames: {
    type: Array as PropType<string[]>,
    default: ["click"],
  },
  classNames: {
    type: Array as PropType<string[]>,
    default: [],
  },
};

组件类型

属性	描述	类型	默认值
eventNames	冒泡响应的事件	Array	["click"]
classNames	组件 样式	Array	[]

更新记录

• 1.0.1 版本第一次发布
• 1.0.2 修改 README 中提示文字
• 1.0.3 将 inject 方法的返回值进行修改。const poll = inject(wrapperProvideKey); => const [installFn, unInstallFn] = inject(wrapperProvideKey); 对象转换数组
• 1.0.4 修改 README 导出类型

更多

致力于将每个组件单独打包为库，提供更多的可能性，如果有更多的需求请及时 issue 作者。