【Element-UI】框架的使用总结

83 阅读 0 评论 55 点赞

我是靠谱客的博主友好毛豆，这篇文章主要介绍【Element-UI】框架的使用总结，现在分享给大家，希望可以做个参考。

Element是一套基于vue.js的组件库。
使用方式：①可以安装之后引用。②通过CDN方式引用。
我的使用：通过下载文件，在本地上引入js、css文件。
项目中使用的组件：
①button按钮：<el-button>默认按钮</el-button>
②icon图标：<i class="el-icon-search"></i>
③表单验证：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。（input框输入密码或是其他和HTML5中一样，只需要改变type即可）

复制代码

1
2
3
4
<el-form-item label="用户名" prop="name"> 
	<el-input v-model="ruleForm.name"></el-input> 
</el-form-item>

复制代码

1
2
3
④表单提交<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
⑤Dropdown下拉菜单：将动作或菜单折叠到下拉菜单中。

复制代码

1
2
3
4
5
6
<el-dropdown-menu slot="dropdown">
         <el-dropdown-item>发布文章</el-dropdown-item>
         <el-dropdown-item>我的文章</el-dropdown-item>
	<el-dropdown-item>全部文章</el-dropdown-item>
</el-dropdown-menu>

复制代码

1
2
⑥Pagination分页：当数据量过多时，使用分页分解数据。

复制代码

1
2
3
4
5
6
7
8
9
10
11
<el-pagination
Background
@size-change="handleSizeChange"
 @current-change="handleCurrentChange"
 :current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]" 
:page-size="100" 
layout="sizes, prev, pager, next, jumper"
 :total="1000">
</el-pagination>

问题：无法完全兼容，和vue.js结合起来时，无法实现输入框中的动态更新。
解决方法：v-model要和<input/>搭配起来才能实现实时更新。
element-ui 中dialog居中的两种方式：

①

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.el-dialog{
display: flex;
flex-direction: column;
margin:0 !important;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.el-dialog .el-dialog__body{
flex:1;
overflow: auto;
}

②使用绝对定位： left top各50% ， css3的 transform: translate(-50%, -50%);

复制代码

1
2
3
4
5
6
7
8
9
10
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

7.Layout布局
element-ui借用了bootstrap框架的思想，使用了栅格布局。

8.Steps 步骤条
设置active属性，接受一个Number 来表明index从0开始。
若需定宽的步骤条，需设置space属性，它接受Number，单位为px，如不设置，则为自适应。
设置finish-status属性改变已完成步骤的状态。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<el-steps :active="active" finish-status="success">
  <el-step title="第一步"></el-step>
  <el-step title="第二步"></el-step>
  <el-step title="第三步"></el-step>
</el-steps>
<el-button style="margin-top: 10px;" @click="next">下一步</el-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

9.Element的Carousel 走马灯，就是我们常说的轮播图。
可以设置切换箭头的显示时机：通过arrow属性实现
默认情况下，左右切换只有在鼠标到轮播图上时才会显示；若arrow的属性值设置为always，则会一直显示；设置为never，则会一直隐藏。

10.文字超链接 link

复制代码

1
2
3
4
<div>
  <el-link href="#" target="_blank">默认链接</el-link>
</div>

禁用状态——添加 disabled属性即可。
下划线——默认有下划线，隐藏下划线 :underline=“false”。

复制代码

1
2
<el-link :underline="false">无下划线</el-link>

Input回车导致页面刷新的问题（阻止表单默认提交）
在上附加一个事件：@submit.native.prevent，

复制代码

1
2
<el-form  @submit.native.prevent></el-form>

12.输入框enter提交请求

复制代码

1
2
<el-input @keyup.enter.native="query()"></el-input>

13.表单重置

复制代码

1
2
3
4
5
6
<el-form  @ref="demoForm"></el-form>
<script>
    this.$refs.demoForm.resetFields();        // 重置
    this.$refs.demoForm.clearValidate();       // 清空校验
</script>