How To Use Syncfusion Predefined Dialogs In Vue.js Application

Introduction

In this article, we’ll Learn how we can add the syncfusion Predefined Dialogs in the Vue.js application. 

Prerequisites

• Basic knowledge of JavaScript and VueJS
• NodeJS installed.
• Text editor.
• Vue CLI installed.

Create VueJS Project

Create a Vue.js project by using the following command.

vue create multiselectdropdown

Now open the newly created project in Visual Studio Code and install the following syncfusion  library using the following command.

npm install @syncfusion/ej2-vue-popups 
npm install @syncfusion/ej2-vue-buttons

Now go to the src folder and create a new component, 'Predefineddialogsdemo.vue'. Add the following code to this component.

<template>
    <div>
        <div class="col-sm-12 btn btn-info">How To Use Syncfusion Predefined Dialogs In Vue.js Application</div>
      <div class="col-lg-12 control-section" id="predefinedDialogDefault" >
          <ejs-button id="alertDlgBtn"  v-on:click="alertBtnClick" cssClass="e-danger">Alert</ejs-button>
          <ejs-button id="confirmDlgBtn"  v-on:click="confirmBtnClick" cssClass = "e-success">Confirm</ejs-button>
          <ejs-button id="promptDlgBtn"  v-on:click="promptBtnClick" :isPrimary="true">Prompt</ejs-button>
          <span id="statusText"></span>
      </div>
    </div>
  </template>
<style>
#predefinedDialogDefault {
padding: 25px 0 0 15px;
}
#predefinedDialogDefault .e-btn {
    margin-right: 10px;
}
#inputEle{
    margin-top:10px;
}
#predefinedDialogDefault #statusText{
    font-size:16px;
    margin-top: 20px;
}
.e-alert-dialog.e-dialog.e-popup, .e-confirm-dialog.e-dialog.e-popup{
    margin: 30px auto;
    width: auto;
}
.control-section {
    height: 100%;
    min-height: 350px;
}
</style>
<script>
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
let dialogObj=undefined;
let value ;
export default {
    components: {
      'ejs-button': ButtonComponent
    },
    name: 'Dialogsdemo',
    data: function() {
        return { 
        }
    },
    methods: {
        alertBtnClick: function () {
            document.getElementById("statusText").style.display="none";
            dialogObj = DialogUtility.alert({
                title: 'Low Battery',
                content: '10% of battery remaining',
                okButton: {click:this.alertOkAction},
                position: { X: 'center', Y: 'center' },
                closeOnEscape: true
            });
        },
        alertOkAction:function(){
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user closed the Alert dialog."
            document.getElementById("statusText").style.display="block";
        },
        confirmBtnClick: function () {
            document.getElementById("statusText").style.display="none";
            dialogObj = DialogUtility.confirm({
                title: " Delete Multiple Items",
                content: "Are you sure you want to permanently delete these items?",
                okButton: { click:this.confirmOkAction},
                cancelButton: { click:this.confirmCancelAction},
                position: { X: 'center', Y: 'center' },
                closeOnEscape: true
            });
        },
        confirmOkAction:function () {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user confirmed the dialog box";
            document.getElementById("statusText").style.display="block";
        },
        confirmCancelAction:function(){
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user canceled the dialog box.";
            document.getElementById("statusText").style.display="block";
        },
        promptBtnClick: function () {
            document.getElementById("statusText").style.display="none";
            dialogObj = DialogUtility.confirm({
                title: "Join Chat Group",
                content:'<P>Enter your name:</p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
                okButton: { click:this.promptOkAction },
                cancelButton: { click:this.promptCancelAction},
                position: { X: 'center', Y: 'center' },
                closeOnEscape: true
            });
        },
        promptOkAction:function () {
        value = document.getElementById("inputEle").value;
        if(value ==""){
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user's input is returned as\" \"";
            document.getElementById("statusText").style.display="block";
        }
        else{
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user's input is returned as" +" "+ value;
            document.getElementById("statusText").style.display="block";
        } 
        },
        promptCancelAction:function () {
            dialogObj.hide ();
            document.getElementById("statusText").innerHTML ="The user canceled the prompt dialog";
            document.getElementById("statusText").style.display="block";
        }
    },
}
</script>

Now open App.vue and add the following code.

<template>
  <Dialogsdemo />
</template>
<script>
import Dialogsdemo from './components/Predefineddialogsdemo.vue'
export default {
  components: {
    'Dialogsdemo': Dialogsdemo
  }
};
</script>

Now run the project using the 'npm run serve' command.

Now click on any button and check.

Summary

In this article, we learned how we add the syncfusion Predefined Dialogs in the Vue.js application.