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>
