Prevent toast close with mobile swipe in Vue Toast component

11 Jun 20243 minutes to read

You can prevent the toast close with mobile swipe action by setting beforeClose argument cancel value to true while argument type as a swipe. The following code shows how to prevent toast close with mobile swipe.

The following sample demonstrates preventing toast close with mobile swipe element displaying with custom code blocks.

Composition API (~/src/App.vue)

<template>
  <div id="app">
       <ejs-button ref='showButtonRef' class="e-btn" id="show_toast" v-on:click="showBtnClick">Show Toast</ejs-button>
       <ejs-toast ref='defaultRef' title='Matt sent you a friend request' content='You have a new friend request yet to accept' :beforeClose='onBeforeClose' :position='position'></ejs-toast>
  </div>
</template>

<script setup>

import { ToastComponent as EjsToast } from '@syncfusion/ej2-vue-notifications';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { ref, onMounted } from "vue";

const position = { X: 'Center' };
const defaultRef = ref(null);

onMounted(() => {
  defaultRef.value.show();
});

const showBtnClick = function(){
  defaultRef.value.show();
};

const onBeforeClose = function(e){
  if (e.event.type === "swipe") {
    //toast.cancel = true;
  }
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
       <ejs-button ref='showButtonRef' class="e-btn" id="show_toast" v-on:click="showBtnClick">Show Toast</ejs-button>
       <ejs-toast ref='defaultRef' title='Matt sent you a friend request' content='You have a new friend request yet to accept' :beforeClose='onBeforeClose' :position='position'></ejs-toast>
  </div>
</template>

<script>

import { ToastComponent } from '@syncfusion/ej2-vue-notifications';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-toast":ToastComponent
},
  name: 'app',
  data: function(){
    return {
        position: { X: 'Center' }
    }
  },
  mounted: function() {
      this.$refs.defaultRef.show();
  },
  methods: {
      showBtnClick: function(){
          this.$refs.defaultRef.show();
      },
      onBeforeClose: function(e) {
        if (e.event.type === "swipe") {
            this.toast.cancel = true;
        }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>