低代码高性能原生UI框架Modal
组件类型：UxModalComponentPublicInstance
支持顶部对话框，底部对话框，内容输入对话框，弹出对话框，对话框嵌套
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | String | primary | 主题 |
| mode | String | modal | 模式 |
| position | String | center | 显示位置 |
| popoverId | String | 弹窗目标ID | |
| title | String | 标题 | |
| titleSize | Any | 16 | 标题大小 |
| titleColor | String | #000 | 标题颜色 |
| titleDarkColor | String | 深色none-不显示，auto-自动适配深色模式，其他-颜色 | |
| titleBold | Boolean | true | 标题加粗 |
| titleStyle | String | 标题自定义样式 | |
| content | String | 内容 | |
| contentSize | Any | 15 | 内容大小 |
| contentColor | String | #333 | 内容颜色 |
| contentDarkColor | String | 深色none-不显示，auto-自动适配深色模式，其他-颜色 | |
| contentAlign | String | center | 对齐方式 |
| contentStyle | String | 内容自定义样式 | |
| placeholder | String | 请输入... | 占位内容 |
| placeholderSize | Any | 15 | 占位内容大小 |
| placeholderColor | String | #888 | 占位内容颜色 |
| confirmText | String | 确定 | 确定按钮文字 |
| confirmColor | String | $ux.Conf.primaryColor | 确定按钮文字颜色 |
| confirmSize | Any | 15 | 确定按钮文字大小 |
| confirmStyle | String | 确定按钮自定义样式 | |
| cancelText | String | 取消 | 取消按钮文字 |
| cancelColor | String | $ux.Conf.primaryColor | 取消按钮文字颜色 |
| cancelSize | Any | 15 | 取消按钮文字大小 |
| cancelStyle | String | 取消按钮自定义样式 | |
| background | String | 背景颜色 | |
| backgroundDark | String | 深色none-不显示，auto-自动适配深色模式，其他-颜色 | |
| showBlur | Boolean | false | 开启模糊背景 |
| blurRadius | Number | 10 | 模糊半径 |
| blurColor | String | rgba(10,10,10,0.3) | 模糊颜色 |
| showClose | Boolean | false | 显示关闭 |
| showCancel | Boolean | false | 点击关闭 |
| editable | Boolean | false | 输入内容 |
| autoFocus | Boolean | false | 自动聚焦 |
| width | Any | 84% | 宽度 |
| height | Any | 240 | 最小高度 |
| maxHeight | Any | 500 | 最大高度 |
| radius | Any | 20 | 圆角 |
| maskClose | Boolean | false | 遮罩层关闭 |
theme
| 值 | 说明 |
|---|---|
| text | 文字 |
| info | 默认 |
| primary | 主要 |
| success | 成功 |
| warning | 警告 |
| error | 错误 |
mode
| 值 | 说明 |
|---|---|
| modal对话框 | |
| popover弹窗暂只支持Web |
position
| 值 | 说明 |
|---|---|
| center居中显示 | |
| top居上显示 | |
| bottom居下显示 |
titleDarkColor
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
contentDarkColor
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
contentAlign
| 值 | 说明 |
|---|---|
| left左对齐 | |
| center居中 | |
| right右对齐 |
backgroundDark
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| confirm | 确定按钮点击时触发 | |
| cancel | 取消按钮点击时触发 | |
| close | 关闭按钮点击时触发发 | |
| input | 输入时触发 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="对话框" :bold="true">
<ux-text text="支持顶部对话框，底部对话框，内容输入对话框，弹出对话框"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="对话框" :bold="true">
<ux-button text="对话框" @click="open()"></ux-button>
<ux-button :mt="10" text="顶部对话框" @click="top()"></ux-button>
<ux-button :mt="10" text="底部对话框" @click="bottom()"></ux-button>
<ux-button :mt="10" text="内容输入对话框 (模糊背景)" @click="input()"></ux-button>
<!-- #ifdef WEB -->
<ux-button id="popoverModal" :mt="10" text="弹出对话框" @click="popover()"></ux-button>
<!-- #endif -->
<ux-button :mt="10" text="插槽自定义内容" @click="onSlot()"></ux-button>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
<ux-modal title="提示" content="确定退出登录吗？" :show-cancel="true" :show-close="true" v-model="show1"></ux-modal>
<ux-modal position="top" title="UTS是什么？" :max-height="300" :content="content" v-model="show2"></ux-modal>
<ux-modal position="bottom" content="确定退出登录吗？" :mask-close="true" :show-close="true" v-model="show3"></ux-modal>
<ux-modal title="请输入您的姓名" :content="inputContent" :editable="true" :show-cancel="true" :show-close="true" :show-blur="true" v-model="show4" @input="onInput" @confirm="confirm"></ux-modal>
<ux-modal mode="popover" popoverId="popoverModal" content="确定退出登录吗？" width="200px" :height="120" :confirm-size="12" :cancel-size="12" :show-cancel="true" v-model="show5"></ux-modal>
<ux-modal :max-height="300" v-model="show6">
<template v-slot:title>
<text class="title">插槽标题</text>
</template>
<template v-slot:content>
<text class="content">自定义插槽内容</text>
</template>
</ux-modal>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="对话框" :bold="true">
<ux-text text="支持顶部对话框，底部对话框，内容输入对话框，弹出对话框"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="对话框" :bold="true">
<ux-button text="对话框" @click="open()"></ux-button>
<ux-button :mt="10" text="顶部对话框" @click="top()"></ux-button>
<ux-button :mt="10" text="底部对话框" @click="bottom()"></ux-button>
<ux-button :mt="10" text="内容输入对话框 (模糊背景)" @click="input()"></ux-button>
<!-- #ifdef WEB -->
<ux-button id="popoverModal" :mt="10" text="弹出对话框" @click="popover()"></ux-button>
<!-- #endif -->
<ux-button :mt="10" text="插槽自定义内容" @click="onSlot()"></ux-button>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
<ux-modal title="提示" content="确定退出登录吗？" :show-cancel="true" :show-close="true" v-model="show1"></ux-modal>
<ux-modal position="top" title="UTS是什么？" :max-height="300" :content="content" v-model="show2"></ux-modal>
<ux-modal position="bottom" content="确定退出登录吗？" :mask-close="true" :show-close="true" v-model="show3"></ux-modal>
<ux-modal title="请输入您的姓名" :content="inputContent" :editable="true" :show-cancel="true" :show-close="true" :show-blur="true" v-model="show4" @input="onInput" @confirm="confirm"></ux-modal>
<ux-modal mode="popover" popoverId="popoverModal" content="确定退出登录吗？" width="200px" :height="120" :confirm-size="12" :cancel-size="12" :show-cancel="true" v-model="show5"></ux-modal>
<ux-modal :max-height="300" v-model="show6">
<template v-slot:title>
<text class="title">插槽标题</text>
</template>
<template v-slot:content>
<text class="content">自定义插槽内容</text>
</template>
</ux-modal>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const show1 = ref<Boolean>(false)
const show2 = ref<Boolean>(false)
const show3 = ref<Boolean>(false)
const show4 = ref<Boolean>(false)
const show5 = ref<Boolean>(false)
const show6 = ref<Boolean>(false)
const inputContent = ref('李四')
const content = `uts，全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。
它可以被编译为不同平台的编程语言，如：
web平台，编译为JavaScript
Android平台，编译为Kotlin
iOS平台，编译Swift
uts 采用了与 ts 基本一致的语法规范，支持绝大部分 ES6 API。
但为了跨端，uts进行了一些约束和特定平台的增补。
过去在js引擎下运行支持的语法，大部分在uts的处理下也可以平滑的在kotlin和swift中使用。但有一些无法抹平，需要使用条件编译。和uni-app的条件编译类似，uts也支持条件编译。写在条件编译里的，可以调用平台特有的扩展语法。
`
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/modal.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
function open() {
show1.value = true
}
function top() {
show2.value = true
}
function bottom() {
show3.value = true
}
function input() {
show4.value = true
}
function onInput(e: string) {
console.log(e);
}
function confirm(e: string) {
console.log(e);
inputContent.value = ''
// setTimeout(function() {
// inputContent.value = '张三'
// }, 10);
}
function popover() {
show5.value = true
}
function onSlot() {
show6.value = true
}
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const show1 = ref<Boolean>(false)
const show2 = ref<Boolean>(false)
const show3 = ref<Boolean>(false)
const show4 = ref<Boolean>(false)
const show5 = ref<Boolean>(false)
const show6 = ref<Boolean>(false)
const inputContent = ref('李四')
const content = `uts，全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。
它可以被编译为不同平台的编程语言，如：
web平台，编译为JavaScript
Android平台，编译为Kotlin
iOS平台，编译Swift
uts 采用了与 ts 基本一致的语法规范，支持绝大部分 ES6 API。
但为了跨端，uts进行了一些约束和特定平台的增补。
过去在js引擎下运行支持的语法，大部分在uts的处理下也可以平滑的在kotlin和swift中使用。但有一些无法抹平，需要使用条件编译。和uni-app的条件编译类似，uts也支持条件编译。写在条件编译里的，可以调用平台特有的扩展语法。
`
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/modal.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
function open() {
show1.value = true
}
function top() {
show2.value = true
}
function bottom() {
show3.value = true
}
function input() {
show4.value = true
}
function onInput(e: string) {
console.log(e);
}
function confirm(e: string) {
console.log(e);
inputContent.value = ''
// setTimeout(function() {
// inputContent.value = '张三'
// }, 10);
}
function popover() {
show5.value = true
}
function onSlot() {
show6.value = true
}
</script>css
<style lang="scss">
.msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
color: white;
}
.content {
color: blue;
}
</style><style lang="scss">
.msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
color: white;
}
.content {
color: blue;
}
</style>