nuxt js中的自定义指令

Posted 2023-02-22

【中文标题】nuxt js中的自定义指令

【英文标题】：Custom Directive in nuxt js

【发布时间】：2018-12-25 09:47:08

【问题描述】：

有没有办法在 nuxt js 中编写自定义指令，该指令适用于 s-s-r 和前端（甚至仅适用于 s-s-r）？

我在以下文档中尝试过： https://nuxtjs.org/api/configuration-render#bundleRenderer

所以我添加了这段代码：

  module.exports = 
      render: 
        bundleRenderer: 
          directives: 
            custom1: function (el, dir) 
              // something ...
            
          
        
      
    

到 nuxt.config.js

然后我在模板中使用它：

<component v-custom1></component>

但它不起作用，它只是抛出前端错误

[Vue 警告]：无法解析指令：custom1

而且它似乎在服务器端也不起作用。

感谢您的建议。

【问题讨论】：

感谢@Sphinx，但这通常与我粘贴的代码相同，它对我不起作用，请问你有一些工作示例吗？

我现在遇到了和你一样的问题（Nuxt.js 1.4.0）。我刚试过bundleRenderer.shouldPreload 效果很好，但bundleRenderer.directives 没有。

【参考方案1】：

如果您想在 Nuxt 中使用自定义指令，您可以执行以下操作：

在 plugins 文件夹中创建一个文件，例如，directions.js 在 nuxt.config.js 添加类似plugins: ['~/plugins/directives.js']

在您的新文件中添加您的自定义指令，如下所示：

import Vue from 'vue'

Vue.directive('focus', 
  inserted: (el) => 
    el.focus()
  
)

【讨论】：

感谢提示，但这仅适用于前端，对服务器端呈现的 html 没有任何影响。

在此语法中使用 bind 和 unbind 工作。

【参考方案2】：

如何创建指令

---

您可以通过将 .client.js 扩展名添加到指令文件来使指令在客户端上运行。这适用于s-s-r 和static 渲染。

// plugins/directive.client.js

import Vue from 'vue'

Vue.directive('log-inner-text', 
  inserted: el => 
    console.log(el.innerText)
  
)

---

如何插入指令

在您的 nuxt.config.js 文件中将其添加为这样的插件。

plugins: [
  '~/plugins/directive.client.js'
]

不要忘记将指令保存在插件文件夹中。

---

如何使用指令

<div v-log-inner-text>Hello</div>

控制台日志

> "Hello"

我写了一篇中型文章，更深入地介绍了它的工作原理。它向您展示了如何制作一个指令，使元素在滚动时呈现动画效果：Nuxt - Creating Custom Directives For Static & s-s-r Sites

【参考方案3】：

在 nuxt-edge 中测试（它的 nuxt 2.0 将在本月或下个月发布，但它相当稳定）。

nuxt.config.js

  render: 
    bundleRenderer: 
      directives: 
        cww: function (vnode, dir) 
          const style = vnode.data.style || (vnode.data.style = )
          style.backgroundColor = '#ff0016'
        
      
    
  

page.vue

<div v-cww>X</div>

从服务器生成的 html：

<div style="background-color:#ff0016;">X</div>

【讨论】：

如何设置元素的innerText？

@TimarIvoBatis 试试这个，***.com/questions/59401783/…

谢谢哈哈，这是我的问题，也是我的答案：D

PS：我还写了一篇关于自定义 s-s-r 指令的小文章：blog.lichter.io/posts/universal-s-s-r-vue-component-guide/…

【参考方案4】：

对于其他来到这里的人，接受的答案允许您运行仅 s-s-r 指令。如果您想在任何地方运行指令，这很有帮助，但有点不直观。

如果您仅使用 nuxt.config.js 通过render 实现指令，如果不添加指令插件并将其添加到配置中，客户端将不支持该指令（请参阅如何创建指令答案）。

要对此进行测试，请尝试以下实验：

按照说明使用插件创建指令（制作一个称为加载）

Vue.directive('loading', function (el, binding) 
  console.log('running loading directive client side')
)

将此添加到您的 nuxt.config：

  render: 
    bundleRenderer: 
      directives: 
        loading (element, binding) 
          console.log('running loading directive server side')
        
      
    
  

在 Vue 页面文件上使用该指令，例如：

<div v-loading="true">Test</div>

在页面加载时，您会看到客户端和 s-s-r 指令都在运行。如果你删除客户端指令，你会看到像 OP 一样抛出的错误：[Vue warn]: Failed to resolve directive: loading。

在 nuxt 2.12.2 上测试。