Dialog 对话框

预览

01:38

组件名：rice-dialog

弹出模态框，常用于消息提示、消息确认，支持使用 API 的方法调用

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础使用

vue

<template>
<demo-page :row-gap="false">
  <rice-navbar title="Dialog 对话框"></rice-navbar>
  <rice-notice-bar message="支持组件调用和API调用两种方式" type="primary" right-icon="arrow-right"
    @click="toApi"></rice-notice-bar>
  <demo-block-title title="基础用法" show-set row-gap />

  <rice-cell-group radius="8px" :custom-style="{margin:'0 16px'}">
    <rice-cell title="基础用法" arrow @click="show=!show" />
    <rice-cell title="不显示标题" arrow @click="showTitle=!showTitle" />
    <rice-cell title="确认弹窗" arrow @click="showConfirm=!showConfirm" />
    <rice-cell title="自定义内容" arrow @click="showSlot=!showSlot" />
    <rice-cell title="超长内容" arrow @click="showMoreMessage=!showMoreMessage" />
  </rice-cell-group>

  <rice-dialog v-model:show="show" title="标题" :message="message" @confirm="onConfirm" @cancel="onCancel" />
  <rice-dialog v-model:show="showTitle" :message="message" />
  <rice-dialog v-model:show="showConfirm" :show-cancel-button="false" title="确认对话框" :message="message" />
  <rice-dialog v-model:show="showSlot" title="自定义内容">
    <image src="/static/images/logo.png" class="slot-image"></image>
  </rice-dialog>
  <rice-dialog v-model:show="showMoreMessage" :message="messages" title="uniappx 是什么" :show-cancel-button="false"
    confirm-button-text="很强大" />

  <demo-block-title title="按钮样式" row-gap />
  <rice-cell-group radius="8px" :custom-style="{margin:'0 16px'}">
    <rice-cell title="圆角按钮" arrow @click="openTheme('round')" />
    <rice-cell title="方形按钮" arrow @click="openTheme('square')" />
    <rice-cell title="垂直排列" arrow @click="openDirection" />
  </rice-cell-group>

  <rice-dialog v-model:show="showTheme" :title="buttonTheme=='round'?'圆角按钮':'方形按钮'" :button-theme="buttonTheme"
    :message="message" :button-layout="buttonDirection" />

  <demo-block-title title="异步关闭" row-gap />
  <rice-cell-group radius="8px" :custom-style="{margin:'0 16px'}">
    <rice-cell title="异步关闭" arrow @click="showAsync=!showAsync" />
  </rice-cell-group>
  <rice-dialog v-model:show="showAsync" :before-close="beforeClose" title="异步关闭" :message="message" />
</demo-page>
</template>

<script setup lang="ts">
import { useNavbarAndTabbarStyle } from "@/store/theme"
useNavbarAndTabbarStyle()

const show = ref(false)
const showTitle = ref(false)
const showConfirm = ref(false)
const showSlot = ref(false)
const showMoreMessage = ref(false)
const showTheme = ref(false)
const buttonTheme = ref('round')
const buttonDirection = ref('row')

const message = ref("告知当前状态、信息和解决方法等内容，描述文案尽可能控制在三行内")
const messages = ref("uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。uni-app x 是一个庞大的工程，它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。uts是一门类ts的、跨平台的、新语言。uts在Android平台编译为kotlin、在iOS平台编译为swift、在鸿蒙next平台上编译为ArkTS、在Web和小程序平台编译为js。在Android平台，uni-app x 的工程被整体编译为kotlin代码，本质上是换了vue写法的原生kotlin应用，在性能上与原生kotlin一致。开发者在 uni-app x 中，需使用 uts 而不是js。尤其是 Android端不自带js引擎，无法运行js代码。uts 全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。它在不同平台，会被编译为不同平台的native语言。")
const openTheme = (theme : string) => {
  buttonTheme.value = theme
  buttonDirection.value = 'row'
  showTheme.value = true
}
const openDirection = () => {
  buttonDirection.value = 'col'
  showTheme.value = true
}
const showAsync = ref(false)
const beforeClose = () : Promise<boolean> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true)
    }, 1500)
  })
}
const onConfirm = () => {
  uni.showToast({
    title: '点击了确定',
    icon: 'none'
  })
}
const onCancel = () => {
  console.log('点击了取消')
}
const toApi = () => {
  uni.navigateTo({
    url: '/pages/api/dialog'
  })
}

//#ifdef APP
onBackPress(() => {
  if (showSlot.value) {
    showSlot.value = false
    return true
  }
  return false
})
//#endif
</script>

<style scoped lang="scss">
.flex {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.slot-image {
  width: 100%;
  height: 150px;
}
</style>

API 调用

vue

<script setup>
import { showDialog, hideDialog } from "@/uni_modules/rice-ui"
const openDialog = () => {
  showDialog({
    title: '标题',
    message: message.value,
    confirm: () => {
      uni.showToast({
        title: '点击了确定',
        icon: 'none'
      })
    },
    cancel: () => {
      console.log('cancel')
    }
  })
}
</script>

API

Props

属性名	类型	说明	默认值
v-model:show/show	Boolean	是否显示	-
title	String	标题	-
width	String\|Number	宽度，默认320px	-
message	String	文本内容	-
message-align	String	文本内容对齐方式，可选值：center、left、right	center
button-theme	String	按钮的风格，可选值：default、round、square	default
button-layout	String	多按钮排列方式，buttonTheme不为 default 时生效，可选值：row、col	row
show-confirm-button	Boolean	是否显示确认按钮	-
confirm-button-text	String	确认按钮文字	-
confirm-button-color	String	确认按钮颜色	-
confirm-button-disabled	Boolean	是否禁用确认按钮	-
show-cancel-button	Boolean	是否显示取消按钮	-
cancel-button-text	String	取消按钮文字	-
cancel-button-color	String	取消按钮颜色	-
cancel-button-disabled	Boolean	是否禁用取消按钮	-
duration	Number	动画过渡时间，单位ms，默认250	-
overlay	Boolean	是否显示遮罩层	-
overlay-bg-color	String	遮罩层背景色	-
close-on-click-overlay	Boolean	点击遮罩层是否关闭	-
before-close	Function	异步关闭，只对确定按钮起作用	-
bg-color	String	背景色	-
z-index	Number	z-index层级	-
margin-top	Number\|String	margin-top的值	-
use-dialog-page	Boolean	是否使用dialogPage，仅APP支持	-
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
confirm	点击确定按钮时触发	-
cancel	点击取消按钮时触发	-
open	打开时触发	-
close	关闭时触发	-
opened	打开动画结束时触发	-
closed	关闭动画结束时触发	-
clickOverlay	点击遮罩层时触发	-

Slot

名称	说明
title	自定义标题
default	自定义内容
footer	自定义顶部按钮

类型定义

组件导出如下类型

const dialogRef=ref<RiceDialogComponentPublicInstance|null>(null)

Dialog 对话框 ​

平台兼容性 ​

uni-app x ​

基础使用 ​

API 调用 ​

API ​

Props ​

Events ​

Slot ​

类型定义 ​

Dialog 对话框

平台兼容性

uni-app x

基础使用

API 调用

API

Props

Events

Slot

类型定义