Skip to content
iuiDesign
100%
02:32
本页目录

用于显示重要提示或请求用户进行重要操作,一种打断当前操作的模态视图。

基本用法

对话框的基本用法。

html
<iui-dialog
  v-model="visible"
  :cancel="false"
  title="Dialog Title"
  confirmText="I know"
>
  I am a single-line content of the body, center-aligned by default.
</iui-dialog>

<script setup>
  import { ref } from "vue";

  const visible = ref(false);
  const open = () => {
    visible.value = true;
  };

  onMounted(() => {
    open();
  });
</script>
<iui-dialog
  v-model="visible"
  :cancel="false"
  title="Dialog Title"
  confirmText="I know"
>
  I am a single-line content of the body, center-aligned by default.
</iui-dialog>

<script setup>
  import { ref } from "vue";

  const visible = ref(false);
  const open = () => {
    visible.value = true;
  };

  onMounted(() => {
    open();
  });
</script>

函数调用

通过函数的方式使用对话框。

html
<iui-dialog ref="dialog"></iui-dialog>

<script setup>
  import { ref } from "vue";

  const dialog = ref(false);
  const open = () => {
    dialog.value.open({
      content:
        "I am a single-line content of the body, center-aligned by default.",
      confirmText: "I know",
      cancel: false,
    });
  };

  onMounted(() => {
    open();
  });
</script>
<iui-dialog ref="dialog"></iui-dialog>

<script setup>
  import { ref } from "vue";

  const dialog = ref(false);
  const open = () => {
    dialog.value.open({
      content:
        "I am a single-line content of the body, center-aligned by default.",
      confirmText: "I know",
      cancel: false,
    });
  };

  onMounted(() => {
    open();
  });
</script>

异步关闭

可以通过 beforeConfirm 更简洁的实现异步关闭功能

html
<iui-dialog ref="dialog"></iui-dialog>

<script setup>
  import { ref } from "vue";

  const dialog = ref(false);
  const open = () => {
    dialog.value.open({
      title: "Dialog Title",
      content:
       "I am a single-line content of the body, center-aligned by default.",,
      confirmText: "Primary",
      cancelText: "Auxiliary",
      // 异步
      beforeConfirm() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true);
          }, 1000);
        });
      },
    });
  };

  onMounted(() => {
    open();
  });
</script>
<iui-dialog ref="dialog"></iui-dialog>

<script setup>
  import { ref } from "vue";

  const dialog = ref(false);
  const open = () => {
    dialog.value.open({
      title: "Dialog Title",
      content:
       "I am a single-line content of the body, center-aligned by default.",,
      confirmText: "Primary",
      cancelText: "Auxiliary",
      // 异步
      beforeConfirm() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true);
          }, 1000);
        });
      },
    });
  };

  onMounted(() => {
    open();
  });
</script>

自定义内容

可以通过 titleaction 插槽自定义对话框。

html
<iui-dialog v-model="dialog">
  <template #title>
    <view class="header">
      <view class="icon">
        <iui-icon name="info-circle-fill"></iui-icon>
      </view>
      <view class="title"> Title Slot </view>
    </view>
  </template>
  I am a single-line content of the body, center-aligned by default.
  <template #action>
    <view class="list">
      <view class="item" v-for="idx in 3" :key="idx" @click="dialog = false">
        Option {{ idx }}
      </view>
    </view>
  </template>
</iui-dialog>

<script setup>
  import { ref } from "vue";

  const dialog = ref(true);
</script>
<iui-dialog v-model="dialog">
  <template #title>
    <view class="header">
      <view class="icon">
        <iui-icon name="info-circle-fill"></iui-icon>
      </view>
      <view class="title"> Title Slot </view>
    </view>
  </template>
  I am a single-line content of the body, center-aligned by default.
  <template #action>
    <view class="list">
      <view class="item" v-for="idx in 3" :key="idx" @click="dialog = false">
        Option {{ idx }}
      </view>
    </view>
  </template>
</iui-dialog>

<script setup>
  import { ref } from "vue";

  const dialog = ref(true);
</script>
scss
.header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  padding: 0 4px;
  font-weight: 600;
  text-align: center;
}
.icon {
  color: #f53f3f;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .item {
    color: #165dff;
    font-size: 16px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-bottom: 1rpx solid #dfdfdf;
    &:active {
      opacity: 0.5;
    }
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  padding: 0 4px;
  font-weight: 600;
  text-align: center;
}
.icon {
  color: #f53f3f;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .item {
    color: #165dff;
    font-size: 16px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-bottom: 1rpx solid #dfdfdf;
    &:active {
      opacity: 0.5;
    }
  }
}

API

<Dialog>props
参数描述类型默认值
modelValue (v-model)是否显示Booleanfalse
title对话框标题String-
content对话框内容String-
radius圆角Number10
cancel是否显示取消按钮Booleantrue
cancelText取消按钮文本String取消
confirmText确认按钮文本String确认
maskClosable点击遮罩是否关闭Booleantrue
beforeConfirm确认前执行的函数Function-
beforeCancel取消前执行的函数Function-
<Dialog>events
事件名描述参数
close关闭时触发-
confirm点击确认按钮时触发-
cancel点击取消按钮时触发-
<Dialog>methods
方法名描述参数
open打开对话框props: Object
<Dialog>slots
插槽名描述参数
default自定义内容-
title自定义标题-
action自定义操作按钮-