模态框 Modal ​

<template>
  <n-button type="primary" @click="showEraseModal('Some descriptions ...')">基本使用</n-button>
  <n-modal ref="modal" :loading="loading" :visible="visible" @cancel="onCancel" @ok="onConfirm" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const modal = ref()
const loading = ref(false)
const visible = ref(false)
const center = ref(true)

function showEraseModal(content: string) {
  modal.value.erase({
    title: 'Do you Want to delete these items ?',
    content: content,
  })
  center.value = true
  visible.value = true
}
function onCancel() {
  // “取消”按钮回调
  visible.value = false
}
function onConfirm() {
  // “确定”按钮回调
  loading.value = true // 开启加载状态
  setTimeout(() => {
    visible.value = false
    loading.value = false
  }, 500)
}
</script>

<template>
  <n-button type="primary" @click="showInfoModal('Some descriptions ...')">信息展示</n-button>
  <n-modal ref="modal" :visible="visible" @know="onKnow" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const modal = ref()
const visible = ref(false)
const center = ref(true)
function onKnow() {
  // “我知道了”按钮回调
  visible.value = false
}

function showInfoModal(content: string) {
  modal.value.info({
    title: 'Do you See these items ?',
    content: content,
  })
  center.value = true
  visible.value = true
}
</script>

<template>
  <n-button type="primary" @click="showFixModal('Some descriptions ...')">position</n-button>
  <n-modal ref="modal" :center="false" :top="120" :visible="visible" @know="onKnow" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const modal = ref()
const center = ref(true)
const visible = ref(false)
function onKnow() {
  // “我知道了”按钮回调
  visible.value = false
}

function showFixModal(content: string) {
  modal.value.info({
    title: 'Do you See these items ?',
    content: content,
  })
  center.value = false
  visible.value = true
}
</script>