快速上手

element-plus-extend 是一个基于 element-plus 的扩展库，它提供了一些额外的组件和功能，以增强 element-plus 的功能。

安装

npm install element-plus-ext

注册

• 全局注册

在 main.js 中引入 element-plus-ext 并注册

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlusExtend from 'element-plus-ext'
// 注册样式
import 'element-plus-ext/dist/style.css'

const app = createApp(App)
// 注册组件
app.use(ElementPlusExtend)
app.mount('#app')

• 局部注册

在 main.js 中引入 element-plus-ext 的样式文件

// 注册样式
import 'element-plus-ext/dist/style.css'

在需要使用组件的页面中引入组件并注册。例如，在 MyComponent.vue 中：

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

function openContextmenu(event: MouseEvent) {
  ElContextmenu({
    event,
    menus: [
      {
        index: 'openFile',
        label: '打开文件',
        onClick: () => {
          console.log('点击了打开文件菜单')
        }
      }
    ]
  })
}
</script>

<template>
  <div 
    style="width: 500px;height: 500px;"
    @contextmenu="openContextmenu"
  >右键区域内打开右键菜单</div>
</template>