引言
在现代Web开发中，用户界面的设计与交互体验至关重要。随着前端技术的迅速发展，各种UI框架层出不穷，旨在提升开发效率和用户体验。其中，Element Plus作为一款基于Vue 3的组件库，因其简洁优雅的设计和丰富的功能而备受欢迎。
Element Plus不仅提供了众多高质量的组件，还注重与开发者的友好互动，使得即使是初学者也能快速上手。在本系列文章中，我们将深入探讨Element Plus的各个组件及其应用，通过实例演示如何有效利用该框架构建美观且功能强大的用户界面。
使用
Plain Text $ pnpm install element-plus --save $ yarn add element-plus 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') 图标 Plain Text $ npm install @element-plus/icons-vue # Yarn $ yarn add @element-plus/icons-vue ```Plain Text 使用 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } ```
输入框的使用
：prefix-icon
<el-input v-model="form.password" :type="passwordType" :prefix-icon="Search"></el-input>
:suffix-icon="Search"
显示 密码
:show-password="true"
:show-password="show"
<template> <div class="login_page"> <div class="login_info"> <el-form label-width="auto" :model="formLabelAlign" style="max-width: 800px"> <el-form-item> <el-input v-model="formLabelAlign.account" placeholder="请输入账号" type="text" /> </el-form-item> <el-form-item> <el-input v-model="formLabelAlign.password" placeholder="请输入密码" :type="password_type"> <template v-slot:suffix> <el-icon :size="20" @click="show_password"> <component :is="show?icon_list.icon_view:icon_list.icon_hide" /> </el-icon> </template> </el-input> </el-form-item> <el-form-item class="login_btn"> <el-button type="primary">登录</el-button> </el-form-item> </el-form> </div> </div> </template> <script setup> import { reactive, ref } from 'vue' const password_type = ref("password") const formLabelAlign = reactive({ account: '', password: '', }) let show = ref(false) const show_password = () => { if (show.value) { password_type.value = "text" } else { password_type.value = "password" } show.value = !show.value } const icon_list = { icon_hide: "hide", icon_view: "view" } </script> <style scoped lang="scss"> .login_page { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ background: linear-gradient(to bottom right, #0081f1 30%, #f7182e 60%); width: 100%; /* 设置宽度为100% */ height: 99vh; /* 设置高度为视口高度 */ } .login_info { width: 400px; padding: 20px; border: 0.7px solid linear-gradient(to bottom right, #0081f1 30%, #f7182e 60%); border-radius: 5px; box-shadow: 1px 1px 3px; } .login_btn button { margin: 0 auto; width: 100%; } </style>
<template> <div class="login_page"> <div class="login_info"> <el-form label-width="auto" :model="formLabelAlign" style="max-width: 800px"> <el-form-item> <el-input v-model="formLabelAlign.account" placeholder="请输入账号" type="text" /> </el-form-item> <el-form-item> <el-input v-model="formLabelAlign.password" show-password="true" placeholder="请输入密码" type="password"> </el-input> </el-form-item> <el-form-item class="login_btn"> <el-button type="primary">登录</el-button> </el-form-item> </el-form> </div> </div> </template> <script setup> import { reactive, ref } from 'vue' const password_type = ref("password") const formLabelAlign = reactive({ account: '', password: '', }) </script> <style scoped lang="scss"> .login_page { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ background: linear-gradient(to bottom right, #0081f1 30%, #f7182e 60%); width: 100%; /* 设置宽度为100% */ height: 99vh; /* 设置高度为视口高度 */ } .login_info { width: 400px; padding: 20px; border: 0.7px solid linear-gradient(to bottom right, #0081f1 30%, #f7182e 60%); border-radius: 5px; box-shadow: 1px 1px 3px; } .login_btn button { margin: 0 auto; width: 100%; } </style>
验证的清空
formEl.resetFields() 的使用
<el-form :model="form" :rules="rules" ref="formRef"> 用 ref 绑定 formRef const formRef = ref(null);
addStudent 中 定义 了 一个 方法
使用 如下
const addStudent = (test) => { resetForm(test.formRef) }
清空 代码
const resetForm = (formEl) => { if (!formEl) return formEl.resetFields() }
调用 传参 为
@click="addStudent($refs)
简单使用
<el-button @click="resetForm(formRef)">重置</el-button> const resetForm = (formEl) => { if (!formEl) return formEl.resetFields() }
轮播图
<template> <div class="home-banner"> <el-carousel height="500px"> <el-carousel-item v-for="item in 4" :key="item.id"> <img src="../assets/images/logo.png" alt=""> </el-carousel-item> </el-carousel> </div> </template> <script setup> </script> <style scoped></style>
面包屑
<template> <div class="bread-container"> <el-breadcrumb separator=">"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item v-for="(i, index) in item">{{ i.name }}</el-breadcrumb-item> </el-breadcrumb> </div> </template> <script setup> let item = [ { id: 1, name: 'home', }, { id: 2, name: 'category', }, { id: 3, name: 'settings', }]; </script> <style scoped></style>
导航激活
在RouterLink里面配置 组件默认激活类名
设置 active-class 属性 设置对应的 类名 即可 <RouterLink active-class="active" :to="/test"> {{item.name}} <RouterLink> .active{ color:red, border-bottom:1px solid red}
骨架屏幕
skeleton
可以 的 样式 有
简单使用
<template> <el-skeleton style="width: 240px"> <template #template> <el-skeleton-item variant="image" style="width: 240px; height: 240px" /> <el-skeleton-item variant="text" style="width: 30%" /> </template> </el-skeleton> <el-skeleton style="--el-skeleton-circle-size: 100px"> <template #template> <el-skeleton-item variant="circle" /> </template> </el-skeleton> </template> <script setup lang="ts"> </script>
简单的菜单
<template> <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2" text-color="#fff" > <el-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>Navigator One</span> </template> <el-menu-item-group title="Group One"> <el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-2">item two</el-menu-item> </el-menu-item-group> </el-sub-menu> </el-menu> </template> <script lang="ts" setup> import { Location, } from '@element-plus/icons-vue' </script>
table里面的tree
<template> <div> <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border > <el-table-column prop="date" label="Date" sortable /> <el-table-column prop="name" label="Name" sortable /> <el-table-column prop="address" label="Address" sortable /> </el-table> </div> </template> <script lang="ts" setup> interface User { id: number date: string name: string address: string hasChildren?: boolean children?: User[] } const tableData: User[] = [ { id: 1, date: '2016-05-02', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', }, { id: 2, date: '2016-05-04', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', }, { id: 3, date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', children: [ { id: 31, date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', }, { id: 32, date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', }, ], }, { id: 4, date: '2016-05-03', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', }, ] </script>
图标
<ElIcon :size="30" color="hotpink"> <edit /> </ElIcon>
