CSS / JavaScript

1.0

1.0

• CSS
• JavaScript
  • Axios
  • 事件机制
  • 消息通知
  • 全局变量
  • 其它可用的库

CSS

Nova 使用 Tailwind.css 库来作为前端的样式。因此，对于自定义的组件你可以随意使用 Tailwind 的功能和类。

JavaScript

当你创建自定义的 Nova 工具，资源工具，卡片，和字段的时候，你可以使用各种各样的全局可用的辅助函数。

Axios

Axios HTTP 库 是全局可用的，它可以让你很方便地发送 HTTP 请求到你自定义组件的 Laravel 控制器：

axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

Nova 请求

除了直接用 Axios 之外，你也可以使用 Nova.request() 方法。 这个方法配置了一个单独的 Axios 实例，它运用预先配置好的拦截器去处理和重定向 401， 403， 以及 500 服务器错误：

Nova.request().get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

事件机制

你自定义的组件可以使用全局的 Nova JavaScript 对象作为发布/订阅事件总线机制。 这个机制提供了以下的方法，它和 Vue 提供的 事件方法一致：

Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, callback)

消息通知

Nova 的 Vue 配置自动注册了 Vue toasted 插件。因此，在你自定义的组件内，你可以利用 this.$toasted 对象去呈现简单的消息通知：

this.$toasted.show('It worked!', { type: 'success' })
this.$toasted.show('It failed!', { type: 'error' })

全局变量

全局 Nova JavaScript 对象的 config 属性包含了当前 Nova 的 base 路径和 userId：

const userId = Nova.config.userId;
const basePath = Nova.config.base;

不过，你可以在 Nova::serving 监听器里调用 Nova::provideToScript 方法去加入额外的值， 这个监听器通常会被注册在项目或自定义组件的服务提供者的 boot 方法中：

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

/**
 * 启动所有的应用服务
 *
 * @return void
 */
public function boot()
{
    Nova::serving(function (ServingNova $event) {
        Nova::provideToScript([
            'user' => $event->request->user()->toArray(),
        ]);
    });
}

一旦通过 provideToScript 方法加载了新变量，你可以用全局的 Nova JavaScript 对象访问它:

const name = Nova.config.user.name;

其它可用的库

除了 Axios 之外，在自你定义的组件中，你还可以使用全局通用的 Lodash 和 Moment.js 库。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/nova/1.0/css-ja...

译文地址：https://learnku.com/docs/nova/1.0/css-ja...