如何使用 Vue.js 和 Vuetify 使特定行闪烁 2 次？

Question

创建记录后，如果 API 返回 200 OK，我会显示一条绿色警报消息，否则显示红色消息。现在，它工作得很好，我使用了 Vuex + Vuetify Snackbar。

this.notifcationData = {
    color: 'green',
    text: campaign.name + ' - deleted successfully !'
}



<v-snackbar timeout="1000" v-model="notification" absolute top :color="notifcationData.color" outlined right>
    <strong>
        {{ notifcationData.text }}
    </strong>
</v-snackbar>

我想将用户体验再提高一个档次。我想使该特定行闪烁 1 秒（2 次）。

我知道我可以访问campaign.name

我如何在 Vue.js 中实现这一目标？

Answer 1

你可以使用item-classpropv-data-table来达到效果。

\n

根据该道具的DOC，我们有：

\n

\n

包含 item\xe2\x80\x99s 行类或函数的所提供项目的属性，该函数将项目作为参数并返回相应行的类

\n

\n

因此您可以向此 prop 传递一个函数，该函数根据满足的条件返回一个类，例如blink应用于指定的行。

\n

这是该功能的演示：（请Full page运行下面的代码片段后点击以清楚地看到效果）

\n

\r\n

\r\n

Vue.config.productionTip = false;\nVue.config.devtools = false;\n\nnew Vue({\n  el: \'#app\',\n  vuetify: new Vuetify(),\n  data() {\n    return {\n      rowToBlink: null,\n      items: [{\n          id: 1,\n          name: \'Frozen Yogurt\',\n          calories: 159,\n        },\n        {\n          id: 2,\n          name: \'Ice cream sandwich\',\n          calories: 237,\n        },\n        {\n          id: 3,\n          name: \'Eclair\',\n          calories: 262,\n        },\n        {\n          id: 4,\n          name: \'Cupcake\',\n          calories: 305,\n        },\n      ],\n      headers: [{\n          text: \'Dessert\',\n          value: \'name\',\n        },\n        {\n          text: \'Calories\',\n          value: \'calories\'\n        },\n      ],\n    };\n  },\n  methods: {\n    blink(item) {\n      if (item.id === this.rowToBlink) return \'blink\';\n      return \'\';\n    }\n  },\n});

\r\n

.blink {\n  animation: blinking ease-out 1s 2;\n}\n\n@keyframes blinking {\n  0% {\n    background-color: #06c3d1;\n  }\n  100% {\n    background-color: #fff;\n  }\n}

\r\n

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">\n<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">\n<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">\n<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>\n<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>\n\n<div id="app">\n  <v-app>\n    <v-container>\n      <v-row class="pa-5">\n        <v-autocomplete v-model="rowToBlink" outlined label="select row to blink" :items="items" item-text="name" item-value="id"></v-text-field>\n      </v-row>\n      <v-row class="px-5">\n        <v-data-table hide-default-footer :headers="headers" :items="items" :item-class="blink"></v-data-table>\n      </v-row>\n    </v-container>\n  </v-app>\n</div>

\r\n

\r\n

\r\n

\n

在本示例中，我将数据表项数组绑定到一个选择框，您可以在其中选择所需的项，并将一个调用blink到数据表的item-classprop 的方法传递给该选择框。

\n

该函数的作用是检查选择框中所选项目的 id 是否与数据表的项目 id 匹配，然后为表中的指定项目（行）返回一个名为“blink”的类，否则它不返回类名。

\n

闪烁效果是在 css 类中处理的，.blink您可以在其中使用 css 功能（持续时间、延迟、缓动功能等）来实现所需的外观。

\n

关于如何在实际应用程序情况中实现此功能的一些想法是在 api 调用返回后将活动名称存储在变量中，如下所示：

\n

async apiCall(someArg, campaignName) {\n const res = await apiFn(someArg);\n // store the campaign name in a variable in data object if the res is what you are looking for\n if (res) this.campaignName = campaignName;\n}\n

\n

那么你的item-class函数将是这样的：

\n

blink(item) {\n if (item.name === this.campaignName) return \'blink\';\n return \'\';\n}\n

\n