vue.js 如何使按钮是可见的整个时间，而不是只在点击工作？

qyzbxkaa 于 2023-03-09 发布在 Vue.js

关注(0)|答案(2)|浏览(233)

<v-card :style="{ textAlign: 'left' }" class="basic-card pa-6" 
    :class="{ 'small-padding': !$vuetify.breakpoint.xl }"
      elevation="0" flat :height="windowHeight - 104 + 'px'" outlined align="start" justify="start">
        <v-row class="mt-0">
            <v-col cols="12" class="pt-0">
                <v-tabs v-model="eventTabs" center-active class="mx-0" grow>
                    <v-tab v-for="(tab, index) in eventAssets" :key="index"
                       :class="{ 'mr-1': index < (eventAssets.length - 1) }" class="pa-0 text-none">
                        <v-badge v-if="tab == 'Tasks' && uncompletedTasksNumber > 0" color="error"
                            :content="uncompletedTasksNumber" tile>
                            {{ tab }}
                        </v-badge>
                        <div v-else>
                            {{ tab }}
                        </div>
                    </v-tab>
                </v-tabs>
           </v-col>
       </v-row>
</v-card>

我尝试了一些变化，但没有结果，整个时间，如果你想看到计数器（V徽章），你需要点击按钮“任务”这不是我想要的。我们希望看到它没有任何行动。
在单击之前，当我们希望看到计数器时：

当我点击“任务”按钮时

vue.js

来源：https://stackoverflow.com/questions/75666545/how-to-make-button-to-be-visible-whole-time-and-not-to-work-only-on-click

2条答案

按热度按时间

agxfikkp1#

要使计数器标记始终可见而无需单击，可以删除v标记组件，并使用一个简单的span元素和一个应用所需样式的类。

<v-tabs v-model="eventTabs" center-active class="mx-0" grow>
  <v-tab v-for="(tab, index) in eventAssets" :key="index"
     :class="{ 'mr-1': index < (eventAssets.length - 1) }" class="pa-0 text-none">
      <span v-if="tab == 'Tasks' && uncompletedTasksNumber > 0" class="badge badge-danger">
          {{ tab }} <span class="badge-counter">{{ uncompletedTasksNumber }}</span>
      </span>
      <div v-else>
          {{ tab }}
      </div>
  </v-tab>
</v-tabs>

我们使用一个带有类标记的span元素来添加红色背景色，在文本周围添加边框，并使用另一个类标记计数器来对计数器编号应用样式。计数器显示在带有{{ uncompletedTasksNumber }}表达式的span元素内，该表达式将显示未完成任务的实际数量。

赞(0）回复(0）举报 2023-03-09

axkjgtzd2#

这就是你要找的答案？只要把未完成的任务数加到数组中，当循环使用v-if来做检查时。Example Sandbox

<span v-for="item in eventAssets" :key="item">
  <div style="display:inline">{{item.Type}} <span class="w3-badge w3-margin-left" v-if="item.UncompletedTaskNumber > 0">{{item.UncompletedTaskNumber}}</span></div>
</span>

 eventAssets:[
    {Type:'File', UncompletedTaskNumber:0},
    {Type:'Contact'},
    {Type:'Statement'},
    {Type:'Notes'},
    {Type:'Tasks', UncompletedTaskNumber:3},
  ]

赞(0）回复(0）举报 2023-03-09

我来回答

vue.js 如何使按钮是可见的整个时间，而不是只在点击工作？

2条答案

相关问题

热门标签

最新问答