MPoppup (.MPOPPOP)

A custom modal that asks the user to make a desicion.

Preview

Attributes

Nametypeoptionaldescription
blurredbooleantrueto give the poppup a blurry background
requiredbooleantrueto disallow exiting without pressing any button
mobilebooleantrueto show mobile styled poppup on screens smaller than 768px

Usage

give your MPoppup a ref to call its mehods:

<MPoppp ref="pop" />

Use the show method to display a poppup. the show method takes an object parameter with the properties : title, message, confirm, cancel (All are optional) which creates a simple layout poppup. The show method returns a promise with user's decision.

  async showPop() {
    let response = await this.$refs.pop.show({
      title: "I love Mairs",
      message: "do you like it too ?",
      confirm: "I like it",
      cancel: "I don't like it"
    });
    console.log(response);
  }

However you can still create the poppup you like and call the show method to display it only. Use the respond() method to identify the user response.

<template>
  <div>
    <MPoppup ref="pop">
      <label>Username</label>
      <input type="text"/>
      <label>Password</label>
      <input type="password"/>
      <MButton @click="$refs.pop.respond(true)">Login</MButton>
      <MButton @click="$refs.pop.respond(false)">Cancel</MButton>
    </MPoppop>
    <MButton @click="$refs.pop.show()">Click to Login</Mbutton>
  </div>
</template>