Vue ActionSheet - Overview

The ActionSheet UI component is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

View Demo

The following code adds a simple ActionSheet to your page. The UI component is shown on a button click.

App.vue
  • <template>
  • <div>
  • <DxActionSheet
  • v-model:visible="isActionSheetVisible"
  • :data-source="actionSheetData"
  • />
  • <DxButton
  • text="Show the ActionSheet"
  • @click="showActionSheet"
  • />
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxActionSheet from 'devextreme-vue/action-sheet';
  • import DxButton from 'devextreme-vue/button';
  • import notify from "devextreme/ui/notify";
  •  
  • export default {
  • components: {
  • DxActionSheet,
  • DxButton
  • },
  • data() {
  • return {
  • isActionSheetVisible: false,
  • actionSheetData: [
  • { text: "Reply", onClick: () => { this.processClick("Reply") } },
  • { text: "Reply All", onClick: () => { this.processClick("Reply All") } },
  • { text: "Forward", onClick: () => { this.processClick("Forward") } },
  • { text: "Delete", onClick: () => { this.processClick("Delete") } }
  • ]
  • };
  • },
  • methods: {
  • showActionSheet(e) {
  • this.isActionSheetVisible = true;
  • },
  • processClick(name) {
  • notify(name + " clicked", "success", 3000);
  • }
  • }
  • }
  • </script>

Note that every data source object has a text field that is rendered on the buttons of the ActionSheet. Also, there is the onClick field that represents a click handler for a certain ActionSheet button.

See Also