VEUI

VEUI on GitHub
Play!EnglishEN

Message 消息

示例

可以使用 status 属性指定不同的上下文状态,使用 display 属性指定不同的展示形态。

请在一小时内容完成付款,否则订单将自动取消
订单创建成功
网络连接失败
余额较低,请及时续费
允许上传的文件类型为:JPG、PNG
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section class="options">
    <veui-radio-button-group
      v-model="ui"
      ui="s"
      :items="uiValues"
    />

    <veui-radio-button-group
      v-model="display"
      ui="s"
      :items="displayValues"
    />
  </section>
  <section>
    <veui-message
      :display="display"
      :ui="ui"
      status="info"
    >
      请在一小时内容完成付款,否则订单将自动取消
    </veui-message>
  </section>
  <section>
    <veui-message
      :display="display"
      :ui="ui"
      status="success"
    >
      订单创建成功
    </veui-message>
  </section>
  <section>
    <veui-message
      :display="display"
      :ui="ui"
      status="error"
    >
      网络连接失败
    </veui-message>
  </section>
  <section>
    <veui-message
      :display="display"
      :ui="ui"
      status="warning"
    >
      余额较低,请及时续费
    </veui-message>
  </section>
  <section>
    <veui-message
      :display="display"
      :ui="ui"
      status="aux"
    >
      允许上传的文件类型为:JPG、PNG
    </veui-message>
  </section>
</article>
</template>

<script>
import { Message, RadioButtonGroup } from 'veui'

export default {
  name: 'message-demo',
  components: {
    'veui-message': Message,
    'veui-radio-button-group': RadioButtonGroup
  },
  data () {
    return {
      ui: 'm',
      uiValues: [
        { label: 's', value: 's' },
        { label: 'm', value: 'm' }
      ],
      statuses: ['success', 'error', 'info', 'warning', 'aux'],
      display: 'normal',
      displayValues: [
        { label: 'normal', value: 'normal' },
        { label: 'popup', value: 'popup' },
        { label: 'simple', value: 'simple' },
        { label: 'standalone', value: 'standalone' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section + section {
  margin-top: 20px;
}

.options {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>

API

属性

名称类型默认值描述
uistring'm'

预设样式。

描述
s小尺寸样式。
m中尺寸样式。
status'success' | 'error' | 'info' | 'warning' | 'aux''info'

消息状态。

描述
info信息提示状态。
success成功状态。
warning警告状态。
error错误状态。
aux辅助状态。
display'normal' | 'popup' | 'simple' | 'standalone''normal'

消息展示形态。

描述
normal普通样式,有图标和带状态文本。
popup气泡样式,默认仅展示图标,可交互调起气泡展示详细内容。
simple简单样式,没有图标。
standalone独立样式,展示图标和无状态文本。

插槽

名称描述
default消息内容区域

图标

名称描述
success成功消息。
warning警告消息。
info信息消息。
error错误消息。
aux辅助消息。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024