wxc-dialog

Weex 二次确认弹窗组件，可以设置标题、内容、按钮定制、不再提示等

规则

  • 尽可能少用，Dialog 会打断用户操作，只用在重要的时候
  • 标题不要超过一行，按钮最多两个
  • 取消按钮在左侧，确定按钮在右侧

Demo

wxc-dialog 对话框 - 图1 wxc-dialog 对话框 - 图2

使用方法

  1. <template>
  2.   <div class="container">
  3.     <div class="demo">
  4.       <div class="btn" @click="openDialog">
  5.         <text class="btn-txt">对话消息Dialog</text>
  6.       </div>
  7.     </div>
  8.     <wxc-dialog title="标题"
  9.                 content="这里是内容"
  10.                 :show="show"
  11.                 :single="false"
  12.                 :is-checked="isChecked"
  13.                 :show-no-prompt="true"
  14.                 @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
  15.                 @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
  16.                 @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
  17.     </wxc-dialog>
  18.   </div>
  19. </template>
  21. <script>
  22.   import { WxcDialog } from 'weex-ui';
  23.   export default {
  24.     components: { WxcDialog },
  25.     data: function () {
  26.       return {
  27.         show: false,
  28.         isChecked: false
  29.       };
  30.     },
  31.     methods: {
  32.       openDialog () {
  33.         this.show = true;
  34.       },
  35.       wxcDialogCancelBtnClicked () {
  36.       //此处必须设置，组件为无状态组件，自己管理
  37.         this.show = false;
  38.       },
  39.       wxcDialogConfirmBtnClicked () {
  40.       //此处必须设置，组件为无状态组件，自己管理
  41.         this.show = false;
  42.       },
  43.       wxcDialogNoPromptClicked (e) {
  44.       //此处必须设置，组件为无状态组件，自己管理
  45.         this.isChecked = e.isChecked;
  46.       }
  47.     }
  48.   };
  49. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
title String Y - 标题
content String N - 内容说明描述
top Number N 400 弹层距离顶部的高度
single Boolean N false 是否只有一个按钮（显示确认）
cancel-text String N 取消 取消按钮文案定制
confirm-text String N 确定 确定按钮文案定制
main-btn-color String N #EE9900 主按钮的颜色值
second-btn-color String N #666666 次要按钮颜色
show-no-prompt Boolean N false 是否显示不再提示
no-prompt-text String N 不再提示 不再提示的文案
is-checked Boolean N false 不再提示是否勾选

事件回调

  1. @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"、
  2. @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"、
  3. @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked"

slot卡槽

  • ：标题卡槽，不传入使用文案
  • ：说明文案卡槽， 不传入使用文案

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/