ui框架 element ui
当我们使用element ui表格的时候,为了让用户区分是否在请求中。我们通常会采取增加loading的做法。例如这样:
假如此时我不想要这个图标,(我觉得太丑了。)甚至element ui 的icon我都不喜欢。那么应该怎么换呢?
ui框架 ant design vue
让我们先看看蚂蚁金服的loading效果:
我觉得好看!!!
实现这个效果,有很多种方法。 比如自己再写个布局,在表格上面套一层 写上loading效果即可。
但是我想用element ui 现成的v-loading
在表格中使用loading的方法如下
js
<el-table
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
</el-table>
这个不难,大家很容易就学会了。此时效果是:
接下来开始我们改造之路;
第一步:我们将蚂蚁金服的css样式拿到element ui 封装表格的文件
css
/deep/ .ant-loading {
position: relative;
display: inline-block;
font-size: 32px;
width: 1em;
height: 1em;
transform: rotateZ(45deg);
transition: transform .3s cubic-bezier(.78, .14, .15, .86);
animation: Rotate45 1.2s infinite linear;
i{
height: 14px;
width: 14px;
background-color: #0AA1E5;
display: block;
position: absolute;
border-radius: 100%;
transform: scale(.75);
transform-origin: 50% 50%;
opacity: .3;
animation: myAnimationMove 1s infinite linear alternate;
}
:nth-child(1) {
top: 0;
left: 0;
}
:nth-child(2) {
top: 0;
right: 0;
animation-delay: .4s;
}
:nth-child(3) {
bottom: 0;
right: 0;
animation-delay: .8s;
}
:nth-child(4) {
left: 0;
bottom: 0;
animation-delay: 1.2s;
}
@keyframes myAnimationMove {
to {
opacity: 1;
}
}
@keyframes Rotate45 {
to {
transform: rotate(405deg);
}
}
}
接下来修改element ui table 的配置项
ini
element-loading-spinner="el-demo"
修改为一个不存在的样式名,覆盖掉原有的loading
然后增加一个js方法
ini
addCustomLoading () {
setTimeout(() => {
const loadingSpinner = document.querySelector('.el-loading-spinner');
if (loadingSpinner) {
const antLoading = document.createElement('span')
antLoading.className = 'ant-loading'
for (let i = 0; i < 4; i++) {
const newI = document.createElement('i');
antLoading.appendChild(newI);
}
loadingSpinner.appendChild(antLoading)
}
},100)
},
在mounted 引用
javascript
mounted() {
this.addCustomLoading();
},
此时效果是:
到此我们就实现了在element ui table中 用上了ant的loading。