提供指令 | Quasar 中文网

提供指令

本指南适用于你需要创建一个新的指令并通过应用扩展提供该指令，该扩展会将其注入到托管应用中的情况。

¥This guide is for when you want to create a new directive and provide it through an App Extension, which will inject it into the hosting app.

提示

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

¥To create an App Extension project folder, please first read the Development Guide > Introduction.

完整示例

要查看我们将要构建的示例，请前往 MyDirective 完整示例，这是包含此应用扩展程序的 GitHub 仓库。

¥To see an example of what we will build, head over to MyDirective full example, which is a GitHub repo with this App Extension.

创建一个文件夹结构，以保持代码模块化和有序性。例如，对于指令，请创建如下结构：

¥Create a folder structure to keep your code modularized and organized. For instance, for a directive, create a structure that looks like this:

package.json

src/

boot/

# folder to contain boot code

# boot file for directive

directive/

# folder to contain directive

MyDirective.js

# directive file

index.js

# Described in Index API

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

¥Now, you need to handle registering your Vue directive. You do this with the /index.js file (described in the Index API) that was created when you set up your new App Extension.

让我们分解一下。

¥Let’s break it down.

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')
  }
  else { // api.hasWebpack === true
    api.compatibleWith('@quasar/app-webpack', '^4.0.0')
  }

  // 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 版本是正确的。

¥The first group does a compatibility check with Quasar (which is optional, but recommended). If your component is using features of Quasar that were available after a certain version, you can make sure that the version of Quasar installed is the correct one.

提示

你不仅可以使用 api.compatibleWith() 来检查 Quasar 软件包，还可以使用任何其他可用软件包（你未通过应用扩展自行提供的软件包）进行检查。请阅读“应用扩展开发指南”>“简介”页面中的处理包依赖部分了解更多信息。

¥Not only can you do a api.compatibleWith() to check against Quasar packages, but with any other available packages (that you do not supply yourself through your App Extension) as well. Please read Handling package dependencies section from the App Extension Development Guide > Introduction page for more information.

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

¥The second group tells Quasar to call our custom function when the extendQuasarConf CLI life-cycle hook is called. It would look something like this:

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.webpackTranspileDependencies.push(/quasar-app-extension-my-directive[\\/]src/)
  }
}

最后，让我们看看启动文件是什么样子的。请确保你已阅读 @quasar/app-vite Boot files / @quasar/app-webpack Boot files 文档并了解 Boot 文件的含义。

¥Finally, let’s see how the boot file would look like. Make sure that you read the @quasar/app-vite Boot files / @quasar/app-webpack Boot files documentation and understand what a Boot file is first.

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.org/guide/custom-directive.html#custom-directives
// 'my-directive' will be used as 'v-my-directive'
export default ({ app }) => {
  app.directive('my-directive', MyDirective)
}