Element-UI

最新推荐文章于 2024-09-16 11:54:34 发布
最新推荐文章于 2024-09-16 11:54:34 发布
阅读量750 收藏
点赞数
分类专栏： 大前端 文章标签： ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53568983/article/details/128501202
版权
本文介绍了Element-UI和ElementPlus，它们是饿了么团队为开发者提供的Vue3组件库，可帮助快速搭建项目并简化后期维护。文章详细讲解了如何通过CDN和npm安装，以及如何引入和使用基础组件，如Button、Icon、布局和Form数据录入等。此外，还提到了图标、链接和间距组件的使用方法。
摘要由CSDN通过智能技术生成

Element-UI

前言

Element-UI中集合了一些写好的组件，可以直接使用

一、介绍Element-UI

  1. Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。
  2. 由饿了么团队出品，提供了配套 axure、sektch 设计资源，可以直接下载使用，能帮我等搬砖人员节省大量的时间。
  3. 使用现成的 UI 组件库，能快速搭建项目，后期也容易维护，在敏捷开发项目中尤为常见。设计师可以下载设计文件，在做设计图时直接使用模板，既能快速出图，也保证了前端还原实现。
  4. 官网地址

二、使用Element-UI前

2.1安装

安装有两种方式，第一种方式是CDN安装，就是直接引入链接库，如下所示:

  1. CND

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

新建一个html文件，然后添加如上两行代码，就可以直接使用Element-UI代码了,如下实例：

  • index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>
  1. npm安装
# 1、npm安装
npm install element-plus --save

# 2、yarn安装
yarn add element-plus

2.2 引入Element Plus

CDN安装后不需要进行引入，npm安装后需要进行引入

// 1、main.js 文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// 在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app.use(store).use(router).use(ElementPlus, { size: "small", zIndex: 3000 }).mount("#app");

三、基础组件使用

使用npm安装后，并且在main.js中导入相应的文件后，就可以直接使用Element-UI了,直接把官网的代码拿来用就可以了

在这里插入图片描述

如何使用UI其实直接看手册就可以了，接下来介绍几种常见的样式设置

3.1Button按钮


  • 在这里插入图片描述
  • App.vue
<template>
    <div>
        <!-- 1、size 按钮尺寸 -->
        <el-button>默认</el-button>
        <el-button size="large">大</el-button>
        <el-button size="middle">中</el-button>
        <el-button size="small">小</el-button>

        <!-- 2、type 按钮类型 -->
        <el-button>默认</el-button>
        <el-button type="primary">主要</el-button>
        <el-button type="success">成功</el-button>
        <el-button type="info">信息</el-button>
        <el-button type="warning">警告</el-button>
        <el-button type="danger">危险</el-button>
        <el-button type="text">文本</el-button>

        <!-- 3、plain 朴素按钮、text 文字按钮、bg 显示文字按钮背景颜色、link 链接按钮、round 圆角按钮、circle 圆形按钮、loading 加载中状态 -->
        <el-button type="success">成功</el-button>
        <el-button type="success" plain>朴素按钮</el-button>
        <el-button type="success" text>文字按钮</el-button>
        <el-button type="success" bg>显示文字按钮背景颜色</el-button>
        <el-button type="success" text bg>组合使用</el-button>
        <el-button type="success" link>链接按钮</el-button>
        <el-button type="success" round>圆角按钮</el-button>
        <el-button type="success" circle>圆形按钮</el-button>
        <el-button type="success" loading>加载中状态</el-button>
        <el-button type="success" disabled>禁用状态</el-button>
    </div>
</template>

3.2Button按钮组


  • 在这里插入图片描述

  • App.vue

 <template>
    <div>
        <!-- 1、按钮组 -->
        <el-button-group>
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        
        <!-- 2、size 按钮尺寸 -->
        <el-button-group size="large">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        <el-button-group size="middle">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        <el-button-group size="small">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>

        <!-- 3、type 按钮类型 -->
        <el-button-group type="primary">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        <el-button-group type="success">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
    </div>
</template>

3.3Icon图标

使用图标前的准备工作

  1. 运行npm install @element-plus/icons-vue命令
  2. 在main.js下更改为如下的代码(有什么不一样的直接添加即可)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')
  • App.vue
 <template>
    <div>
        # 3.1、默认图标
        # 3.2、color 图标添加颜色
        # 3.3、size 图标设置大小
        <el-icon><AddLocation /></el-icon>
        <el-icon color="red"><AddLocation /></el-icon>
        <el-icon size="48px"><AddLocation /></el-icon>

        # 3.4、按钮添加图标
        <el-button-group type="success">
            <el-button><el-icon><AddLocation /></el-icon>添加</el-button>
            <el-button><el-icon><Edit /></el-icon>修改</el-button>
            <el-button><el-icon><DeleteFilled /></el-icon>删除</el-button>
        </el-button-group>
    </div>
</template>

3.4布局

  • 行
    在这里插入图片描述

  • 列
    在这里插入图片描述

  • App.vue

 <template>
    <div>
   <el-row justify="end"> 
        <el-row>
            <el-col :xs="6">sadfsafsdf</el-col>
            <el-col :xs="6">vsdfver</el-col>
            <el-col :xs="6">werwerwer</el-col>
            <el-col :xs="6">dxcvsdfsdf</el-col>
        </el-row>
      
        <el-row>
            <el-col :xs="6">sadfsafsdf</el-col>
            <el-col :xs="6">vsdfver</el-col>
            <el-col :xs="6">werwerwer</el-col>
            <el-col :xs="6">dxcvsdfsdf</el-col>
        </el-row>
        </el-row>
    </div>
</template>

3.5Link链接

在这里插入图片描述

  • App.vue
 <template>
    <div>
        <!-- 1、href 跳转url -->
        <el-link style="margin-right: 8px;" href="https://www.baidu.com" target="_blank">百度</el-link>
       
    </div>
</template>

3.6Space间距

  • </ el-space>
    在这里插入图片描述

  • App.vue

 <template>
    <el-space direction="vertical">
        <div>asd</div>
        <div>asd</div>
    </el-space>
        <el-space direction="horizontal">
        <div>asd</div>
        <div>asd</div>
    </el-space>
</template>

四、Form数据录入

4.1Input 输入框

4.2Input Number 数字输入框

4.3Radio 单选框

4.4Checkbox 多选框

4.5Select 选择器

4.6Form 表单

五、Navigation导航

六、DATa数据展示

七、Feedback反馈组件

八、布局

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

三年之约-第一年
关注
专栏目录
关于element ui单选框三种类型值的使用
m0_59865308的博客
03-07 1844
今天在写需求的时候遇到的，之前明明写过很多类似的功能，可就是没有总结过，导致每次写的时候每次都去官网扒一遍，当然官网更新的情况除外。 这个单选框的v-model的绑定值类型支持三种分别是，分别是string / number / boolean； string的写法和其他两种不一样。（我今天就是磕在这里了，这就是我太懒了不做总结的后果） 贴代码如下： // 数字类型和布尔类型写法一致 <template> <el-radio-group v-model="radio">
ElementUI Form：Radio 单选框
ChinaDragon10的博客
01-30 2081
ElementUI Form：Radio 单选框
Element Ui 实现表格单选功能
m0_59829743的博客
11-08 3225
element-ui 实现表格单选功能
element-ui实现带单选框的表格
qq_45078025的博客
08-23 2706
为了方便操作表格中的某一条数据，SZ也是张口就来 实现效果：在表格中只能选中某一条数据，进行下一步的操作。 首先扒拉扒拉element的官方文档有没有属性能直接实现。 嗯，没有。于是开始面向百度编程，大概是这两种方法 一.结合Radio组件来实现 个人觉得好多写的都比较麻烦。这位老哥写的较为简易，亲测可行 https://blog.csdn.net/qq_38468358/article/details/90378470 二.使用table组件自身的row-click方法和selec...
elementui 表格单选框实现
qq_43921510的博客
03-01 1992
原文链接：https://www.cnblogs.com/steamed-twisted-roll/p/10120106.html <div> <p>shopInfo</p> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" highlight-current-row // ele
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，用于构建优雅的前端应用。这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要...
element-ui资源包
08-03
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，以便快速构建美观、响应式的用户界面。这个"element-ui资源包"包含了所有你需要在前端项目中使用 Element UI 的必要文件和资源。 ...
element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）
06-04
本地引用示例： <!... <title>my ... <link rel="stylesheet" href="/my/html/element-ui/lib/theme-chalk/index.css"> <el-row> <el-col :span="24"><div class="myclass"></div></el-col> </el-row>
Element-ui 2.15.9版本
07-09
Element-ui 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可复用且响应式的用户界面。2.15.9 版本是 Element-ui 的一个稳定版本，可能包含了错误修复、性能优化以及新功能的添加...
HTML+Element-ui邮件管理前端界面
07-12
若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui -->...
elementUI表格单选（radio）
wang_59881的博客
01-11 3415
elementUI表格单选（radio），官网上有案例，但不是我想要的样式，改动后，记录一下
elementUI表格设置单选框
weixin_45747619的博客
10-22 2324
elementUI表格设置单选框 如果这种情况 <el-radio v-model="templateRadio" :label="scope.$index" @change.native="getTemplateRow(scope.row)"></el-radio> 注意：只显示单选框，{{""}}必不可少， :label="scope.$index"解决点一次多个选中的问题 <el-table :data="evaluteList"
element-ui的radio单选框动态渲染
weixin_73318685的博客
03-10 1688
根据后台返回的数据进行默认值绑定单选框选中，本文主要要注意的是radio的label值才是用户绑定后台定义的数据类型而不是value，其次是v-bind的正确使用。
vue+elementui 根据单选框选项动态校验
m0_56471534的博客
04-13 1602
单选框中，当选择不符合规范时，备注为必填项(做校验)，当选择符合规范时，备注可以不填写(不做校验)
element ui 单选框的值设置为heml代码、element ui 单选框选图标、element ui 单选框赋值svg代码
李程程的博客
05-11 253
element ui 单选框的值设置为heml代码、element ui 单选框选图标、element ui 单选框赋值svg代码
Element-ui radio单选框
热门推荐
新前端小白的博客
07-03 3万+
Element-ui radio单选框 <el-radio v-model="form.sex" label="0">0</el-radio> 发现页面加载的时候没有选中 改成这样就可以了： <el-radio v-model="form.sex" :label="0">0</el-radio> 是因为加冒号，说明后面的是一个变量或者表达式。...
鸿蒙开发入门day19-使用NDK接口构建UI（一）
最新发布
来自计科萌新的编程记录本
09-16 1134
ArkUI开发框架提供了一系列NDK接口，能够在应用中使用C和C++代码构建UI界面，这些接口包括UI组件创建、UI树操作、属性设置和事件监听等。面向通用UI界面开发场景，建议使用ArkTS代码和ArkUI声明式开发框架。然而，如果需要实现以下一个或多个目标，那么ArkUI NDK接口就能派上用场：需要使用UI组件树控制接口来动态创建和挂载UI组件，方便实现自身UI开发框架的系统桥接。进一步提升UI界面性能，细粒度控制组件的创建和属性设置，以降低延迟、处理极高UI负载。
element -ui
03-20
Element-UI是一个基于Vue.js的组件库，用于构建Web界面的用户界面库。它提供了丰富的可重用组件，包括按钮、表单、弹窗、导航等等，可以帮助开发者快速构建现代化的Web应用程序。 要使用Element-UI，你需要引入Element-UI的样式和脚本文件。你可以通过以下方式引入Element-UI： 1. 使用CDN引入Element-UI的样式和脚本文件[^1]： ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 使用npm安装Element-UI，并在项目中引入样式和组件[^2]： ```shell npm i element-ui -S ``` ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 通过以上方式引入Element-UI后，你就可以在Vue.js的项目中使用Element-UI的组件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三年之约-第一年

你的鼓励是对我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值