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.
<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
Prop | Type | Required | Default | Description |
---|---|---|---|---|
title | String | Y | - | title (only transparent) |
content | String | N | - | content |
left | Number | N | 0 | move left distance |
top | Number | N | 400 | distance from the top of the screen |
single | Boolean | N | false | whether is single button |
confirm-text | String | N | 确定 | text of the primary button |
cancel-text | String | N | 取消 | text of the secondary button |
main-btn-color | String | N | #EE9900 | color of the primary button |
second-btn-color | String | N | #666666 | color of the secondary button |
show-no-prompt | Boolean | N | false | whether to show no-prompt |
no-prompt-text | String | N | 不再提示 | text of the no-prompt |
is-checked | Boolean | N | false | checked of the no-prompt |
@wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"、 @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"、 @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked"
<slot name="title"></slot>
<slot name="content"></slot>