Element Plus组件
- 安装
- 引入组件
- 使用
- Layout 布局
- button按钮
- 行内表单
- 菜单
安装
包管理安装
# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus
浏览器直接引入
例如
<head><!-- Import style --><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /><!-- Import Vue 3 --><script src="//unpkg.com/vue@3"></script><!-- Import component library --><script src="//unpkg.com/element-plus"></script>
</head>
引入组件
完整引入。将Element Plus中所有文件引入
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
按需导入
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
使用方式
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})使用
下面简单介绍几种常用组件
Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
row代表行 col代表列
gutter代表间距，默认为0
<template><el-row :gutter="20"><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col></el-row>
</template><style>
.el-row {margin-bottom: 20px;
}
.el-row:last-child {margin-bottom: 0;
}
.el-col {border-radius: 4px;
}.grid-content {border-radius: 4px;min-height: 36px;background-color: aqua;
}
</style>
button按钮
<!-- vue3代码 小C学安全 -->
<template><div><el-button type="primary" class="">Primary</el-button><br><el-button type="success">Success</el-button><br><el-button type="info">Info</el-button><br><el-button type="warning">Warning</el-button><br><el-button type="danger">Danger</el-button><br></div></template><script setup lang='ts'>
import { ref, reactive } from 'vue'</script>
<style scoped>
</style>
行内表单
<!-- vue3代码 小C学安全 -->
<template><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="漏洞名称"><el-input v-model="formInline.user" placeholder="请输入漏洞名称" clearable /></el-form-item><el-form-item label="CVE编号"><el-selectv-model="formInline.region"placeholder="请输入CVE编号"clearable><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="更新时间"><el-date-pickerv-model="formInline.date"type="date"placeholder="请选择更新时间"clearable/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">搜 索</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive } from 'vue'const formInline = reactive({user: '',region: '',date: '',
})const onSubmit = () => {console.log('submit!')
}
</script><style>
.demo-form-inline .el-input {--el-input-width: 220px;
}.demo-form-inline .el-select {--el-select-width: 220px;
}
</style>
菜单
<template><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal":ellipsis="false"@select="handleSelect"><el-menu-item index="0"><imgstyle="width: 100px"src="@/images/element-plus-logo.svg"alt="Element logo"/></el-menu-item><div class="flex-grow" /><el-menu-item index="1">主页</el-menu-item><el-menu-item index="1">新建任务</el-menu-item><el-menu-item index="1">任务详情</el-menu-item><el-menu-item index="1">生成报告</el-menu-item><el-sub-menu index="2"><template #title>admin</template><el-menu-item index="2-1">个人信息</el-menu-item><el-menu-item index="2-2">修改密码</el-menu-item><el-menu-item index="2-3">注销登录</el-menu-item></el-sub-menu></el-menu>
</template><script lang="ts" setup>
import { ref } from 'vue'const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {console.log(key, keyPath)
}
</script><style>
.flex-grow {flex-grow: 1;
}
</style>
