【VUE进阶】安装使用Element Plus组件

news2024/9/17 8:56:07

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-select
        v-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-picker
        v-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">
      <img
        style="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>