CareUI

# 对话框

# 确认类对话框

<template>
    <div>
        <t-button theme="primary" @click="visible = true">基础确认对话框</t-button>
        <!-- :onClose="onClose" 和 @close="onClose" 等效 -->
        <!-- 其他事件类似 -->
        <t-dialog
            header="对话框标题"
            body="对话框内容"
            :visible.sync="visible"
            @confirm="onConfirm"
            :onConfirm="onConfirmAnother"
            :onCancel="onCancel"
            :onEscKeydown="onKeydownEsc"
            :onCloseBtnClick="onClickCloseBtn"
            :onOverlayClick="onClickOverlay"
            :onClose="close"
        ></t-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    onConfirm(context) {
      console.log('@confirm与onConfirm任选一种方式即可，其他几个事件类似', context);
      this.visible = false;
    },
    onConfirmAnother(context) {
      console.log('点击了确认按钮', context);
    },
    close(context) {
      console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
    },
    onCancel(context) {
      console.log('点击了取消按钮', context);
    },
    onKeydownEsc(context) {
      console.log('按下了ESC', context);
    },
    onClickCloseBtn(context) {
      console.log('点击了关闭按钮', context);
    },
    onClickOverlay(context) {
      console.log('点击了蒙层', context);
    },
  },
};
</script>
显示代码 复制代码

# 反馈类对话框

<template>
    <div>
        <t-button theme="primary" @click="visible1 = true">提示反馈</t-button>
        <t-dialog
        theme="info"
        header="提示"
        body="对话框内容"
        :visible.sync="visible1"
        @confirm="onConfirm"
        :onClose="close1"
        >
        </t-dialog>

        <t-button theme="primary" @click="visible2 = true">成功反馈</t-button>
        <t-dialog
        theme="success"
        header="成功"
        body="对话框内容"
        :visible.sync="visible2"
        @confirm="onConfirm"
        :onClose="close2"
        >
        </t-dialog>

        <t-button theme="primary" @click="visible3 = true">警示反馈</t-button>
        <t-dialog
        theme="warning"
        header="警示"
        body="对话框内容"
        :visible.sync="visible3"
        @confirm="onConfirm"
        :onClose="close3"
        :cancelBtn="null"
        >
        </t-dialog>

        <t-button theme="primary" @click="visible4 = true">错误反馈</t-button>
        <t-dialog
        theme="danger"
        header="错误"
        body="对话框内容"
        :visible.sync="visible4"
        @confirm="onConfirm"
        :onClose="close4"
        :cancelBtn="null"
        >
        </t-dialog>

        <t-button theme="primary" @click="visible5 = true">自定义图标</t-button>
        <t-dialog body="对话框内容" :closeBtn="false" :visible.sync="visible5" @confirm="onConfirm" :onClose="close5">
            <div slot="header">
                <i class="check-circle-filled"></i>
                <span style="vertical-align: middle">对话框标题</span>
            </div>
        </t-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
    };
  },
  methods: {
    onConfirm(context) {
      const { e } = context;
      // todo something else here
      this.sendingRequest();
      this.visible1 = false;
      this.visible2 = false;
      this.visible3 = false;
      this.visible4 = false;
      this.visible5 = false;
      e.stopPropagation();
    },
    sendingRequest() {
      console.log('sending request');
    },

    close1() {
      this.visible1 = false;
    },
    close2() {
      this.visible2 = false;
    },
    close3() {
      this.visible3 = false;
    },
    close4() {
      this.visible4 = false;
    },
    close5() {
      this.visible5 = false;
    },
  },
};
</script>
<style scoped>
.t-button {
  margin-right: 20px;
}
</style>
显示代码 复制代码

# 模态与非模态对话框

<template>
    <div>
        <t-button theme="primary" @click="visibleModal = true">模态对话框</t-button>
        <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框</t-button>
        <t-button theme="primary" @click="visibleModeless = true">模态对话框-不可拖拽</t-button>

        <t-dialog
            header="模态对话框"
            :visible.sync="visibleModal"
            mode="modal"
            draggable
            :onConfirm="() => (this.visibleModal = false)"
        >
            <div slot="body">
                <div>默认点击蒙层或按ESC可关闭</div>
                <div>对话框内容</div>
            </div>
        </t-dialog>

        <t-dialog
            header="非模态对话框"
            :visible.sync="visibleModelessDrag"
            mode="modeless"
            draggable
            :onConfirm="() => (this.visibleModelessDrag = false)"
        >
            <div slot="body">
                <div>对话框内容</div>
            </div>
        </t-dialog>

        <t-dialog
            header="非模态对话框-不可拖拽"
            :visible.sync="visibleModeless"
            mode="modeless"
            :onConfirm="() => (this.visibleModeless = false)"
        >
            <div slot="body">
                <div>对话框内容</div>
            </div>
        </t-dialog>

        <t-dialog
            header="非模态对话框-不可拖拽"
            :visible.sync="visibleModeless"
            mode="modeless"
            :onConfirm="() => (this.visibleModeless = false)"
        >
            <div slot="body">
                <div>对话框内容</div>
            </div>
        </t-dialog>
    </div>
</template>
<script>
export default {
    data() {
      return {
          visibleModal: false,
          visibleModelessDrag: false,
          visibleModeless: false,
      };
    },
    methods: {},
};
</script>
显示代码 复制代码

← Drawer 抽屉 →