更新记录

1.0.3（2024-08-06） 下载此版本

修改文档

1.0.2（2024-07-30） 下载此版本

适配r-config-provider

1.0.1（2024-07-23） 下载此版本

修复控制台警告

平台兼容性

r-dialog

r-dialog 弹出框，弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

示例

<template>
  <r-config-provider>
    <view style="padding: 20px 0">
      <r-divider content-position="left">基础使用</r-divider>
      <r-cell-group inset>
        <r-cell title="提示弹窗" isLink @click="open(1)"></r-cell>
        <r-cell title="提示弹窗(无标题)" isLink @click="open(2)"></r-cell>
        <r-cell title="确认弹窗" isLink @click="open(3)"></r-cell>
      </r-cell-group>

      <r-divider content-position="left">异步关闭</r-divider>
      <r-cell-group inset>
        <r-cell title="异步关闭" isLink @click="open2()"></r-cell>
      </r-cell-group>

      <r-divider content-position="left">自定义内容</r-divider>
      <r-cell-group inset>
        <r-cell title="自定义内容" isLink @click="show3 = true"></r-cell>
      </r-cell-group>
    </view>
  </r-config-provider>
  <r-dialog
    v-model:show="show"
    :title="title"
    closeOnClickOverlay
    message="message"
    :showCancelButton="showCancelButton"
  ></r-dialog>

  <r-dialog
    v-model:show="show2"
    title="title"
    message="message"
    showCancelButton
    :beforeClose="beforeClose"
  ></r-dialog>

  <r-dialog
    v-model:show="show3"
    title="title"
    message="message"
    showCancelButton
  >
    <view style="width: 100%; padding: 10px; box-sizing: border-box">
      <r-image
        width="346px"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
      ></r-image>
    </view>
  </r-dialog>
</template>

<script setup>
import { ref } from "vue";
const show = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const title = ref("");
const showCancelButton = ref(false);
const open = (type) => {
  title.value = "";
  showCancelButton.value = false;
  if (type == 1) {
    title.value = "提示弹窗";
  }
  if (type == 3) {
    title.value = "确认弹窗";
    showCancelButton.value = true;
  }
  show.value = true;
};
const beforeClose = (action) =>
  new Promise((resolve) => {
    setTimeout(() => {
      // action !== 'confirm'  拦截取消操作
      resolve(action === "confirm");
    }, 1000);
  });
const open2 = () => {
  show2.value = true;
};
</script>

API

Props

Events

Slots

更多组件，请前往rainui