Element自定义Loading组件/v-loading样式和图标（结合iconfont）

微信小程序

近日接到这样的开发需求。
自定义Element的Loading组件的图标和样式。
这里我采用了结合iconfont的方式，直接用iconfont里面的图标来替换Element的Loading组件里默认的图标。
效果如下：

这里就把实现过程说说吧：

1、首先是让美工UI设计好iconfont并生成导入iconfont的相关代码，如下：

1. @font-face {
   
2.   font-family: "iconfont"; /* project id 2XXXXX3 */
   
3.   src: url("//at.alicdn.com/t/font_2******3_wcy8mz6cm0m.eot");
   
4.   src: url("//at.alicdn.com/t/font_2******3_wcy8mz6cm0m.eot?#iefix")
   
5.       format("embedded-opentype"),
   
6.     url("//at.alicdn.com/t/font_2******3_wcy8mz6cm0m.woff2") format("woff2"),
   
7.     url("//at.alicdn.com/t/font_2******3_wcy8mz6cm0m.woff") format("woff"),
   
8.     url("//at.alicdn.com/t/font_2******3_wcy8mz6cm0m.ttf") format("truetype"),
   
9.     url("//at.alicdn.com/t/font_2******3_wcy8mz6cm0m.svg#iconfont") format("svg");
   
10. }
    
11. .iconfont {
    
12.   font-family: "iconfont" !important;
    
13.   font-size: 16px;
    
14.   font-style: normal;
    
15.   -webkit-font-smoothing: antialiased;
    
16.   -moz-osx-font-smoothing: grayscale;
    
17. }
    
18. .icon-loading:before {
    
19.   content: "\e600";
    
20. }

复制代码

2、加入选择的动画样式代码iconfont-loading如下：

1. .iconfont-loading {
   
2.   animation-duration: 2s;
   
3.   animation-timing-function: linear;
   
4.   animation-delay: 0s;
   
5.   animation-iteration-count: infinite;
   
6.   animation-direction: normal;
   
7.   animation-fill-mode: none;
   
8.   animation-play-state: running;
   
9.   animation-name: rotating;
   
10.   display: inline-block;
    
11. }

复制代码

3、保存并导入这些样式代码到项目中
比如我是新建了个iconfont.scss
然后在需要使用的页面@import这个scss
4、正式使用：
比如以el-table为例，加入数据载入动画效果，开启v-loading，代码如下：

1. ...
   
2. el-table v-loading="loading" element-loading-text="正在加载，请稍候.." element-loading-spinner="iconfont icon-loading iconfont-loading load-font-class"
   
3. ...
   

复制代码

上面的样式除了load-font-class不在iconfont.scss里面，其他的都在。其中load-font-class样式是修改提示的字体大小的，代码如下：

1. .load-font-class {
   
2.   font-size: 40px;
   
3. }

复制代码