Java体系知识之ElementUI

最新推荐文章于 2023-05-19 11:27:37 发布
最新推荐文章于 2023-05-19 11:27:37 发布
阅读量357 收藏
点赞数
分类专栏： Java知识体系 前端 文章标签： elementui java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45464872/article/details/128111635
版权

Java体系知识之ElementUI

学习如何借助于ElementUI，帮助快速实现效果

1 技术简介

(1)网站快速成型工具
(2)Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
(3)使用步骤：
	A.引入文件：
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">			</script>
		<!-- 引入样式 -->
		<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>
	B.根据需求->找对应模板->复制粘贴->修改

2 常用组件(重点)

2.1 Basic

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入样式 -->
		<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>
		<style>
			.el-row {
     
				margin-bottom: 20px;

				&:last-child {
     
			  margin-bottom: 0;
				}
			}

			.el-col {
     
				border-radius: 4px;
			}

			.bg-purple-dark {
     
				background: #99a9bf;
			}

			.bg-purple {
     
				background: #d3dce6;
			}

			.bg-purple-light {
     
				background: #e5e9f2;
			}

			.grid-content {
     
				border-radius: 4px;
				min-height: 36px;
			}

			.row-bg {
     
				padding: 10px 0;
				background-color: #f9fafc;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<!-- Basic->Layout 布局 -->
			<el-row :gutter="30">
				<el-col :span="6">
					<div class="grid-content bg-purple">111</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light">222</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">333</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light">444</div>
				</el-col>
			</el-row>
			
			<!-- Basic->Button 按钮&Icon 图标 -->
			<el-row>
				<!-- icon：图标 -->
				<el-button type="success" 
                           icon="el-icon-star-on" 
                           circle disabled>
                    提交
                </el-button>
			</el-row>
			
			<!-- Basic->Link 文字链接 -->
			<el-link type="success">成功链接</el-link>
		</div>
	</body>
	<script>
		new Vue({
     
			el: "#root",
			data: {
     


			},
			methods: {
     


			},
			mounted() {
     


			}
		})
	</script>
</html>

2.2 Form

2.2.1 basic
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入样式 -->
		<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>
		<style>
			/* .el-input {
				width: 30%;
			} */
		</style>
	</head>
	<body>
		<div id="root">
			<!-- 
				Form->Radio 单选框：
					需要设置v-model绑定变量；
					选中意味着变量的值为相应 Radio label属性的值；
					label可以是String、Number或Boolean；
					disabled设置禁用；
			 -->
			<el-radio v-model="radio" label="1">男</el-radio>
			<el-radio v-model="radio" label="2" disabled>女</el-radio>
			<br>
			<br>

			<!-- 
				Form->Checkbox 多选框：
					checkbox-group元素能把多个 checkbox 管理为一组；
					需要在 Group 中使用v-model绑定Array类型的变量即可；
					disabled设置禁用；
			-->
			<el-checkbox-group v-model="checkList">
				<el-checkbox label="复选框 A"></el-checkbox>
				<el-checkbox label="复选框 B"></el-checkbox>
				<el-checkbox label="复选框 C"></el-checkbox>
				<el-checkbox label="禁用" disabled></el-checkbox>
				<el-checkbox label="选中且禁用" disabled></el-checkbox>
			</el-checkbox-group>
			<br>

			<!-- 
				Form->Input 输入框：
					disabled：禁用；
					clearable：清空；
					show-password：密码框；
					prefix-icon：input 组件首部增加显示图标
					suffix-icon：input 组件尾部增加显示图标
					type：textarea设置文本域
			-->
			<!-- <el-input v-model="input" placeholder="请输入内容" show-password></el-input> -->

			<!-- <div class="demo-input-suffix">
				属性方式：
				<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1">
				</el-input>
				<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2">
				</el-input>
			</div> -->

			<!-- 
				Form->DateTimePicker 日期时间选择器：
					value-format：可选，绑定值的格式。不指定则绑定值为 Date 对象，string类型
			 -->
			<div class="block">
				<span class="demonstration">默认</span>
				<!-- value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string -->
				<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>{
  {value1}}
			<br>

			<!-- 
				Form->Transfer 穿梭框：
					Transfer 的数据通过 data 属性传入;
					数据需要是一个对象数组；
					每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移；
					目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组；
					titles：设置列表标题文案
					button-texts：设置按钮文案
			 -->
			<el-transfer v-model="value" :data="transferData" :titles="['未选列表', '已选列表']" :button-texts="['到左边', '到右边']"></el-transfer>
		</div>
	</body>
	<script>
		new Vue({
     
			el: "#root",
			data: {
     
				radio:
最低0.47元/天 解锁文章
katahill
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
修改 element-ui 默认样式的两种方法
Sun_blog
12-24 3735
修改 element-ui 默认样式的方法有好几种，今天我来分享一下我最常用的方法； 首先，我们按F12找到我们要修改样式 DOM 对应的 class ; 然后，在原有的 style 标签后，新建一对style 标签并去掉 scoped 属性； 并在新建的style 标签中，修改element-ui 默认样式； 就像这样???? <style scoped lang="less"> // 在此处编写组件样式 </style> <style lang="less"> /
修改ElementUI样式的几种方式
诚的博客
12-21 3406
ElementUI是一款非常强大的前端UI组件库，它默认定义了很多美观的样式，但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式。下面总结了几种修改默认样式的方法。 1. 新建全局样式表 新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下： import "./assets/style/global.css"; 在
ELEMENT-UI如何引入css修改样式
qq_35545811的博客
04-22 3001
修改element-ui样式。使用id选择器，id选择器样式优先级高于类选择器。 <template> <el-container class="container"> <el-header class="header"> <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect"
没有人比我更懂HTMLCollection对象！
w_____w_____的博客
11-17 365
HTMLCollection document.getElementsByClassName() document.getElementsByTagName（） 两种两种获取元素节点的方法返回的类型为HTMLCollection HTMLCollection 是一个接口，即包含了一堆HTML元素的集合，可以当成一个包含 HTML 元素的数组。 HTMLCollection 有2个方法，一个属性 length返回 HTMLCollection 中元素的数量。 **item()**返回 HTMLCollecti
elementui el-table cell-style 给指定的列加属性
weixin_47906106的博客
10-20 3640
根据用户的状态(数字)转成英文。
Java后端知识体系
m0_73088370的博客
08-01 189
常见网络攻击局域网ARP泛洪、DDoS、TCPSYNFlood、XSS等。IP地址、MAC地址、OSI七层模型（或者TCP/IP五层模型）HTTPS安全相关的数字签名、数字证书、TLS。OpenFeign（可替代Feign）Gateway（可替代Zuul）了解Linux内核部分实现原理。带着问题去思考为什么这么做。JVM性能监控与故障定位。OS四大模块的理论知识。整合数据库（事务问题）TCP协议（最重要）...
Java+Vue+ElementUI宠物
最新发布
07-19
Java+Vue+ElementUI宠物
Java项目:购物商城管理系统(java+Vue+elementui+SSM+Mysql)
03-11
1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.硬件环境：windows 7/8/10 1...
Java项目:企业人事系统(java+SpringBoot+Vue+ElementUI+maven+mysql)
05-26
项目介绍 人事管理系统功能包括人事通讯,员工信息,人事考评,奖惩,培训管理,薪资管理,统计分析,和系统管理六大模块,对应人事工作基本流程:新员工入职档案建立,调动,辞职,员工信息的查询及工资管理等方面....
java知识结构图下载
05-02
java知识结构图
elementUI+vue+ssm+java
08-28
ElementUI、Vue.js、SSM（Spring、SpringMVC、MyBatis）和Java是Web开发中的关键组件，它们在构建高效、响应式和交互式的前端及后端应用时起着重要作用。以下是对这些技术的详细说明： 1. **ElementUI**：这是一个...
Java知识集
09-08
java学习的知识的总会，方便个人学习java。对初学者有极大的帮助。和方便已经学习完java的更好的复习。
Java项目:疫情物业系统(java+SSM+VUE+ElementUI+Mysql)
06-25
1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.硬件环境：windows 7/8/10 1...
JavaWeb《CSS》
weixin_44981126的博客
05-02 601
JavaWeb《CSS》
JavaWeb-VUE&Element&综合案例
qq_52699757的博客
05-19 703
JavaWeb-VUE&Element&综合案例
creatElement之后如何增加样式
风致岚珊的博客
06-21 4277
查阅了一些资料，现总结如下 createElement 指定样式和事件 var p = document.createElement("p"); p.setAttribute("style", "color:red;"); 但以上的代码会出现不兼容的情况，IE无法显示出来，即添加的样式无效，所以，使用以下的代码 var p = document.createElement("p
Vue框架Element UI安装环境搭建
热门推荐
前端视听
09-10 1万+
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element 1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值