# element-plus-extend

**Repository Path**: amitu/element-plus-extend

## Basic Information

- **Project Name**: element-plus-extend
- **Description**: 使用element-plus扩展的一些组件。比如：右键菜单、文本溢出显示tooltip等。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://mitool.site/book/web/element-plus-extend/quick-start.html
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-11-25
- **Last Updated**: 2025-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: element-plus, element-plus-extend, vue3, UI

## README

# element-plus-extend

一个基于 `element-plus` 的扩展组件库，用于快速开发。

[在线文档](https://mitool.site/book/web/element-plus-extend/quick-start.html)

## 已扩展组件

- el-contextmenu

## 安装

```bash
npm install element-plus-ext
```

## 使用

### 全局注册

// main.js

```js
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import ElementPlusExt from 'element-plus-ext'
import 'element-plus-ext/dist/style.css'

const app = createApp(App)
app.use(ElementPlusExt)
app.mount('#app')
```

### 局部注册

// main.js 全局导入样式

```js
import 'element-plus-ext/dist/style.css'
```

// 组件中局部注册

```vue
<script setup lang="ts">
import { ElContextmenu } from 'element-plus-ext'

window.addEventListener('contextmenu', event => {
  event.preventDefault()
  ElContextmenu({
    event,
    menus: [
      {
        index: 'openFile',
        label: '打开文件',
        onClick: () => {
          console.log('打开文件')
        }
      }
    ]
  })
})
</script>
```