Notice 通知组件

通知组件

<script setup lang="ts">
import { getCurrentInstance, h } from 'vue'
import { Notice } from 'npc-ui'
import { IconAlarm } from '@npc-ui/icons'
import Title from './components/Title'
import Content from './components/Content.vue'

// content 渲染组件UI样式失效的解决办法
const instance = getCurrentInstance()

function click() {
  Notice.info({
    title: '通知',
    content: '这是通知内容',
  })
}

function click2() {
  Notice.info({
    title: h(Title),
    content: h(Content),
    appContext: instance?.appContext,
  })
}

function click3() {
  Notice.info({
    title: h('span', [h(IconAlarm), '警告']),
    content: h('div', [
      h('p', '重要消息'),
      h('p', '请立即处理'),
    ]),
    duration: 0,
  })
}
</script>

<template>
  <div class="notice-demo">
    <p>
      <NpButton @click="click">
        默认弹框
      </NpButton>
    </p>
    <p>
      <NpButton @click="click2">
        渲染组件
      </NpButton>
    </p>
    <p>
      <NpButton @click="click3">
        渲染VNode
      </NpButton>
    </p>
  </div>
</template>

<style>
.notice-demo {
  display: flex;
  gap: 10px;
}
</style>