使用 Vue.js 创建 Air-UI 组件

2023-10-13 00:15:09

创建内置服务组件

在前面的章节中，我们已经学习了如何创建一个标签类型的组件 Button。本节我们将继续学习如何创建一个服务类型的组件。以 Notification 这个组件为例，它就是一个典型的内置服务组件。其实就是绑定到 Vue 的原型上，当做全局方法来使用。

1. 创建组件文件

首先，创建一个新的文件 Notification.js，并在其中写入以下代码：

import Vue from 'vue'

Vue.prototype.$notification = {
  success(message, duration = 3000) {
    // ...
  },
  error(message, duration = 3000) {
    // ...
  },
  warning(message, duration = 3000) {
    // ...
  }
}

在这个文件中，我们首先导入了 Vue，然后在 Vue 的原型上定义了一个名为 $notification 的属性，这个属性是一个对象，里面包含了三个方法：success、error 和 warning。这些方法都接收两个参数：message 和 duration。message 是要显示的消息，duration 是消息显示的持续时间，默认值为 3000 毫秒。

2. 注册组件

接下来，我们需要在 Vue 实例中注册这个组件。可以在 main.js 文件中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import Notification from './Notification'

Vue.use(Notification)

new Vue({
  render: h => h(App)
}).$mount('#app')

在 main.js 文件中，我们首先导入了 Vue、App.vue 和 Notification.js。然后，我们调用 Vue.use() 方法来注册 Notification 组件。最后，我们创建了一个新的 Vue 实例，并将其渲染到 #app 元素中。

3. 使用组件

现在，我们就可以在 Vue 组件中使用 Notification 组件了。例如，在 App.vue 文件中，我们可以添加以下代码：

<template>
  <div>
    <button @click="showSuccess">显示成功提示</button>
    <button @click="showError">显示错误提示</button>
    <button @click="showWarning">显示警告提示</button>
  </div>
</template>

<script>
import Notification from './Notification'

export default {
  methods: {
    showSuccess() {
      Notification.success('操作成功')
    },
    showError() {
      Notification.error('操作失败')
    },
    showWarning() {
      Notification.warning('请注意')
    }
  }
}
</script>