Passion UI

Appearance

Return to top
On this page

Message

基础用法

TIP

函数式调用

show me the code
<template>
  <div class="flex flex-row gap-2 flex-wrap">
    <p-button type="info" @click="handleClick('info')">
      信息提示
    </p-button>
    <p-button type="success" @click="handleClick('success')">
      成功了
    </p-button>
    <p-button type="warning" @click="handleClick('warning')">
      告警了
    </p-button>
    <p-button type="error" @click="handleClick('error')">
      失败了
    </p-button>
    <p-button @click="handleClick('loading')">
      loading
    </p-button>
  </div>
</template>

<script setup lang='ts'>
import { message } from 'passion-ui'
const handleClick = (type) => {
  message[type]('装老师傅')
}
</script>
<style scoped>
</style>

位置 placement

TIP

top topLeft topRightbottom bottomLeft bottomRight

show me the code
<template>
  <div class="flex flex-row gap-2 flex-wrap">
    <p-button type="info" @click="handleClick('top')">
      top
    </p-button>
    <p-button type="success" @click="handleClick('topLeft')">
      topLeft
    </p-button>
    <p-button type="warning" @click="handleClick('topRight')">
      topRight
    </p-button>
    <p-button type="error" @click="handleClick('bottom')">
      bottom
    </p-button>
    <p-button @click="handleClick('bottomLeft')">
      bottomLeft
    </p-button>
    <p-button @click="handleClick('bottomRight')">
      bottomRight
    </p-button>
  </div>
</template>

<script setup lang='ts'>
import { message } from 'passion-ui'
const handleClick = (placement) => {
  message({
    type: 'success',
    content: '装老师傅',
    placement
  })
}
</script>
<style scoped>
</style>

显示时间控制

DANGER

duration 呈现时间是从出现动画结束后开始计时

TIP

closable 可以控制是否显示关闭按钮 forceClose 强制关闭默认是关闭的 这就意味着只要鼠标在消息上那么不管结束时间到没到都不会消失

show me the code
<template>
  <div class="flex flex-row gap-2 flex-wrap">
    <p-button type="info" @click="handleClick(2000)">
      2秒
    </p-button>
    <p-button type="success" @click="handleClick(3000)">
      3秒
    </p-button>
    <p-button type="warning" @click="handleClick(10000)">
      10s
    </p-button>
    <p-button type="error" @click="handleClick(0)">
      不消失 duration=0
    </p-button>
    <p-button @click="handleClose">
      可手动移除
    </p-button>
    <p-button @click="handleClose">
      不消失的也能手动移除
    </p-button>
    <p-button @click="forceClose">
      不管鼠标是否放到消息上，时间到了都移除
    </p-button>
  </div>
</template>

<script setup lang='ts'>
import { message } from 'passion-ui'
const handleClick = (duration) => {
  message({
    type: 'success',
    content: '装老师傅',
    duration
  })
}
const handleClose = () => {
  message({
    type: 'success',
    content: '不装老师傅',
    closable: true,
    duration: 0
  })
}
const forceClose = () => {
  message({
    type: 'success',
    content: '不装老师傅',
    duration: 2000,
    forceClose: true
  })
}
</script>
<style scoped>
</style>