Question

我想在 v-progress-linear 元素（下面的代码示例）中插入文本。

有可能吗？如果是的话，该怎么办？

  <v-progress-linear
    background-color="pink lighten-3"
    color="pink lighten-1"
    value="15"
  >
  </v-progress-linear>

Answer 1

编辑：对不起！只是注意到您特别想将此用于线性而不是圆形。我在下面的笔记将处理圆形情况。也许具有讽刺意味的是，在为通函弄清楚了这一点之后，我遇到了本项目所使用的Vuetify Dialog Loader示例。用线性进度条作为模式窗口来显示文本效果很好。就是说，以下是我的原始答案，以防万一有人想在循环版本中添加文本。

原始帖子：您可以使用类似这样的方式以回旋的方式实现这一目标。对于上下文，我们在应用程序级别定义了progress元素，并在进行API调用时从子组件切换其显示。发生的要点是“ showWait”有一个应用程序级属性，该属性为空或包含文本“ Please wait ...”。该属性用于v-show和progress元素的值。

<v-progress-circular v-show="showWait" color="accent" size="70" width="7" value="showWait" indeterminate>
   {{ showWait }}
</v-progress-circular>

使用已定义的“ showWait”数据属性：

var app = new Vue({
el: '#app',
  data: {
    showWait: ''
  },
  methods: {
    ToggleWait() {
      if (this.showWait == '')
        this.showWait = 'Please wait...';
      else
        this.showWait = '';
    }
  }
});

Answer 2

v-progress-linear内部支持文本1.5。

<v-progress-linear value="50" height="20" background-color="pink lighten-3" color="pink lighten-1">
  <div>text inside</div>
</v-progress-linear>

这是一支使用当前测试版1.5 https://codepen.io/anon/pen/YBNxdW

的笔

是否可以在<v-progress-linear>（Vue.js / Vuetify）内插入文本

2 个答案: