Vuido
  • About Vuido
  • Introduction
  • Installation
    • Manual Configuration
    • Production Builds
  • Usage
    • Window Template
    • Script Section
    • Interpolations
    • Computed Properties
    • Conditionals and Loops
    • Handling User Input
    • Managing Windows
    • Displaying Dialogs
    • Custom Components
    • Using libui Classes
    • Common Attributes
  • Packaging
  • Built-in Components
    • Window
    • Containers
      • Box
      • Form
      • Group
      • Tab
    • Widgets
      • Area
        • AreaGroup
        • AreaPath
        • AreaText
      • Button
      • Checkbox
      • ColorButton
      • Combobox
      • DatePicker
      • DateTimePicker
      • DropdownList
      • FontButton
      • ProgressBar
      • RadioButtons
      • Separator
      • Slider
      • Spinbox
      • Text
      • TextArea
      • TextInput
      • TimePicker
Powered by GitBook
On this page
  • Message Boxes
  • File Dialogs
  1. Usage

Displaying Dialogs

Message Boxes

You can use the $dialogs.msgBox() method to display a simple message box with an OK button. The first parameter is the title of the dialog and the second parameter is the message text. For example:

<template>
  <Window title="Example" width="400" height="100" margined>
    <Button v-on:click="showMessage">Show Message</Button>
  </Window>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$dialogs.msgBox( 'Title', 'This is the message.' );
    }
  }
}
</script>

You can also use the $dialogs.msgBoxError() method to display an error message. It has the same parameters as msgBox().

File Dialogs

You can use the $dialogs.openFile() method to allow the user to select an existing file or $dialogs.saveFile() to prompt for a new file to be created or overwritten. Both these methods return the path of the selected file or null if the user cancelled the operation. For example:

<template>
  <Window title="Example" width="400" height="100" margined>
    <Button v-on:click="openFile">Open File</Button>
  </Window>
</template>

<script>
export default {
  methods: {
    openFile() {
      const filePath = this.$dialogs.openFile();
      if ( filePath != null ) {
        // do something...
      }
    }
  }
}
</script>
PreviousManaging WindowsNextCustom Components

Last updated 6 years ago