wxc-dialog

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

规则

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

Demo

使用方法

<template>
  <div>
    <div>
      <div @click="openDialog">
        <text>对话消息Dialog</text>
      </div>
    </div>
    <wxc-dialog title="标题"
                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 () {
      //此处必须设置，组件为无状态组件，自己管理
        this.show = false;
      },
      wxcDialogConfirmBtnClicked () {
      //此处必须设置，组件为无状态组件，自己管理
        this.show = false;
      },
      wxcDialogNoPromptClicked (e) {
      //此处必须设置，组件为无状态组件，自己管理
        this.isChecked = e.isChecked;
      }
    }
  };
</script>

更详细代码可以参考 demo

可配置参数

事件回调

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

slot卡槽

1. <slot name="title"></slot>：标题卡槽，不传入使用文案
2. <slot name="content"></slot>：说明文案卡槽， 不传入使用文案