@koreyhan/fw-example v1.0.0

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

Slot

Events

Methods