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

Question

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

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

codepen

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

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

Answer 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);
  }
}