时间戳

首页 > 解决方案 > 扩展 Vuetify 按钮以在保存后显示成功

javascript - 扩展 Vuetify 按钮以在保存后显示成功

问题描述

我正在尝试扩展 Vuetify v-btn，以便在它的loading道具离开后true -> false我可以临时更改按钮。

该watch函数被调用，但它没有换出slot文本Saved!。

<template>
  <v-btn v-bind="{ ...$attrs, disabled: $attrs.disabled || success }">
    <slot v-if="!success"></slot>
    <template v-else><v-icon>check</v-icon> Saved!</template>
  </v-btn>
</template>
<script lang="ts">
  import Vue from "vue";
  export default Vue.extend({
    name: "SaveButton",
    data: () => ({
      success: false,
    }),
    watch: {
      loading(loading, wasLoading) {
        if (!loading && wasLoading) {
          this.success = true;
          setTimeout(() => {
            this.success = false;
          }, 300e3);
        }
      },
    },
  });
</script>

标签： javascriptvuetify.js

解决方案

我不完全确定我得到了你想要做的事情。但是此代码有效：

<template>
  <v-btn>
    <slot v-if="!success" />
    <template v-else>
      <v-icon>mdi-check</v-icon>Saved
    </template>
  </v-btn>
</template>

<script lang="ts">
  import { VBtn } from 'vuetify/lib'

  export default {
    name: 'SaveButton',
    extends: VBtn,
    data: () => ({
      success: false,
    }),
    watch: {
      loading (loading, wasLoading) {
        if (!loading && wasLoading) {
          this.success = true
          setTimeout(() => {
            this.success = false
          }, 300e3)
        }
      },
    },
  }
</script>

声明

  1. 如果您使用的是 SFC，则使用 extends 属性（您可以在名称下看到它）Vue API 文档
  2. 您需要在检查之前放置 mdi-
  3. 如果你想扩展它，你需要导入 VBtn 组件

推荐阅读