Sard Uniapp

Appearance

在新窗口打开⤴

Dialog对话框

介绍 ​

提示或接收用户的确认。

引入 ​

js
import Dialog from 'sard-uniapp/components/dialog/dialog.vue'
import DialogAgent from 'sard-uniapp/components/dialog-agent/dialog-agent.vue'
import { dialog } from 'sard-uniapp'

代码演示 ​

基础使用 ​

先在页面放置代理组件。

tsx
<sar-dialog-agent />

接着便可以使用 dialog 等方法显示对话框。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
    <sar-list-item arrow hover title="无标题" @click="showConfirmNoTitle" />
  </sar-list>
</template>

<script setup lang="ts">
import { dialog } from 'sard-uniapp'

const showAlert = () => {
  dialog.alert({
    title: '提示',
    message: '此功能暂时无法使用',
  })
}

const showConfirm = () => {
  dialog.confirm({
    title: '提示',
    message: '确定删除？',
  })
}

const showConfirmNoTitle = () => {
  dialog.confirm({
    message:
      '孤村落日残霞，轻烟老树寒鸦，一点飞鸿影下。青山绿水，白草红叶黄花。',
  })
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
    <sar-list-item arrow hover title="无标题" @click="showConfirmNoTitle" />
  </sar-list>
</template>

<script setup lang="js">
import { dialog } from "sard-uniapp";
const showAlert = () => {
  dialog.alert({
    title: "\u63D0\u793A",
    message: "\u6B64\u529F\u80FD\u6682\u65F6\u65E0\u6CD5\u4F7F\u7528"
  });
};
const showConfirm = () => {
  dialog.confirm({
    title: "\u63D0\u793A",
    message: "\u786E\u5B9A\u5220\u9664\uFF1F"
  });
};
const showConfirmNoTitle = () => {
  dialog.confirm({
    message: "\u5B64\u6751\u843D\u65E5\u6B8B\u971E\uFF0C\u8F7B\u70DF\u8001\u6811\u5BD2\u9E26\uFF0C\u4E00\u70B9\u98DE\u9E3F\u5F71\u4E0B\u3002\u9752\u5C71\u7EFF\u6C34\uFF0C\u767D\u8349\u7EA2\u53F6\u9EC4\u82B1\u3002"
  });
};
</script>

异步关闭 ​

如果 beforeClose 返回 false 或 rejected 状态的 Promise 可阻止关闭。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="确定按钮异步关闭" @click="showAlert" />
    <sar-list-item arrow hover title="取消按钮异步关闭" @click="showConfirm" />
  </sar-list>
</template>

<script setup lang="ts">
import { dialog } from 'sard-uniapp'

const showAlert = () => {
  dialog.confirm({
    title: '提示',
    message: '点击确定按钮会在一秒钟后关闭',
    beforeClose: (type) => {
      if (type === 'confirm') {
        return new Promise<void>((resolve) => {
          setTimeout(resolve, 1000)
        })
      }
    },
  })
}

const showConfirm = () => {
  dialog.confirm({
    title: '提示',
    message: '点击取消按钮会在一秒钟后关闭',
    beforeClose: (type) => {
      if (type === 'cancel') {
        return new Promise<void>((resolve) => {
          setTimeout(resolve, 1000)
        })
      }
    },
  })
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="确定按钮异步关闭" @click="showAlert" />
    <sar-list-item arrow hover title="取消按钮异步关闭" @click="showConfirm" />
  </sar-list>
</template>

<script setup lang="js">
import { dialog } from "sard-uniapp";
const showAlert = () => {
  dialog.confirm({
    title: "\u63D0\u793A",
    message: "\u70B9\u51FB\u786E\u5B9A\u6309\u94AE\u4F1A\u5728\u4E00\u79D2\u949F\u540E\u5173\u95ED",
    beforeClose: (type) => {
      if (type === "confirm") {
        return new Promise((resolve) => {
          setTimeout(resolve, 1e3);
        });
      }
    }
  });
};
const showConfirm = () => {
  dialog.confirm({
    title: "\u63D0\u793A",
    message: "\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u4F1A\u5728\u4E00\u79D2\u949F\u540E\u5173\u95ED",
    beforeClose: (type) => {
      if (type === "cancel") {
        return new Promise((resolve) => {
          setTimeout(resolve, 1e3);
        });
      }
    }
  });
};
</script>

圆角按钮 ​

buttonType 属性值为 round 可以将底部按钮显示为圆角的形式。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
  </sar-list>
</template>

<script setup lang="ts">
import { dialog } from 'sard-uniapp'

const showAlert = () => {
  dialog.alert({
    title: '提示',
    message: '此功能暂时无法使用',
    buttonType: 'round',
  })
}

const showConfirm = () => {
  dialog.confirm({
    title: '提示',
    message: '确定删除？',
    buttonType: 'round',
  })
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
  </sar-list>
</template>

<script setup lang="js">
import { dialog } from "sard-uniapp";
const showAlert = () => {
  dialog.alert({
    title: "\u63D0\u793A",
    message: "\u6B64\u529F\u80FD\u6682\u65F6\u65E0\u6CD5\u4F7F\u7528",
    buttonType: "round"
  });
};
const showConfirm = () => {
  dialog.confirm({
    title: "\u63D0\u793A",
    message: "\u786E\u5B9A\u5220\u9664\uFF1F",
    buttonType: "round"
  });
};
</script>

有头部的 ​

配置 headed 属性让对话框显示头部，此时的对话框更像一个模态框。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
    <sar-list-item
      arrow
      hover
      title="显示提示框-无标题"
      @click="showAlertNoTitle"
    />
    <sar-list-item
      arrow
      hover
      title="显示确定框-无标题"
      @click="showConfirmNoTitle"
    />
  </sar-list>
</template>

<script setup lang="ts">
import { dialog } from 'sard-uniapp'

const showAlert = () => {
  dialog.alert({
    title: '提示',
    message: '此功能暂时无法使用',
    buttonType: 'round',
    headed: true,
  })
}

const showConfirm = () => {
  dialog.confirm({
    title: '提示',
    message: '确定删除？',
    buttonType: 'round',
    headed: true,
  })
}

const showAlertNoTitle = () => {
  dialog.alert({
    message: '此功能暂时无法使用',
    buttonType: 'round',
    headed: true,
  })
}

const showConfirmNoTitle = () => {
  dialog.confirm({
    message: '确定删除？',
    buttonType: 'round',
    headed: true,
  })
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
    <sar-list-item
      arrow
      hover
      title="显示提示框-无标题"
      @click="showAlertNoTitle"
    />
    <sar-list-item
      arrow
      hover
      title="显示确定框-无标题"
      @click="showConfirmNoTitle"
    />
  </sar-list>
</template>

<script setup lang="js">
import { dialog } from "sard-uniapp";
const showAlert = () => {
  dialog.alert({
    title: "\u63D0\u793A",
    message: "\u6B64\u529F\u80FD\u6682\u65F6\u65E0\u6CD5\u4F7F\u7528",
    buttonType: "round",
    headed: true
  });
};
const showConfirm = () => {
  dialog.confirm({
    title: "\u63D0\u793A",
    message: "\u786E\u5B9A\u5220\u9664\uFF1F",
    buttonType: "round",
    headed: true
  });
};
const showAlertNoTitle = () => {
  dialog.alert({
    message: "\u6B64\u529F\u80FD\u6682\u65F6\u65E0\u6CD5\u4F7F\u7528",
    buttonType: "round",
    headed: true
  });
};
const showConfirmNoTitle = () => {
  dialog.confirm({
    message: "\u786E\u5B9A\u5220\u9664\uFF1F",
    buttonType: "round",
    headed: true
  });
};
</script>

自定义内容 ​

对话框里面可以放置任何内容，例如以模态的方式展示一个表单，通常要配合 headed 属性一起使用。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="登录表单" @click="visible = true" />
  </sar-list>

  <sar-dialog
    v-model:visible="visible"
    title="登录"
    :before-close="beforeClose"
  >
    <sar-form ref="formRef" :model="formState">
      <sar-form-item name="name" label="用户名" :rules="[{ required: true }]">
        <sar-input inlaid placeholder="请输入" v-model="formState.name" />
      </sar-form-item>
      <sar-form-item name="password" label="密码" :rules="[{ required: true }]">
        <sar-input
          type="password"
          inlaid
          placeholder="请输入"
          v-model="formState.password"
        />
      </sar-form-item>
    </sar-form>
  </sar-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'sard-uniapp'
import { reactive } from 'vue'

const visible = ref(false)

const formRef = ref()

const formState = reactive({
  name: '',
  password: '',
})

const beforeClose = (type: string) => {
  if (type === 'confirm') {
    return formRef.value?.validate().then(() => {
      toast(JSON.stringify(formState))
      formRef.value?.reset()
    })
  }
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="登录表单" @click="visible = true" />
  </sar-list>

  <sar-dialog
    v-model:visible="visible"
    title="登录"
    :before-close="beforeClose"
  >
    <sar-form ref="formRef" :model="formState">
      <sar-form-item name="name" label="用户名" :rules="[{ required: true }]">
        <sar-input inlaid placeholder="请输入" v-model="formState.name" />
      </sar-form-item>
      <sar-form-item name="password" label="密码" :rules="[{ required: true }]">
        <sar-input
          type="password"
          inlaid
          placeholder="请输入"
          v-model="formState.password"
        />
      </sar-form-item>
    </sar-form>
  </sar-dialog>
</template>

<script setup lang="js">
import { ref } from "vue";
import { toast } from "sard-uniapp";
import { reactive } from "vue";
const visible = ref(false);
const formRef = ref();
const formState = reactive({
  name: "",
  password: ""
});
const beforeClose = (type) => {
  if (type === "confirm") {
    return formRef.value?.validate().then(() => {
      toast(JSON.stringify(formState));
      formRef.value?.reset();
    });
  }
};
</script>

内容中包含弹出框 ​

v1.4.1 起，对话框底层的 Popup 组件包裹在了 root-portal (小程序)和 teleport (H5)中，因此基于 Popup 的可弹出组件都可以相互嵌套使用，也可以放置在 scroll-view 里面。

vue
<template>
  <sar-list card>
    <sar-list-item
      arrow
      hover
      title="显示复杂的对话框"
      @click="visible = true"
    />
  </sar-list>

  <sar-dialog
    v-model:visible="visible"
    title="复杂的对话框"
    :before-close="beforeClose"
    popup-style="top: 50%"
  >
    <scroll-view
      style="height: 60vh; margin-top: 1px; margin-bottom: 16rpx"
      scroll-y
    >
      <sar-form ref="formRef" :model="formModel">
        <sar-form-item
          name="name"
          label="Activity name"
          :rules="[{ required: true }]"
        >
          <sar-input
            inlaid
            v-model="formModel.name"
            placeholder="Please input Activity name"
          />
        </sar-form-item>
        <sar-form-item name="region" label="Activity zone">
          <sar-picker-input
            v-model="formModel.region"
            placeholder="please select your zone"
            title="please select your zone"
            :columns="[
              {
                label: 'Zone one',
                value: 'shanghai',
              },
              {
                label: 'Zone two',
                value: 'beijing',
              },
            ]"
          />
        </sar-form-item>
        <sar-form-item name="date1" label="Activity time">
          <sar-datetime-picker-input
            v-model="formModel.date1"
            type="yMd"
            placeholder="Pick a date"
          />
        </sar-form-item>
        <sar-form-item name="date2" label="">
          <sar-datetime-picker-input
            v-model="formModel.date2"
            type="hms"
            placeholder="Pick a time"
          />
        </sar-form-item>
        <sar-form-item name="date3" label="Active date range">
          <sar-datetime-range-picker-input
            v-model="formModel.date3"
            type="hms"
            :tabs="['start', 'end']"
            placeholder="Pick a time"
          />
        </sar-form-item>
        <sar-form-item name="delivery" label="Instant delivery">
          <sar-switch v-model="formModel.delivery" />
        </sar-form-item>
        <sar-form-item name="type" label="Activity type">
          <sar-checkbox-input
            v-model="formModel.type"
            placeholder="Pick Activity type"
            :options="[
              { label: 'Online activities', value: 'Online activities' },
              { label: 'Promotion activities', value: 'Promotion activities' },
              { label: 'Offline activities', value: 'Offline activities' },
              {
                label: 'Simple brand exposure',
                value: 'Simple brand exposure',
              },
            ]"
          />
        </sar-form-item>
        <sar-form-item name="resource" label="Resources">
          <sar-radio-input
            v-model="formModel.resource"
            placeholder="Pick Resources"
            :options="[
              { label: 'Sponsor', value: 'Sponsor' },
              { label: 'Venue', value: 'Venue' },
            ]"
          />
        </sar-form-item>
        <sar-form-item name="desc" label="Activity form" label-valign="start">
          <sar-input
            inlaid
            v-model="formModel.desc"
            type="textarea"
            placeholder="Please input Activity form"
            show-count
          />
        </sar-form-item>
      </sar-form>
    </scroll-view>
  </sar-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'sard-uniapp'
import { reactive } from 'vue'

const visible = ref(false)

const formRef = ref()

const formModel = reactive({
  name: '',
  region: '',
  date1: undefined,
  date2: undefined,
  date3: undefined,
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const beforeClose = (type: string) => {
  if (type === 'confirm') {
    return formRef.value?.validate().then(() => {
      toast('提交成功！')
      formRef.value?.reset()
    })
  }
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item
      arrow
      hover
      title="显示复杂的对话框"
      @click="visible = true"
    />
  </sar-list>

  <sar-dialog
    v-model:visible="visible"
    title="复杂的对话框"
    :before-close="beforeClose"
    popup-style="top: 50%"
  >
    <scroll-view
      style="height: 60vh; margin-top: 1px; margin-bottom: 16rpx"
      scroll-y
    >
      <sar-form ref="formRef" :model="formModel">
        <sar-form-item
          name="name"
          label="Activity name"
          :rules="[{ required: true }]"
        >
          <sar-input
            inlaid
            v-model="formModel.name"
            placeholder="Please input Activity name"
          />
        </sar-form-item>
        <sar-form-item name="region" label="Activity zone">
          <sar-picker-input
            v-model="formModel.region"
            placeholder="please select your zone"
            title="please select your zone"
            :columns="[
              {
                label: 'Zone one',
                value: 'shanghai',
              },
              {
                label: 'Zone two',
                value: 'beijing',
              },
            ]"
          />
        </sar-form-item>
        <sar-form-item name="date1" label="Activity time">
          <sar-datetime-picker-input
            v-model="formModel.date1"
            type="yMd"
            placeholder="Pick a date"
          />
        </sar-form-item>
        <sar-form-item name="date2" label="">
          <sar-datetime-picker-input
            v-model="formModel.date2"
            type="hms"
            placeholder="Pick a time"
          />
        </sar-form-item>
        <sar-form-item name="date3" label="Active date range">
          <sar-datetime-range-picker-input
            v-model="formModel.date3"
            type="hms"
            :tabs="['start', 'end']"
            placeholder="Pick a time"
          />
        </sar-form-item>
        <sar-form-item name="delivery" label="Instant delivery">
          <sar-switch v-model="formModel.delivery" />
        </sar-form-item>
        <sar-form-item name="type" label="Activity type">
          <sar-checkbox-input
            v-model="formModel.type"
            placeholder="Pick Activity type"
            :options="[
              { label: 'Online activities', value: 'Online activities' },
              { label: 'Promotion activities', value: 'Promotion activities' },
              { label: 'Offline activities', value: 'Offline activities' },
              {
                label: 'Simple brand exposure',
                value: 'Simple brand exposure',
              },
            ]"
          />
        </sar-form-item>
        <sar-form-item name="resource" label="Resources">
          <sar-radio-input
            v-model="formModel.resource"
            placeholder="Pick Resources"
            :options="[
              { label: 'Sponsor', value: 'Sponsor' },
              { label: 'Venue', value: 'Venue' },
            ]"
          />
        </sar-form-item>
        <sar-form-item name="desc" label="Activity form" label-valign="start">
          <sar-input
            inlaid
            v-model="formModel.desc"
            type="textarea"
            placeholder="Please input Activity form"
            show-count
          />
        </sar-form-item>
      </sar-form>
    </scroll-view>
  </sar-dialog>
</template>

<script setup lang="js">
import { ref } from "vue";
import { toast } from "sard-uniapp";
import { reactive } from "vue";
const visible = ref(false);
const formRef = ref();
const formModel = reactive({
  name: "",
  region: "",
  date1: void 0,
  date2: void 0,
  date3: void 0,
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});
const beforeClose = (type) => {
  if (type === "confirm") {
    return formRef.value?.validate().then(() => {
      toast("\u63D0\u4EA4\u6210\u529F\uFF01");
      formRef.value?.reset();
    });
  }
};
</script>

自定义按钮属性 ​

使用 cancelProps 和 confirmProps 属性可以自定义取消和确定按钮组件的属性。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
  </sar-list>
</template>

<script setup lang="ts">
import { dialog } from 'sard-uniapp'

const showAlert = () => {
  dialog.alert({
    title: '提示',
    message: '此功能暂时无法使用',
    confirmProps: {
      theme: 'warning',
      type: 'default',
    },
  })
}

const showConfirm = () => {
  dialog.confirm({
    title: '提示',
    message: '确定删除？',
    confirmProps: {
      theme: 'danger',
    },
  })
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示提示框" @click="showAlert" />
    <sar-list-item arrow hover title="显示确定框" @click="showConfirm" />
  </sar-list>
</template>

<script setup lang="js">
import { dialog } from "sard-uniapp";
const showAlert = () => {
  dialog.alert({
    title: "\u63D0\u793A",
    message: "\u6B64\u529F\u80FD\u6682\u65F6\u65E0\u6CD5\u4F7F\u7528",
    confirmProps: {
      theme: "warning",
      type: "default"
    }
  });
};
const showConfirm = () => {
  dialog.confirm({
    title: "\u63D0\u793A",
    message: "\u786E\u5B9A\u5220\u9664\uFF1F",
    confirmProps: {
      theme: "danger"
    }
  });
};
</script>

API ​

DialogProps ​

属性描述类型默认值
root-class对话框根元素类名string-
root-style对话框根元素样式StyleValue-
popup-class 1.14.1+弹窗框根元素类名string-
popup-style 1.14.1+弹窗框根元素样式StyleValue-
visible (v-model)是否可见booleanfalse
title标题string-
message文本内容string-
headed是否显示带头部类型booleantrue
button-type按钮类型'round' | 'text''round'
show-cancel是否显示取消按钮booleantrue
cancel-text取消按钮文案string'取消'
show-confirm是否显示确定按钮booleantrue
confirm-text确定按钮文案string'确定'
overlay-closable点击遮罩是否关闭booleanfalse
before-close关闭前的回调，返回 false 或 Promise{<rejected>} 可阻止关闭DialogBeforeClose-
duration显隐动画时长，单位 msnumber300
confirm-props 1.10+设置确定按钮 propsButtonProps-
cancel-props 1.10+设置取消按钮 propsButtonProps-

DialogBeforeClose ​

  • 当点击确定按钮时，type 为 confirm；
  • 当点击取消按钮时，type 为 cancel；
  • 当点击关闭按钮或遮罩时，type 为 close。

loading 表示当前哪个按钮处于异步关闭状态。

ts
type DialogBeforeClose = (
  type: 'close' | 'cancel' | 'confirm',
  loading: {
    readonly cancel: boolean
    readonly confirm: boolean
    readonly close: boolean
  },
) => any | Promise<any>

DialogSlots ​

插槽描述属性
default自定义默认内容-

DialogEmits ​

事件描述类型
update:visible对话框显隐时触发(visible: boolean) => void
close点击关闭按钮或遮罩时触发() => void
cancel点击取消按钮时触发() => void
confirm点击确定按钮时触发() => void
visible-hook入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.12+入场动画开始前触发() => void
enter 1.12+入场动画开始时触发() => void
after-enter 1.12+入场动画结束时触发() => void
enter-cancelled 1.12+入场动画取消时触发() => void
before-leave 1.12+退场动画开始前触发() => void
leave 1.12+退场动画开始时触发() => void
after-leave 1.12+退场动画结束时触发() => void
leave-cancelled 1.12+退场动画取消时触发() => void

DialogAgentProps / DialogOptions ​

继承 DialogProps 并有以下额外属性。

属性描述类型默认值
id对话框组件的 idstring'dialog'
onClose 1.20.2+点击关闭按钮或遮罩时调用() => void
onCancel 1.20.2+点击取消按钮时调用() => void
onConfirm 1.20.2+点击确定按钮时调用() => void
onVisibleHook 1.20.2+入场/退场动画状态改变时调用(name: TransitionHookName) => void
onBeforeEnter 1.20.2+入场动画开始前调用() => void
onEnter 1.20.2+入场动画开始时调用() => void
onAfterEnter 1.20.2+入场动画结束时调用() => void
onEnterCancelled 1.20.2+入场动画取消时调用() => void
onBeforeLeave 1.20.2+退场动画开始前调用() => void
onLeave 1.20.2+退场动画开始时调用() => void
onAfterLeave 1.20.2+退场动画结束时调用() => void
onLeaveCancelled 1.20.2+退场动画取消时调用() => void

DialogAgentEmits 1.20.2+ ​

继承 DialogEmits。

命令式方法 ​

名称描述类型
dialog显示对话框DialogFunction
alert显示警告框DialogSimpleShowFunction
confirm显示确认框DialogSimpleShowFunction
hide隐藏指定 id 的命令式对话框(id = 'dialog') => void
hideAll隐藏所有命令式对话框() => void

DialogFunction ​

ts
type DialogFunction = DialogSimpleShowFunction & {
  alert: DialogSimpleShowFunction
  confirm: DialogSimpleShowFunction
  hide: (id?: string) => void
  hideAll: () => void
}

DialogSimpleShowFunction ​

ts
interface DialogSimpleShowFunction {
  (options: DialogOptions): void
  (title: string, options?: DialogOptions): void
}

defaultDialogOptions ​

命令式默认值和声明式有所区别。

ts
const defaultDialogOptions = {
  headed: false,
  buttonType: 'text',
  showCancel: false,
}
js
const defaultDialogOptions = {
  headed: false,
  buttonType: 'text',
  showCancel: false,
}

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-dialog-width: 640rpx;
  --sar-dialog-max-width: 90%;
  --sar-dialog-border-color: var(--sar-border-color);
  --sar-dialog-bg: var(--sar-emphasis-bg);
  --sar-dialog-border-radius: var(--sar-rounded-xl);

  --sar-dialog-header-padding-y: 32rpx;
  --sar-dialog-header-padding-x: 32rpx;

  --sar-dialog-body-padding-x: 32rpx;
  --sar-dialog-body-padding-y: 48rpx;
  --sar-dialog-body-gap: 20rpx;

  --sar-dialog-title-font-size: var(--sar-text-lg);
  --sar-dialog-title-headed-font-size: var(--sar-text-base);

  --sar-dialog-close-font-size: var(--sar-text-lg);

  --sar-dialog-message-font-size: var(--sar-text-base);
  --sar-dialog-message-color: var(--sar-secondary-color);

  --sar-dialog-footer-round-padding-x: 32rpx;
  --sar-dialog-footer-round-padding-y: 32rpx;
  --sar-dialog-footer-round-gap: 32rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao