带有内嵌文本的加载器的 Vuetify 按钮

【问题标题】：Vuetify button with loader with text inline带有内嵌文本的加载器的 Vuetify 按钮
【发布时间】：2018-12-29 06:29:22
【问题描述】：

我正在尝试在按钮内使用加载器以及文本。我已经修改了 vuetify 文档中的示例：

 <span slot="loader">
   <v-icon light class="custom-loader">cached</v-icon> 
    Loading...
 </span>

codepen

点击事件按钮文本更改并出现加载程序。但是按钮的内容不是内联的。

请告知如何使按钮内容内联且独立于文本宽度？

【问题讨论】：

你需要吗？通过删除 display: flex; 内的 .custom-loader?
@Sphinx 是的，它使内容内联，但仅适用于按钮内的短文本。我需要在插槽中放置比初始按钮文本更长的文本

标签： css vue.js vuetify.js

【解决方案1】：

演示：https://codepen.io/anon/pen/ejgEoO

我为 vuetify 使用的类添加了样式：.v-btn__loading 和 .v-btn--loader .v-btn__content：所以你的 CSS 变成了：

.v-btn__loading {
  position: relative;
}

.v-btn--loader .v-btn__content {
  display: none;
}

.custom-loader {
  animation: loader 1s infinite;
}

@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

【讨论】：