wxc-dialog

Use to show important information for the system, and ask for user feedback. eg: When deleting an important content, pop up a Modal for secondary confirmation.

Rule

• Use as few as possible. Modal will interrupt user operation, only use it at important situation.
• Title should be concise, do not exceed 1 line; description should be concise and complete, generally no more than 2 lines.
• Generally put the most likely clicked button on the right side. In addition, the cancel button should always be on the left.

Demo

Code Example

<template>
  <div class="container">
    <div class="demo">
      <div class="btn" @click="openDialog">
        <text class="btn-txt">Dialog</text>
      </div>
    </div>
    <wxc-dialog title="title"
                content="this is content"
                :show="show"
                :single="false"
                :is-checked="isChecked"
                :show-no-prompt="true"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
                @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
    </wxc-dialog>
  </div>
</template>

<script>
  import { WxcDialog } from 'weex-ui';
  export default {
    components: { WxcDialog },
    data: function () {
      return {
        show: false,
        isChecked: false
      };
    },
    methods: {
      openDialog () {
        this.show = true;
      },
      wxcDialogCancelBtnClicked () {
      // must setting,control by yourself
        this.show = false;
      },
      wxcDialogConfirmBtnClicked () {
      // must setting,control by yourself
        this.show = false;
      },
      wxcDialogNoPromptClicked (e) {
      // must setting,control by yourself
        this.isChecked = e.isChecked;
      }
    }
  };
</script>

More details can be found in here

API

Event

@wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"、
@wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"、
@wxcDialogNoPromptClicked="wxcDialogNoPromptClicked"

Slot

1. <slot name="title"></slot>
2. <slot name="content"></slot>