Element Hooks

外观

快速上手 ​

安装 ​

安装前，请确认项目已经安装以下依赖。

sh
npm install element-hooks
sh
yarn add element-hooks
sh
pnpm add element-hooks
sh
bun add element-hooks

基本用法 ​

可以直接从 element-hooks 按需导入 Hook，无需先注册 Vue 插件。在 <script setup> 中调用 useDialog 后，返回的 Dialog 可以直接在 <template> 中使用。

vue
<script setup lang="ts">
  import { useDialog } from 'element-hooks';

  const [Dialog, { open, close }] = useDialog({
    title: '提示',
    width: 500,
  });
</script>

<template>
  <el-button @click="open">打开对话框</el-button>
  <Dialog>
    <p>这是一段内容。</p>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </Dialog>
</template>

注册插件 ​

将 Element Hooks 注册为 Vue 插件后，可以设置 全局配置，并在浏览器开发环境中启用 Vue DevTools 支持。如果只需要按需使用 Hook，也可以不注册插件。

ts
import ElementHooks from 'element-hooks';
import ElementPlus from 'element-plus';
import { createApp } from 'vue';

import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.use(ElementHooks);

app.mount('#app');

在 Vue DevTools 的 Components 面板中，选择已挂载的 Dialog、Drawer、Form、Table 或 Grid 组件，可以在 Element Hooks 分组中查看合并全局默认值和组件 Props 后的生效配置。配置以只读方式展示，并随组件更新刷新。

调试信息集成在组件面板中。生产应用构建会移除这部分调试代码。

自动导入 ​

如果项目已经使用 unplugin-auto-import，可以添加以下配置，自动导入 Element Hooks 提供的全部 Hook。

ts
import ElementHooksComposables from 'element-hooks/composables';
import AutoImport from 'unplugin-auto-import/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        {
          'element-hooks': Object.keys(ElementHooksComposables),
        },
      ],
    }),
  ],
});

下一步 ​

接下来可以继续阅读以下内容。

  • Hook 介绍 — 查看 Core Hooks 和 Composite Hooks 的分类。
  • 全局配置 — 设置 Hook 的全局默认配置。
  • 状态管理 — 了解 setState 和快捷方法的使用方式。