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">
<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>
<el-row>
<el-button type="success"
icon="el-icon-star-on"
circle disabled>
提交
</el-button>
</el-row>
<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>
</style>
</head>
<body>
<div id="root">
<el-radio v-model="radio" label="1">男</el-radio>
<el-radio v-model="radio" label="2" disabled>女</el-radio>
<br>
<br>
<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>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>{
{value1}}
<br>
<el-transfer v-model="value" :data="transferData" :titles="['未选列表', '已选列表']" :button-texts="['到左边', '到右边']"></el-transfer>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
radio: