Event in Vue Speed dial component

30 May 20249 minutes to read

This section explains the Speed Dial events that will be triggered when appropriate actions are performed.

clicked

The SpeedDial component triggers the clicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :clicked="clicked"></ejs-speeddial>
</template>

<script setup>
import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
            const items = [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ];
      const clicked = function(args) {
          //Your required action here
      }
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

created

The Speed Dial component triggers the created event when SpeedDial component rendering is completed.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :created="created"></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";


export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      created: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

beforeOpen

The SpeedDial component triggers the beforeOpen event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is opened.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :beforeOpen="beforeOpen"></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";


export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      beforeOpen: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

onOpen

The SpeedDial component triggers the onOpen event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is opened.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :onOpen="onOpen"></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";


export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      onOpen: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

beforeClose

The SpeedDial component triggers the beforeClose event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is closed.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :beforeClose="beforeClose"></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";


export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      beforeClose: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

onClose

The SpeedDial component triggers the onClose event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is closed.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :onClose="onClose"></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";


export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      onClose: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

beforeItemRender

The SpeedDial component triggers the beforeItemRender event with SpeedDialItemEventArgs argument for each SpeedDialItem once it is rendered.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :beforeItemRender="beforeItemRender"></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";


export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      beforeItemRender: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Below example demonstrates the clicked event of the Speed Dial component.

Composition API (~/src/App.vue)

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' target='#targetElement' :items='items'
            :clicked="clicked"></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

const items = [

    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
];
const clicked = function (args) {
    alert(args.item.text + " is clicked");
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Options API (~/src/App.vue)

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' target='#targetElement' :items='items'
            :clicked="clicked"></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-speeddial": SpeedDialComponent
    },
    data() {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
        clicked: function (args) {
            alert(args.item.text + " is clicked");
        }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>