Tuniao UI Uniapp V3

Appearance

12:13

TnModal-模态框 ​

Modal 模态框一般用于弹出提示信息，让用户确认下一步的操作或者提示用户操作结果。

组件位置 ​

typescript
import TnModal from '@tuniao/tnui-vue3-uniapp/components/modal/src/modal.vue'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp/components/modal'
import TnModal from '@tuniao/tnui-vue3-uniapp/components/modal/src/modal.vue'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp/components/modal'
typescript
import TnModal from '@/uni_modules/tuniaoui-vue3/components/modal/src/modal.vue'
import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3/components/modal'
import TnModal from '@/uni_modules/tuniaoui-vue3/components/modal/src/modal.vue'
import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3/components/modal'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

该组件与其他组件的使用方法不大一样，并不是通过 Props 参数来进行控制，而是通过TnModal组件的showModal方法来控制。

vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp'

const modalRef = ref<TnModalInstance>()

const openModal = () => {
  modalRef.value?.showModal({
    title: '操作提示',
    content: 'Modal内容',
  })
}
</script>

<template>
  <TnButton @click="openModal">显示模态框</TnButton>
  <TnModal ref="modalRef" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp'

const modalRef = ref<TnModalInstance>()

const openModal = () => {
  modalRef.value?.showModal({
    title: '操作提示',
    content: 'Modal内容',
  })
}
</script>

<template>
  <TnButton @click="openModal">显示模态框</TnButton>
  <TnModal ref="modalRef" />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3'

const modalRef = ref<TnModalInstance>()

const openModal = () => {
  modalRef.value?.showModal({
    title: '操作提示',
    content: 'Modal内容',
  })
}
</script>

<template>
  <tn-button @click="openModal">显示模态框</tn-button>
  <tn-modal ref="modalRef" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3'

const modalRef = ref<TnModalInstance>()

const openModal = () => {
  modalRef.value?.showModal({
    title: '操作提示',
    content: 'Modal内容',
  })
}
</script>

<template>
  <tn-button @click="openModal">显示模态框</tn-button>
  <tn-modal ref="modalRef" />
</template>

显示取消按钮 ​

默认只会显示确认按钮，如果需要显示取消按钮，可以通过showCancel参数来控制。

js
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
})
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
})

修改按钮文字 ​

通过confirmText和cancelText来修改按钮文字。

js
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  confirmText: '下一步',
  cancelText: '上一步',
})
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  confirmText: '下一步',
  cancelText: '上一步',
})

修改按钮的样式 ​

通过配置confirmStyle和cancelStyle来修改确认和取消按钮的样式。

可以通过bgColor和color来修改按钮的背景颜色和字体颜色，支持图鸟内置的颜色变量背景色、颜色值

js
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  cancelStyle: {
    bgColor: '#fff',
    color: 'tn-red',
  },
  confirmStyle: {
    color: 'tn-green',
  },
})
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  cancelStyle: {
    bgColor: '#fff',
    color: 'tn-red',
  },
  confirmStyle: {
    color: 'tn-green',
  },
})

点击取消和确认按钮的回调 ​

通过cancel和confirm来监听取消和确认按钮的点击事件。

该事件支持返回false 和 Promise且为 reject 来阻止模态框的关闭。

js
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  cancel: () => {
    console.log('点击了取消按钮')
  },
  confirm: () => {
    console.log('点击了确认按钮')
  },
})
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  cancel: () => {
    console.log('点击了取消按钮')
  },
  confirm: () => {
    console.log('点击了确认按钮')
  },
})
js
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  cancel: () => {
    console.log('阻止模态框关闭')
    // 方式一:
    // return false
    // 方式二:
    return (
      new Promise() <
      boolean >
      ((resolve, reject) => {
        reject(false)
      })
    )
  },
  confirm: () => {
    console.log('2秒后关闭模态框')
    return (
      new Promise() <
      boolean >
      ((resolve, reject) => {
        setTimeout(() => {
          resolve(true)
        }, 2000)
      })
    )
  },
})
modalRef.value?.showModal({
  title: '操作提示',
  content: 'Modal内容',
  showCancel: true,
  cancel: () => {
    console.log('阻止模态框关闭')
    // 方式一:
    // return false
    // 方式二:
    return (
      new Promise() <
      boolean >
      ((resolve, reject) => {
        reject(false)
      })
    )
  },
  confirm: () => {
    console.log('2秒后关闭模态框')
    return (
      new Promise() <
      boolean >
      ((resolve, reject) => {
        setTimeout(() => {
          resolve(true)
        }, 2000)
      })
    )
  },
})

API ​

Props ​

属性名说明类型默认值可选值
z-indexModal 模态框的 zIndexNumber20076-

Slots ​

插槽名说明
default模态框自定义内容

showModal 函数配置项 ​

属性名说明类型默认值可选值必填
content内容String--是
title标题String--否
showCancel是否显示取消按钮Booleanfalsetrue否
cancelText取消按钮的文字String取 消-否
cancelStyle取消按钮的样式ModalBtnStyle--否
confirmText确认按钮的文字String确 认-否
confirmStyle确认按钮的样式ModalBtnStyle--否
mask是否显示遮罩Booleantruefalse否
maskClosable是否允许点击遮罩关闭Booleanfalsetrue否
cancel点击取消按钮触发的回调函数，返回 false 或者返回 Promise 且被 reject 则取消关闭() => (Promise<boolean> | void) | boolean--否
confirm点击确认按钮触发的回调函数，返回 false 或者返回 Promise 且被 reject 则取消关闭() => (Promise<boolean> | void) | boolean--否

ModalBtnStyle ​

参数说明必填
bgColor按钮的背景色-
color按钮的文字颜色-

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI