Example 样例

先给组件做一个整体的描述吧。

如何使用

使用说明的描述 :::demo 也可以在这里做简单的参数介绍

<template>
  <fw-example>
  </fw-example>
</template>

:::

另一种使用场景或功能

Alert 组件提供了两个不同的主题：light和dark。 :::demo 通过设置effect属性来改变主题，默认为light。

<template>
  <el-alert
    title="成功提示的文案"
    type="success"
    effect="dark">
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info"
    effect="dark">
  </el-alert>
  <el-alert
    title="警告提示的文案"
    type="warning"
    effect="dark">
  </el-alert>
  <el-alert
    title="错误提示的文案"
    type="error"
    effect="dark">
  </el-alert>
</template>

:::

复杂的使用场景

自定义关闭按钮为文字或其他符号。 :::demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。closable属性决定是否可关闭，接受boolean，默认为true。你可以设置close-text属性来代替右侧的关闭图标，注意：close-text必须为文本。设置close事件来设置关闭时的回调。

<template>
  <el-alert
    title="不可关闭的 alert"
    type="success"
    :closable="false">
  </el-alert>
  <el-alert
    title="自定义 close-text"
    type="info"
    close-text="知道了">
  </el-alert>
  <el-alert
    title="设置了回调的 alert"
    type="warning"
    @close="hello">
  </el-alert>
</template>

<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>

:::

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | title | 标题 | string | — | — | | type | 主题 | string | success/warning/info/error | info | | description | 辅助性文字。也可通过默认 slot 传入 | string | — | — | | closable | 是否可关闭 | boolean | — | true | | center | 文字是否居中 | boolean | — | true | | close-text | 关闭按钮自定义文本 | string | — | — | | show-icon | 是否显示图标 | boolean | — | false | | effect | 选择提供的主题 | string | light/dark | light |

Slot

| Name | Description | |------|--------| | — | 描述 | | title | 标题的内容 |

Events

| 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | close | 关闭alert时触发的事件 | — |

Methods

| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | focus | 使 input 获取焦点 | — | | blur | 使 input 失去焦点 | — | | select | 选中 input 中的文字 | — |