Button不应使用 .el-button+.el-button {margin-left: 10px;}

打开官方手册页面，如果我们将浏览器窗口缩小，会看到这种景象：

image.png

只要折行就一定对不齐，很荒谬，是不是？

所以现在有2种办法。

方法1，改为设置margin-right：

.el-button+.el-button {
  margin-left: 0 !important;
}
.el-button {
  margin-right: 10px;
}

这样就可以了，如果考虑最后一个Button不要有margin-right，则可以：

.el-button+.el-button {
  margin-left: 0 !important;
}
.el-button {
  margin-right: 10px;
}
.el-button:last-child {
  margin-right: 0;
}

这么做还有一个问题，就是非倒数第一行的末尾Button会有margin-right空白，怎么办呢？

方法2，letter-spacing大法

如果你非常在意这个问题，你可以用方法2，它的原理是利用Button的inline-block的特点，控制它的letter-spacing：

.el-button+.el-button {
  margin-left: 0 !important;
}
.容器class {
  letter-spacing: 10px;
}

如果想无脑一些，可以规定一个容器class，比如：

这个ls-10就是letter-spacing: 10px的简写

再加上全局样式：

.ls-10 {
  letter-spacing: 10px;
}

凡是有可能折行的Button，就一律用这个

容器包裹，这样你不需要针对每个场景的容器class去专门写代码去控制，比如表格中Button的父元素一般是.cell，而给.cell设置letter-spacing: 10px;会误伤其他单元格，此时内部加一个中间件容器就没问题了。

如果有机会给父元素加.ls-10，那么连中间件容器都可以省了。

Message高度超出页面却无法滚动如何解决？

根据官方手册，Message不应该放复杂的内容，假如你放了很多内容，也依然喜欢用Message，会发现Message高度超出页面却无法滚动，怎办？这样：

.el-message-box__wrapper {
  overflow: auto;
}

MessageBox如何阻止弹出重复内容？

某一刻，你点击页面之后，如果网络异常，会弹出多个提示，内容一样，都是“网络错误”什么的。这时候怎么阻止弹出相同的内容？

let _latestMsg = '';
Vue.prototype.msgAlert = function (msg) {
  if (_latestMsg !== msg) {
    _latestMsg = msg;
    Message.alert(msg, '系统提示', {
      confirmButtonText: '确定',
      type: 'warning',
      onClose() {
        _latestMsg = '';
      }
    });
  }
}

Progress动画

本来我查了查手册，以为Progress并没有动画，但是看了看它的示例，当percentage有变化的时候的确是有动画的。所以现在问题就是，如何让percentage变化，从0变成1、2、3……一直到真正的百分比值。

image.png

思路：

这次要利用window.requestAnimationFrame()。它是个啥不解释，请另外查阅资料，我现在假设你掌握了这个方法。
我的计划是，让每个进度条初始值都是0，每1/60秒加1，这样如果进度条最终值是60，那么需要1秒，如果最终值是100，需要1秒半多。从视觉上说，这是比较合适的。
说句题外话，如果你觉得不合适，比如动画太快，可以将每次加1改成加0.5，不过浮点运算要注意精度。
进度条的百分比值，需要一个计算方法，很简单，看代码，不解释。

export default {
  data() {
    return {
      typeList: [
        {
          text: '待处理',
          color:'#409EFF',
        },
        {
          text: '处理中',
          color:'#67c23a',
        },
        {
          text: '已完成',
          color:'#e6a23c',
        },
        {
          text: '回访单',
          color:'#f56c6c',
        },
      ],
      list: [
        {
          number: 141,
          percentage: 0
        },
        {
          number: 341,
          percentage: 0
        },
        {
          number: 11,
          percentage: 0
        },
        {
          number: 190,
          percentage: 0
        },
      ]
    }
  },
  created() {
    const maxNumber = Math.max.apply(null, this.list.map(v=>v.number));
    function step(v, final) {
      if (v.percentage < final) {
        if (final - v.percentage > 1) {
          v.percentage += 1;
          window.requestAnimationFrame(() => {step(v, final)});
        } else {
          v.percentage = final;
        }
      }
    }
    this.list.forEach(v => {
      const final = v.number * 100 / maxNumber;
      window.requestAnimationFrame(() => {step(v, final)});
    });
  },
}

小问题：

这套代码的效果是，最短的那个最先动画，然后是第二短的，然后是第三短的，最后是最长的进度条动，并不是一齐开始。我不知道这是Element UI的原因还是Vue渲染机制的原因。不过好在凑合能用，先这样吧。

利用展示结果数据时，调整的margin-bottom

除了展示输入表单，还可以展示结果数据，假设整个都用来展示结果数据，此时，因为不必考虑提示Error，所以每一行的高度不必这么大，事实上0就可以了，那么怎么简单调整margin-bottom？

解决方案：

设置一个全局class：

.result-form.el-form .el-form-item {
  margin-bottom: 0 !important;
}

在需要的上加上class="result-form"即可。

如果依然觉得line-height比较高，可以给加上size="small"或者size="mini"。

Dialog的"destroy-on-close"无效？

我不知道你是不是也遇到过这个问题，有这样一个场景：

A按钮让Dialog打开，显示A图片，B按钮让Dialog打开，显示B图片。两者复用Dialog。

由A打开的Dialog之后关闭，再由B打开，你会发现，A图片还在，而且要停顿半秒才会切换成B图片。

我的无效方法1：给Dialog加上close事件，将数据清空，下次打开的时候重新赋值。

无效表现：这次更惨，要等3秒钟才会切换图片。

我的无效方法2：给Dialog加destroy-on-close。

无效表现：就像没加一样。

最后采取的有效办法：

给Dialog加v-if，跟:visible.sync=""使用同样的变量，问题解决。

MessageBox的alert如何回车、空格执行“确定”？

MessageBox的alert有一个让人纠结的地方是，alert弹出的消息框，敲回车是没反应的，无法关闭。我看了看手册，没有哪个设置是管回车的事的，但是有一个接近真相的叫closeOnPressEscape，负责是否可通过按下 ESC 键关闭 MessageBox，索性试试，设置为true，结果，回车、空格也一并管用了。

但是，如果焦点还在下层输入框上，而且绑定了@keyup.enter.native="handleLogin"，那么会重复触发一次handleLogin，然后又执行一遍alert，这肯定不行，解决方案是在handleLogin的第一句写上：

event.target.blur();

Element UI各种使用问题汇总（小型组件篇）