UI 框架:Element-plus组件库(一)-阿里云开发者社区

UI 框架:Element-plus组件库(一)

2024-10-16 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在现代Web开发中，用户界面的设计与交互体验至关重要。随着前端技术的迅速发展，各种UI框架层出不穷，旨在提升开发效率和用户体验。其中，Element Plus作为一款基于Vue 3的组件库，因其简洁优雅的设计和丰富的功能而备受欢迎。Element Plus不仅提供了众多高质量的组件，还注重与开发者的友好互动，使得即使是初学者也能快速上手。在本系列文章中，我们将深入探讨Element Plus的各个组件及其应用，通过实例演示如何有效利用该框架构建美观且功能强大的用户界面。

引言

在现代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>

UI 框架:Element-plus组件库(一)

引言

使用

输入框的使用

验证的清空

轮播图

面包屑

骨架屏幕

简单的菜单

table里面的tree

图标

热门文章

最新文章

相关电子书