[iView]重写组件效果-以Badge组件为例

为什么要重写效果?

看完了iView源码，它的组件生成是一个立即JS函数从工厂模式中直接导出的，这就使得重载(主要是添加)某些组件的显示效果的写法比较不好动态处理。
官方文档在>自定义主题<里给出的是利用less重写变量覆盖原有的”i-vu-“的class效果，但如果要增添某种效果，就很难实现。

以Badge组件为例，实现processing的显示效果

在>Badge:状态点<中，对于status="processing"，其默认色值只有#2d8cf0，也就是:
这里写图片描述
而显示效果为：

而我如果想让上面的status=”Success”及”Error”同时带有这个光圈散发的CSS动画，在不修改/覆盖全局iView样式不做非常大的工作的前提下，如何动态添加这个效果？现已知:

使用给<Badge> 添加class="myProcessing"的方式，将会导致动画错位，修改该错位需要花费大量时间。
Vue的组件复用/混入/注射等内容由于iView的工厂模式，使得重载iView组件相当不便。

一个简单的实现方法

这不是最推荐、最科学的方法，但一定是最简单也最快速的方法。在一定情况下，当不考虑系统全局变量被污染时（事实上也可以通过Custom的命名来解决这个问题）以及相关开发模式和UI设计规范的情况下，只为了实现某个临时效果，可一通过简单编辑iView.js源码的方式静态注入所需要的样式。

#修改源代码

查看iView中的源码：

status: {
    validator: function validator(value) {
    // 在此处添加你的样式，例如"successprocessing"
    // @Shenpibaipao https://blog.csdn.net/Shenpibaipao
    return (0, _assist.oneOf)(value, ['success', 'processing', 'default', 'error', 'warning']); 
    }
},

如果是iView.min.js，Ctrl+F一下"Badge"也很容易找到相关的内容。

#添加样式

查看iView.css，可以很容易找到有关Badge的相关样式，接下来要做的就是在<style>中增加刚刚加入的那个successprocessing的样式了：

    .ivu-badge-status-successprocessing{
        background-color:#19be6b !important;/*注意修改色值，下同*/
        position:relative
    }
    .ivu-badge-status-successprocessing:after{
        position:absolute;top:0;left:0;
        width:100%;height:100%;border-radius:50%;
        border:1px solid #19be6b;content:'';
        -webkit-animation:aniStatusProcessing 1.2s infinite ease-in-out;
        animation:aniStatusProcessing 1.2s infinite ease-in-out
    }

最终效果

这里写图片描述
可以看到，红点和绿点在不影响原有显示效果的情况下，动态添加了原本status="processing"的动画效果。