介绍

本文档主要用于描述 ShadcnMessage 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnButton @click="handleClick" :dark="darkMode">Show Message</ShadcnButton>
</template>

<script lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleClick() {
      this.$Message.info({
        content: 'This is an info message',
        duration: 2
      })
    }
  }
})

显示图标 (show-icon)

查看代码

<template>
    <ShadcnButton @click="handleClick" :dark="darkMode">Show Message</ShadcnButton>
</template>

<script lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleClick() {
      this.$Message.info({
        content: 'This is an info message',
        showIcon: true
      })
    }
  }
})

类型 (type)

查看代码

<template>
  <ShadcnSpace wrap :dark="darkMode">
    <ShadcnButton @click="info" :dark="darkMode">Info</ShadcnButton>
    <ShadcnButton @click="success" :dark="darkMode">Success</ShadcnButton>
    <ShadcnButton @click="warning" :dark="darkMode">Warning</ShadcnButton>
    <ShadcnButton @click="error" :dark="darkMode">Error</ShadcnButton>
    <ShadcnButton @click="loading" :dark="darkMode">Loading</ShadcnButton>
  </ShadcnSpace>
</template>

<script>
export default {
  methods: {
    info() {
      this.$Message.info({
        content: 'This is an info tip',
        type: 'info',
        showIcon: true
      });
    },
    success() {
      this.$Message.success({
        content: 'This is a success tip',
        type: 'success',
        showIcon: true
      });
    },
    warning() {
      this.$Message.warning({
        content: 'This is a warning tip',
        type: 'warning',
        showIcon: true
      });
    },
    error() {
      this.$Message.error({
        content: 'This is an error tip',
        type: 'error',
        showIcon: true
      });
    },
    loading() {
      this.$Message.loading({
        content: 'This is a loading tip',
        type: 'loading',
        showIcon: true
      });
    }
  }
}
</script>

背景色 (background)

查看代码

<template>
  <ShadcnSpace wrap :dark="darkMode">
    <ShadcnButton @click="info" :dark="darkMode">Info</ShadcnButton>
    <ShadcnButton @click="success" :dark="darkMode">Success</ShadcnButton>
    <ShadcnButton @click="warning" :dark="darkMode">Warning</ShadcnButton>
    <ShadcnButton @click="error" :dark="darkMode">Error</ShadcnButton>
    <ShadcnButton @click="loading" :dark="darkMode">Loading</ShadcnButton>
  </ShadcnSpace>
</template>

<script>
export default {
  methods: {
    info() {
      this.$Message.info({
        content: 'This is an info tip',
        type: 'info',
        showIcon: true,
        background: true
      });
    },
    success() {
      this.$Message.success({
        content: 'This is a success tip',
        type: 'success',
        showIcon: true,
        background: true
      });
    },
    warning() {
      this.$Message.warning({
        content: 'This is a warning tip',
        type: 'warning',
        showIcon: true,
        background: true
      });
    },
    error() {
      this.$Message.error({
        content: 'This is an error tip',
        type: 'error',
        showIcon: true,
        background: true
      });
    },
    loading() {
      this.$Message.loading({
        content: 'This is a loading tip',
        type: 'loading',
        showIcon: true,
        background: true
      });
    }
  }
}
</script>

可关闭 (closable)

查看代码

<template>
    <ShadcnButton @click="closable" :dark="darkMode">Show Message</ShadcnButton>
</template>

<script>
  export default {
    methods: {
      closable() {
        this.$Message.info({
          content: 'This is an info tip',
          type: 'info',
          showIcon: true,
          closable: true
        })
      }
    }
  }
</script>

消息 (Message) 属性

消息 (Message) 插槽

消息 (Message) 事件