Pop-up

API Declaration

Add the following configuration to the features attribute in the manifest.json file:

{"name": "system.prompt"}

Module Import

Add the following configuration to the script element on the page where the API will be called:

import prompt from '@system.prompt'

Or

var prompt = require("@system.prompt")

Application Scope

Definition

[h2]prompt.showToast(OBJECT)

Description

Displays a toast.

OBJECT

Sample code

prompt.showToast({
    message:'message',
    duration:"100000",
    image:"/Common/logo.png",
    gravity: 'center'
})

[h2]prompt.showDialog(OBJECT)

Description

Displays a pop-up.

OBJECT

Parameters returned by success

Sample code

prompt.showDialog({
    title: 'title',
    message: 'message',
    buttons: [
    {
        text: 'OK',
        color: '#33dd44'
    },
    {
        text: 'Cancel',
        color: '#33dd44'
    }
    ],
    success: function (data) {
        console.log("handling callback",data);
    },
    cancel: function(){
        console.log("cancel");
    }
})

[h2]prompt.showContextMenu(OBJECT)

Description

Displays the context menu.

OBJECT

Parameters returned by success

Sample code

prompt.showContextMenu({
  itemList: ['item1', 'item2'],
  itemColor: '#ff33ff',
  success: function(data) {
    console.log("handling callback");
  },
   cancel: function() {
    console.log("user cancel=");
  }
})

[h2]prompt.showLoading(OBJECT) (1075+)

Description

Displays a loading pop-up.

A loading pop-up can be closed only by calling prompt.hideLoading().

OBJECT

Sample code

prompt.showLoading({
    message: 'message'
    loadingColor: 'blue',
    mask: false
})

[h2]prompt.hideLoading() (1075+)

Description

Closes a loading pop-up.

Sample code

prompt.hideLoading()

Demo

<template>
  <div class="container">
    <div class="item-container">
      <input type="button" class="btn" onclick="showToast" value="Show a toast" />
      <input type="button" class="btn" onclick="showDialog" value="Show a dialog" />
      <input type="button" class="btn" onclick="showContextMenu" value="Show the context menu" />
      <input type="button" class="btn" onclick="showLoading" value="Show a loading " />
      <input type="button" class="btn" onclick="hideLoading" value="Close a loading " />
    </div>
  </div>
</template>

<style>
    .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .item-container {
    margin-bottom: 50px;
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
  }
   .btn { 
    height: 80px;
    width: 400px;
    text-align: center;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    margin-bottom: 50px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
  }
</style>

<script>
  import prompt from '@system.prompt'
  export default {
    data: {
      componentName: 'Pop-up',
      componentData: {},
    },
    onInit: function () {
      this.$page.setTitleBar({ text: 'Pop-up' })
      this.componentData = this.$t('message.interface.interaction.prompt')
    },
    showToast: function () {
      prompt.showToast({
        message: 'logo',
        duration:"100000",
        image:"/Common/logo.png",
        gravity: 'center'
      })
    },
    showDialog: function () {
      let that = this
      prompt.showDialog({
        title: 'Pop-up Title',
        message: 'Description such as pop-up content, current status, information, and solutions should be controlled in three lines.',
        buttons:  [
          {
            text: 'OK',
            color: '#0faeff'
          },{
            text: 'Cancel',
          },{
            text: 'Ignore'
          }
        ],
        success: function (ret) {
          prompt.showToast({
            message: 'Success callback: selected button serial number---' + ret.index
          })
        },
        cancel: function () {
          prompt.showToast({
            message: 'Cancel callback'
          })
        },
        complete: function () {
         prompt.showToast({
           message: 'Execution completed',
           duration: 2000,
           gravity: 'center'
         })
        }
      })
    },
    showContextMenu: function () {
      let that = this
      prompt.showContextMenu({
        itemList: ['item0', 'item1', 'item2', 'item3', 'item4', 'item5'],
        itemColor: '#ff33ff',
        success: function (ret) {
          prompt.showToast({
            message: 'Success callback: selected button serial number---' + ret.index
          })
        },
        cancel: function (ret) {
          prompt.showToast({
            message: 'Cancel callback'
          })
        },
        complete: function () {
            console.log("Callback after the execution completed");
        }
      })
    },
    showLoading: function () {
      prompt.showLoading({
          message: 'loading',
          loadingColor: 'blue',
          mask: false
      })
    },
    hideLoading: function () {
      prompt.hideLoading();
      console.log("Loading pop-up is closed");
    }
  }
</script>

The following figure shows the final effect.

Version Change History

Links

[h2]FAQs

• What can I do when the callback cannot be received when the prompt.showDialog(OBJECT) API is called?
• In addition to calling the prompt.showDialog API, how can I implement custom pop-ups?
• Can prompt.showContextMenu(OBJECT) be used to set the top and bottom margins?