如何在 Vuetify 中持续一段时间后创建淡入淡出的警报？
How to create an alert the fade after a duration in Vuetify?
如何创建 Alert in Vuetify that fade after specified number of seconds, similarly to the alerts in Bootstrap Vue。我试过这个：
<template>
<transition name="fade">
<v-alert v-show="visible" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</v-alert>
</transition>
</template>
<script>
export default {
inheritAttrs: true,
data() {
return {
visible: true,
timer: null
};
},
props: {
duration: {
required: true,
type: Number
}
},
methods: {
fade() {
let value = parseInt(Math.max(this.duration, 0));
if (value != 0)
this.timer = setTimeout(() => (this.visible = false), 1000 * value);
}
},
mounted() {
this.fade();
}
};
</script>
在其他组件中的用法：
<vt-alert
v-if="hasMessage()"
:type="message.type"
:duration="message.duration"
>{{message.body}}</vt-alert>
hasMessage 是实用函数，用于检查消息是否已设置。
但这没有用。更多详细信息 here、
不需要那么多代码和自定义想法 :) 使用vuetify API（更少的代码=更容易维护）：
https://vuetifyjs.com/en/components/alerts/#api
一个。 Show/Hide
警报获取值（false => 隐藏。True => 显示）。
<v-alert :value="alert">
data () {
return {
alert: false,
}
将 alert 切换为 true/false 点击、悬停、计时器或您想要的任何逻辑。
文档工具示例： https://vuetifyjs.com/en/components/alerts/#transition
乙。过渡道具
使用你想要的任何内置过渡。列出她：
https://vuetifyjs.com/en/styles/transitions/#motion
<v-alert transition="fade-transition">
A+B：基本 "hello world" 示例
点击显示警报 & slide-y-transition 3 秒后退出。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
alert: false,
}
},
// define methods under the `methods` object
methods: {
hide_alert: function (event) {
console.log('Hide')
// `event` is the native DOM event
window.setInterval(() => {
this.alert = false;
console.log("hide alert after 3 seconds");
}, 3000)
}
},
mounted: function () {
if(alert){
this.hide_alert();
}
}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<div>
<div class="text-center mb-4">
<v-btn
color="primary"
@click="alert = true"
>
Show alert? {{alert}}
</v-btn>
</div>
<v-alert
:value="alert"
color="pink"
dark
border="top"
icon="mdi-home"
transition="slide-y-transition"
>
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-alert>
</div>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
附加功能示例
当警报可见时显示计时器 (3..2..1) + 在单击按钮时切换警报。
关于 dismissible 最好的想法是创建一个自定义 X 按钮（并使用相同的 show/hide 功能）***直到 API 提供更多选项与此功能相关（Styling/position 等）。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
message: "show alert? - ",
alert: false,
countDown: {
timer: "3",
show: false
},
}
},
// define methods under the `methods` object
methods: {
show_alert_and_fade: function(){
/* toogle alert on click */
this.alert = !this.alert;
/* hide alert after 3 seconds */
this.resetTimer();
this.countDownTimer();
/* If alert visible - setTimeout() => only executed once */
if(this.alert == true){
myTimer = window.setTimeout(() => {
this.alert = false;
console.log("Case 1: Time ends - hide alert");
}, 3000);
}else{
/* If alert hidden - clear setTimeout */
console.log("Case 2: User Hide alert by click - stop setTimeout");
clearTimeout(myTimer);
this.resetTimer();
}
},
dismissible_close (value) {
this.alert = value;
this.resetTimer();
},
/* recursion function - run time if remain time and alert if visible */
countDownTimer() {
if(this.countDown.timer > 0 && this.alert) {
this.countDown.show = true;
var myTimer = setTimeout(() => {
this.countDown.timer -= 1;
this.countDownTimer();
}, 1000)
}
else{
/* do something */
this.resetTimer();
}
},
resetTimer(){
this.countDown.timer = 3;
},
hideTimer(){
this.countDown.show = false;
}
}
})
body{
padding: 10px;
}
#close_btn{
position: absolute;
right: 6px;
top: 12px;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<div>
<div class="text-center mb-4">
<!-- remove countDown for demo only -->
<v-btn
v-bind:color="alert ? 'success' : 'error'"
@click="show_alert_and_fade"
v-bind:class="{ active: alert }"
>
{{message}} <b> {{alert}}</b>
</v-btn>
<v-badge v-if="alert"
:content="countDown.timer"
:value="countDown.timer"
color="red"
overlap
>
</v-badge>
</div>
<v-alert
:value="alert"
color="success"
dark
border="top"
icon="mdi-home"
transition="slide-y-transition"
@input="dismissible_close"
>
<div id="close_btn">
<v-btn color="success" fab x-small @click="show_alert_and_fade">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<div class="pt-6 pr-6">
<p>
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
</p>
<p>
Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</p>
</div>
</v-alert>
</div>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
如何创建 Alert in Vuetify that fade after specified number of seconds, similarly to the alerts in Bootstrap Vue。我试过这个：
<template>
<transition name="fade">
<v-alert v-show="visible" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</v-alert>
</transition>
</template>
<script>
export default {
inheritAttrs: true,
data() {
return {
visible: true,
timer: null
};
},
props: {
duration: {
required: true,
type: Number
}
},
methods: {
fade() {
let value = parseInt(Math.max(this.duration, 0));
if (value != 0)
this.timer = setTimeout(() => (this.visible = false), 1000 * value);
}
},
mounted() {
this.fade();
}
};
</script>
在其他组件中的用法：
<vt-alert
v-if="hasMessage()"
:type="message.type"
:duration="message.duration"
>{{message.body}}</vt-alert>
hasMessage 是实用函数，用于检查消息是否已设置。
但这没有用。更多详细信息 here、
不需要那么多代码和自定义想法 :) 使用vuetify API（更少的代码=更容易维护）：
https://vuetifyjs.com/en/components/alerts/#api
一个。 Show/Hide
警报获取值（false => 隐藏。True => 显示）。
<v-alert :value="alert">
data () {
return {
alert: false,
}
将 alert 切换为 true/false 点击、悬停、计时器或您想要的任何逻辑。
文档工具示例： https://vuetifyjs.com/en/components/alerts/#transition
乙。过渡道具
使用你想要的任何内置过渡。列出她： https://vuetifyjs.com/en/styles/transitions/#motion
<v-alert transition="fade-transition">
A+B：基本 "hello world" 示例
点击显示警报 & slide-y-transition 3 秒后退出。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
alert: false,
}
},
// define methods under the `methods` object
methods: {
hide_alert: function (event) {
console.log('Hide')
// `event` is the native DOM event
window.setInterval(() => {
this.alert = false;
console.log("hide alert after 3 seconds");
}, 3000)
}
},
mounted: function () {
if(alert){
this.hide_alert();
}
}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<div>
<div class="text-center mb-4">
<v-btn
color="primary"
@click="alert = true"
>
Show alert? {{alert}}
</v-btn>
</div>
<v-alert
:value="alert"
color="pink"
dark
border="top"
icon="mdi-home"
transition="slide-y-transition"
>
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-alert>
</div>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
附加功能示例
当警报可见时显示计时器 (3..2..1) + 在单击按钮时切换警报。
关于 dismissible 最好的想法是创建一个自定义 X 按钮（并使用相同的 show/hide 功能）***直到 API 提供更多选项与此功能相关（Styling/position 等）。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
message: "show alert? - ",
alert: false,
countDown: {
timer: "3",
show: false
},
}
},
// define methods under the `methods` object
methods: {
show_alert_and_fade: function(){
/* toogle alert on click */
this.alert = !this.alert;
/* hide alert after 3 seconds */
this.resetTimer();
this.countDownTimer();
/* If alert visible - setTimeout() => only executed once */
if(this.alert == true){
myTimer = window.setTimeout(() => {
this.alert = false;
console.log("Case 1: Time ends - hide alert");
}, 3000);
}else{
/* If alert hidden - clear setTimeout */
console.log("Case 2: User Hide alert by click - stop setTimeout");
clearTimeout(myTimer);
this.resetTimer();
}
},
dismissible_close (value) {
this.alert = value;
this.resetTimer();
},
/* recursion function - run time if remain time and alert if visible */
countDownTimer() {
if(this.countDown.timer > 0 && this.alert) {
this.countDown.show = true;
var myTimer = setTimeout(() => {
this.countDown.timer -= 1;
this.countDownTimer();
}, 1000)
}
else{
/* do something */
this.resetTimer();
}
},
resetTimer(){
this.countDown.timer = 3;
},
hideTimer(){
this.countDown.show = false;
}
}
})
body{
padding: 10px;
}
#close_btn{
position: absolute;
right: 6px;
top: 12px;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<div>
<div class="text-center mb-4">
<!-- remove countDown for demo only -->
<v-btn
v-bind:color="alert ? 'success' : 'error'"
@click="show_alert_and_fade"
v-bind:class="{ active: alert }"
>
{{message}} <b> {{alert}}</b>
</v-btn>
<v-badge v-if="alert"
:content="countDown.timer"
:value="countDown.timer"
color="red"
overlap
>
</v-badge>
</div>
<v-alert
:value="alert"
color="success"
dark
border="top"
icon="mdi-home"
transition="slide-y-transition"
@input="dismissible_close"
>
<div id="close_btn">
<v-btn color="success" fab x-small @click="show_alert_and_fade">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<div class="pt-6 pr-6">
<p>
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
</p>
<p>
Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</p>
</div>
</v-alert>
</div>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>