Vue入门到关门之第三方框架elementui

1、什么是ElementUI？

Element UI 是一个基于 Vue.js 的组件库，它提供了丰富的 UI 组件和一套完整的解决方案，用于快速构建现代化的 Web 应用程序。Element UI 的目标是帮助开发者快速构建出美观、易用的界面，并提供了丰富的组件，包括但不限于按钮、表单、表格、对话框、菜单、导航、布局等等。

Element UI 的特点包括：

  1. 丰富的组件: Element UI 提供了大量的常用 UI 组件，开发者可以通过简单的引入和配置，快速构建出符合现代界面设计的 Web 应用。

  2. 易用性: 组件设计符合用户习惯，提供了丰富的交互细节和动画效果，使得开发者可以轻松地构建出用户友好的界面。

  3. 响应式设计: Element UI 的组件支持响应式设计，能够适应不同尺寸的屏幕，从而提供良好的移动端和桌面端用户体验。

  4. 主题定制: Element UI 提供了灵活的主题定制功能，开发者可以根据自己的需求定制组件的外观和风格。

总的来说，Element UI 是一个功能丰富、易用且灵活的 Vue.js 组件库，为开发者提供了丰富的工具和组件，帮助他们快速构建出现代化的 Web 应用程序。

2、Element UI的官方网站

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

  • https://element.eleme.cn/#/zh-CN

3、Element UI的使用

（1）安装

在Vue项目中使用ElementUI，需要进行以下配置步骤：

  • 在项目中安装

    cnpm install element-ui -S

（2）项目中配置

在main.js配置：

  • 导入ElementUI对象：
    • 使用import ElementUI from 'element-ui'将ElementUI对象引入。
  • 引入ElementUI样式：
    • 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的样式。
// 导入ElementUI对象
import ElementUI from 'element-ui';       
// 引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css';

  • 注册ElementUI组件：

    • 在main.js文件中，通过Vue.use(ElementUI)全局注册ElementUI组件，并使其可在所有的Vue组件中使用。
    Vue.use(ElementUI)

这样配置完成后，就可以在项目中直接使用ElementUI提供的组件和样式了。如果在其他组件中看到了喜欢的ElementUI的样式效果，可以直接复制相关的HTML、CSS和JavaScript代码来使用。

（3）使用

示例：

<template>
  <div class="Element">
    <h1>栅格</h1>
    <el-row :gutter="20">
      <el-col :span="16"><div class="left"></div></el-col>
      <el-col :span="8"><div class="right"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="center"></div></el-col>
    </el-row>

    <h2>布局容器</h2>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <h1>小图标</h1>
    <span class="el-icon-video-camera">打开摄像机</span>

    <h1>按钮</h1>
    <el-row>
      <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" plain>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <h1>链接文字</h1>
    <div>
      <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
      <br>
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </div>


    <h1>单选</h1>
    <div>
      <el-radio-group v-model="radio1">
        <el-radio-button :label="item" v-for="item in citys" border="false"></el-radio-button>
      </el-radio-group>
    </div>

    <h1>多选</h1>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>

    <h1>input框</h1>
    <div class="demo-input-suffix">
      属性方式：
      <el-input
          placeholder="请选择日期"
          suffix-icon="el-icon-date">
      </el-input>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search">
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input
          placeholder="请选择日期">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
          placeholder="请输入内容">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    <h1>表格</h1>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <h1>message提示</h1>
    <el-button :plain="true" @click="open4">错误</el-button>
    <h1>警告</h1>
    <el-button :plain="true" @click="open">错误</el-button>


  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'Element',
  data(){
    return {
      // citys:['上海','北京','天剑'],
      // radio1:'上海',

      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods:{
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    open4(){
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }

}
</script>

<style scoped>
.left{
  background-color: aqua;
  height: 200px;
}
.right{
  background-color: pink;
  height: 200px;
}
.center{
  background-color: green;
  height: 200px;
}

.el-header{
  height: 50px;
  background-color: rebeccapurple;
}
.el-aside{
  height: 700px;
  background-color: aquamarine;
}
.el-main{
  height: 500px;
  background-color: #67C23A;
}
.el-footer{
  height: 200px;
  background-color: blue;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

4、总结

(1) 安装：cnpm i element-ui -S
(2) 集成到项目：main.js 中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 使用插件
(3) 去官网，找样式，复制，粘贴

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/589362.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

和丰多媒体信息发布系统 QH.aspx 文件上传漏洞复现

和丰多媒体信息发布系统 QH.aspx 文件上传漏洞复现

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…
阅读更多...
《十二》Qt各种对话框之FileDialog文件对话框及QMessageBox 消息对话框

《十二》Qt各种对话框之FileDialog文件对话框及QMessageBox 消息对话框

QFileDialog 对话框 选择打开一个文件 若要打开一个文件&#xff0c;可调用静态函数 QFileDialog::getOpenFileName()&#xff0c;“打开一个文件”按钮的响应代码如下&#xff1a; void Dialog::on_btnOpen_clicked() { //选择单个文件QString curPathQDir::currentPath()…
阅读更多...
【Docker】如何注册Hub账号并上传镜像到Hub仓库

【Docker】如何注册Hub账号并上传镜像到Hub仓库

一、创建Hub账户 浏览器访问&#xff1a;hub.docker.com 点击【Sign up】注册账号 输入【邮箱】【用户名】【密码】 ps&#xff1a;用户名要有字母数字&#xff1b;订阅不用勾选 点击【Sign up】注册即可 点击【Sign in】登录账号 输入【邮箱】【密码】 点击【Continue】登录 二…
阅读更多...
大数据之数据仓库技术：ETL工具和Kettle简介

大数据之数据仓库技术：ETL工具和Kettle简介

大数据之数据仓库技术&#xff1a;ETL工具和Kettle简介 ETL简介ETL工具和KettleKettle家族 Kettle资源KettlePack 任务调度工具 ETL简介 ETL(Extract-Transform-Load): 在大数据技术领域内&#xff0c;用来描述将数据从 来源端 经过 抽取(extract), 转换(transform), 加载(loa…
阅读更多...
cefsharp实现资源替换如网页背景、移除替换标签、html标识、执行javascript脚本学习笔记（含源码说明）

cefsharp实现资源替换如网页背景、移除替换标签、html标识、执行javascript脚本学习笔记（含源码说明）

（一）实现测试（仅供学习参考） 1.1 目标系统页面（登录页）和登录后首页面中2处（一个替换一个移除） 1.2 实现后效果（使用cefsharp自定义浏览器实现以上功能） 1.3 登录后页面替换和移除 系统名称和一个功能菜单li （二）通过分析代码实现脚本编写 2.1 分开处理，设置了…
阅读更多...
C语言/数据结构——每日一题（反转链表）

C语言/数据结构——每日一题（反转链表）

一.前言 大家好&#xff01;今天又是每日一题环节。今天我为大家分享了一道单链表题——反转链表。 废话不多说&#xff0c;让我们直接进入正题吧。 二.正文 1.1题目信息 这是一道leetCode上面的一道题&#xff1a;https://leetcode.cn/problems/reverse-linked-list 1.2解…
阅读更多...
Linux 第十八章

Linux 第十八章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…
阅读更多...
一周零碎时间练习微服务(nacos,rq,springcloud,es等)内容

一周零碎时间练习微服务(nacos,rq,springcloud,es等)内容

目录 1 总览1.1 技术架构1.2 其他1.2.1 数据库1.2.2 后端部分1.2.2.1 复习feign1.2.2.2 复习下网关网关的核心功能特性&#xff1a;网关路由的流程断言工厂过滤器工厂全局过滤器 过滤器执行顺序解决跨域问题 1.2.2.3 es部分复习 1.2.3 前端部分 2 day1 配置网关2.1 任务2.2 网关…
阅读更多...
UI-Diffuser——使用生成性人工智能的UI原型设计

UI-Diffuser——使用生成性人工智能的UI原型设计

概述。 移动UI是影响参与度的一个重要因素&#xff0c;例如用户对应用的熟悉程度和使用的便利性。如果你有一个类似的应用程序&#xff0c;你可能会选择一个具有现代、好看的设计的应用程序&#xff0c;而不是一个旧的设计。然而&#xff0c;要从头开始研究什么样的UI最适合应…
阅读更多...
JavaEE ＞＞ Spring MVC(1)

JavaEE ＞＞ Spring MVC(1)

MVC MVC&#xff1a;Model View Controller 的缩写&#xff0c;是一种软件架构模式&#xff0c;将软件系统分为模型、视图和控制器三个部分。 Mode&#xff08;模型&#xff09;&#xff1a;是应⽤程序中⽤于处理应⽤程序数据逻辑的部分。通常模型对象负责在数据库中存取数据…
阅读更多...
【通信中间件】Fdbus HelloWorld实例

【通信中间件】Fdbus HelloWorld实例

Fdbus实例教程 Fdbus简介 Fdbus 全称 Fast Distributed Bus&#xff08;高速分布式总线&#xff09;&#xff0c;提供IPCRPC功能。适用于多种OS&#xff1a; LinuxQNXAnroidOSWindow Fdbus本质是Socket&#xff0c;IPC基于Unix domain socket&#xff0c;RPC基于TCP。使用G…
阅读更多...
CAMEL：大型语言模型社会的“心智”探索沟通代理

CAMEL：大型语言模型社会的“心智”探索沟通代理

英文名称: CAMEL: Communicative Agents for “Mind” Exploration of Large Language Model Society 中文名称: CAMEL&#xff1a;大型语言模型社会的“心智”探索沟通代理 链接: https://arxiv.org/pdf/2303.17760.pdf 代码: https://github.com/camel-ai/camel 4.4K Star 作…
阅读更多...
Scala应用 —— JDBC的创建

Scala应用 —— JDBC的创建

文章目录 Scala应用 —— JDBC的创建前言一、JDBC的创建过程1.初始化连接1.1 配置驱动1.2 创建连接对象 2. 初始化执行器2.1 创建执行器对象2.2 初始化执行器参数 3. 执行操作并返回结果 二、Scala JDBC的基本设计思路1. 操作步骤设计2. 解决结果差异化3.实现jdbc方法并输出结果…
阅读更多...
53.HarmonyOS鸿蒙系统 App(ArkTS) socket套接字连接失败无效参数--invalid argument

53.HarmonyOS鸿蒙系统 App(ArkTS) socket套接字连接失败无效参数--invalid argument

ark ts socket套接字连接失败无效参数--invalid argument 绑定本机真实连接的WIFI的IP&#xff0c;不要绑定127.0.0.1
阅读更多...
云原生Kubernetes: K8S 1.29版本 部署Harbor

云原生Kubernetes: K8S 1.29版本 部署Harbor

目录 一、实验 1.环境 2.Linux 部署docker compose 3.证书秘钥配置 4.K8S 1.29版本 部署Harbor 5.K8S 1.29版本 使用Harbor 二、问题 1.docker 登录harbor失败 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 主机架构版本IP备注masterK8S master节点1.2…
阅读更多...
Debian操作系统的常用指令介绍

Debian操作系统的常用指令介绍

Debian是一个流行的Linux操作系统&#xff0c;以其稳定性和安全性而闻名。对于Debian用户来说&#xff0c;掌握一些基本的命令行指令是非常重要的&#xff0c;因为它们可以帮助你更高效地管理系统。在这篇博客中&#xff0c;我们将介绍一些在Debian系统中常用的指令及其功能。 …
阅读更多...
79、贪心-跳跃游戏II

79、贪心-跳跃游戏II

思路&#xff1a; 首先理解题意&#xff1a;从首位置跳最少多少次到达末尾。 第一种&#xff1a;使用递归&#xff0c;将所有跳转路径都获取到进行求出最小值。 第二种&#xff1a;使用动态规划&#xff0c;下一次最优取决上一次的最优解 第三针&#xff1a;贪心&#xff…
阅读更多...
区块链 | IPFS 工作原理入门

区块链 | IPFS 工作原理入门

&#x1f98a;原文&#xff1a;What is the InterPlanetary File System (IPFS), and how does it work? &#x1f98a;写在前面&#xff1a;本文属于搬运博客&#xff0c;自己留存学习。 1 去中心化互联网 尽管万维网是一个全球性的网络&#xff0c;但在数据存储方面&#…
阅读更多...
智能消费记账|基于SSM+vue的大学生智能消费记账系统(源码+数据库+文档)

智能消费记账|基于SSM+vue的大学生智能消费记账系统(源码+数据库+文档)

智能消费记账目录 基于SSMvue的大学生智能消费记账系统 一、前言 二、系统设计 三、系统功能设计 1 用户列表 2 预算信息管理 3 预算类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1…
阅读更多...
R语言的学习—5—多元数据直观表示

R语言的学习—5—多元数据直观表示

1、数据读取 ## 数据整理 d3.1read.xlsx(adstats.xlsx,d3.1,rowNamesT);d3.1 #读取adstats.xlsx表格d3.1数据 barplot(apply(d3.1,1,mean)) #按行做均值条形图 barplot(apply(d3.1,1,mean),las3) barplot(apply(d3.1,2,mean)) #按列做均值图条形图 barplot(a…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站