提供指令 | Quasar 框架

提供指令

本指南适用于您想创建新的指令并通过应用扩展提供它，它将把它注入到托管应用中。

提示

要创建应用扩展项目文件夹，请首先阅读开发指南 > 介绍。

完整示例

要查看我们将构建的内容的示例，请转到 MyDirective 完整示例，这是一个包含此应用扩展的 GitHub 仓库。

创建文件夹结构以保持代码模块化和组织。例如，对于指令，创建一个结构，如下所示

package.json

src/

boot/

# 包含引导代码的文件夹

# 指令的引导文件

directive/

# 包含指令的文件夹

MyDirective.js

# 指令文件

index.js

# 在索引 API 中描述

现在，您需要处理注册您的 Vue 指令。您可以使用 /index.js 文件（在索引 API 中描述）来完成此操作，该文件是在您设置新的应用扩展时创建的。

让我们分解一下。

export default function (api) {
  // (Optional!)
  // Quasar compatibility check; you may need
  // hard dependencies, as in a minimum version of the "quasar"
  // package or a minimum version of Quasar App CLI
  api.compatibleWith('quasar', '^2.0.0')

  if (api.hasVite === true) {
    api.compatibleWith('@quasar/app-vite', '^2.0.0-beta.1')
  }
  else { // api.hasWebpack === true
    api.compatibleWith('@quasar/app-webpack', '^4.0.0-beta.1')
  }

  // Here we extend the /quasar.config file, so we can add
  // a boot file which registers our new Vue directive;
  // "extendConf" will be defined below (keep reading the tutorial)
  api.extendQuasarConf(extendConf)
}

第一组对 Quasar 进行兼容性检查（可选，但建议）。如果您的组件使用 Quasar 在某个版本之后才有的功能，您可以确保安装的 Quasar 版本是正确的。

提示

您不仅可以使用 api.compatibleWith() 检查 Quasar 包，还可以检查任何其他可用包（您没有通过应用扩展自己提供）。请阅读应用扩展开发指南 > 介绍页面中的处理包依赖项部分以获取更多信息。

第二组告诉 Quasar 在 extendQuasarConf CLI 生命周期钩子被调用时调用我们的自定义函数。它看起来像这样

function extendConf (conf, api) {
  // make sure my-directive boot file is registered
  conf.boot.push('~quasar-app-extension-my-directive/src/boot/register-my-directive.js')

  // @quasar/app-vite does not need this
  if (api.hasVite !== true) {
    // make sure boot & other files get transpiled
    conf.build.transpileDependencies.push(/quasar-app-extension-my-directive[\\/]src/)
  }
}

最后，让我们看看引导文件的外观。确保您阅读了 @quasar/app-vite 引导文件 / @quasar/app-webpack 引导文件文档，并首先了解什么是引导文件。

import MyDirective from '../directive/MyDirective.js'

// We globally register our directive with Vue;
// Remember that all directives in Vue will start with 'v-'
// but that should not be part of your directive name
// https://vuejs.ac.cn/guide/custom-directive.html#custom-directives
// 'my-directive' will be used as 'v-my-directive'
export default ({ app }) => {
  app.directive('my-directive', MyDirective)
}

发现错误了吗？在浏览器中编辑此页面