创建记录后，如果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中如何实现呢？
您可以在您的 v-data-table 中使用item-class prop来实现这种效果。
根据文档说明，这个prop具有以下属性:
提供项目上包含项目行类或将项目作为参数并返回对应行的类的函数的属性
因此，您可以传递一个函数给这个prop，根据满足的条件返回一个类似于blink的类，以应用于指定的行。
这里是该功能的演示:(运行下面的代码片段后，请单击全屏，以便清楚地查看效果)
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
rowToBlink: null,
items: [{
id: 1,
name: 'Frozen Yogurt',
calories: 159,
},
{
id: 2,
name: 'Ice cream sandwich',
calories: 237,
},
{
id: 3,
name: 'Eclair',
calories: 262,
},
{
id: 4,
name: 'Cupcake',
calories: 305,
},
],
headers: [{
text: 'Dessert',
value: 'name',
},
{
text: 'Calories',
value: 'calories'
},
],
};
},
methods: {
blink(item) {
if (item.id === this.rowToBlink) return 'blink';
return '';
}
},
});.blink {
animation: blinking ease-out 1s 2;
}
@keyframes blinking {
0% {
background-color: #06c3d1;
}
100% {
background-color: #fff;
}
}<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row class="pa-5">
<v-autocomplete v-model="rowToBlink" outlined label="select row to blink" :items="items" item-text="name" item-value="id"></v-text-field>
</v-row>
<v-row class="px-5">
<v-data-table hide-default-footer :headers="headers" :items="items" :item-class="blink"></v-data-table>
</v-row>
</v-container>
</v-app>
</div>为了举例说明，我将数据表项数组绑定到一个选择框中，您可以从中选择所需的项，并将名为 blink 的方法传递给数据表的 item-class 属性。
该函数的作用是检查选择框中选定的项目 ID 是否与数据表中的项目 ID 匹配，然后为指定的表格中的项目（行）返回名为“blink”的类，否则返回没有类名。
闪烁效果在 .blink CSS 类中处理，您可以使用 CSS 功能（时间持续时间、延迟、缓动函数等）来实现所需的外观。
在实际应用程序情况下，一些实现思路是在 API 调用返回后将广告系列名称存储在变量中，例如：
async apiCall(someArg, campaignName) {
const res = await apiFn(someArg);
// store the campaign name in a variable in data object if the res is what you are looking for
if (res) this.campaignName = campaignName;
}
那么你的item-class函数应该长这个样子：
blink(item) {
if (item.name === this.campaignName) return 'blink';
return '';
}
你可以使用过渡来实现这一点。
在vue.js中，实际上有几种可供选择的过渡效果，我的选择是CSS过渡或动画。
使用Vue.js的过渡系统，当元素插入或从DOM中移除时，您可以应用自动过渡效果。Vue.js会在适当的时间自动添加/删除CSS类，以触发CSS过渡或动画，并且您还可以提供JavaScript钩子函数，在过渡期间执行自定义DOM操作。
示例：
在您的元素上设置要使用的过渡或您尚未在CSS中创建的新过渡名称。
transition="blink"
.blink-transition {
transition: all 1s ease;
background-color: green;
}
.blink-enter, .blink-leave {
background-color: white;
}
就是这样。上面的代码可以使一个元素闪烁一秒钟。
我的示例可能不适用于您想要的闪烁效果，此时我会使用 CSS keyframes。文档中提供了一个示例。
更新：
Vue.js 现在有了一个过渡组件。
现在不再使用 transition 参数，而是通过包装要动画显示的内容来使用 transition 元素。
<transition name="blink"> </transition>