Confirm 确认框

在modal的基础上，快速实现确认功能

基础用法

用法

使用需要全局注册使用 modalInstall 方法

import { modalInstall } from 'apathia-ui'
app.use(modalInstall)

使用useConfirm方法实现

vue
<template>
  <div>
    <ap-button @click="showConfirm">基本用法</ap-button>
  </div>
</template>

<script lang="ts" setup>
import { useConfirm } from 'apathia-ui'
const { confirm } = useConfirm()
function showConfirm() {
  confirm({
    title: '确认',
    render: '内容',
    btnPosition: 'center',
  })
    .then(() => {
      console.log('确认')
    })
    .catch(() => {
      console.log('取消')
    })
}
</script>

可以通过renderFooter的方式来实现自定义 footer

vue
<template>
  <ap-button @click="showConfirm">自定义footer</ap-button>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { useConfirm } from 'apathia-ui'

const { confirm } = useConfirm()
const confirmVal = ref('')

function showConfirm() {
  confirm({
    title: '确认',
    render: '内容',
    renderFooter: props =>
      h(
        'div',
        { onClick: () => props?.cancel && props.cancel() },
        '自定义 footer',
      ),
  })
    .then(() => {
      confirmVal.value = '确认'
    })
    .catch(() => {
      confirmVal.value = '取消'
    })
}
</script>

Confirm Props

prop	说明	类型	默认值
title	标题	string	''
render	内容	string & CustomRender	''
confirmText	确认按钮	string	确认
cancelText	取消按钮	string	取消
btnPosition	按钮位置	['left', 'right', 'center']	right
renderFooter	自定义底部	CustomRender	() => {}

Confirm 确认框 ​

基础用法 ​

自定义 footer ​

Confirm Props ​

Confirm 确认框

基础用法

自定义 footer

Confirm Props