提供指令
本指南适用于您想要创建新指令并通过应用扩展提供指令的情况,该指令会将其注入到宿主应用中。
TIP
要创建应用扩展项目文件夹,请首先阅读开发指南>简介.
完整例子
要查看我们将构建的示例,请转到MyDirective完整示例, 它是此应用程序扩展的一个Github存储库。
创建一个文件夹结构以使代码模块化和井井有条。 例如,对于指令,创建一个如下所示的结构:
.
├── package.json
└── src
├── boot # 包含“boot”代码的文件夹
│ └── register-my-directive.js # 组件的启动文件
├── directive # 包含组件的文件夹
│ └── MyDirective.js # 指令文件
└── index.js # 在索引API中描述
现在,您需要处理注册Vue指令。 您可以使用设置新应用扩展时创建的/index.js
文件(在索引API中进行描述)来执行此操作。
让我们分解一下。
// file: /index.js
module.exports = function (api) {
// (可选!)
// Quasar 兼容性检查; 您可能需要硬性依赖性,
// 例如最低版本的“quasar”软件包
// 或最低版本的Quasar App CLI
api.compatibleWith('quasar', '^2.0.0')
if (api.hasVite === true) {
api.compatibleWith('@quasar/app-vite', '^1.0.0-beta.0')
}
else { // api.hasWebpack === true
api.compatibleWith('@quasar/app-webpack', '^3.0.0')
}
// 在这里,我们扩展了/quasar.config.js,
// 因此我们可以添加一个启动文件来注册我们的新UI指令;
// “extendConf”将在下面定义(请继续阅读教程)
api.extendQuasarConf(extendConf)
}
第一组与Quasar进行兼容性检查(这是可选的,但建议这样做)。 如果您的组件使用的Quasar功能在某个版本之后可用,则可以确保安装的Quasar版本是正确的。
TIP
您不仅可以执行api.compatibleWith()
来检查Quasar软件包,还可以使用任何其他可用的软件包(您不通过应用扩展提供自己的软件包)进行检查。 请阅读“应用扩展开发指南>介绍”页面中的处理软件包依赖关系部分,以获取更多信息。
第二组告诉Quasar在调用extendQuasarConf
CLI生命周期钩子时调用我们的自定义函数。 它看起来像这样:
// file: /index.js
function extendConf (conf, api) {
// 确保已注册my-directive启动文件
conf.boot.push('~quasar-app-extension-my-directive/src/boot/register-my-directive.js')
// @quasar/app-vite不需要这个
if (api.hasVite !== true) {
// 确保启动和其它文件被编译
conf.build.transpileDependencies.push(/quasar-app-extension-my-directive[\\/]src/)
}
}
最后,让我们看看启动文件的样子。 确保您已阅读启动文件文档,并了解什么是启动文件。
// file: /src/boot/my-directive.js
import MyDirective from '../directive/MyDirective.js'
// 我们使用Vue全局注册了我们的指令;
// 请记住,Vue中的所有指令都将以“ v-”开头
// 但不应该是您的指令名称的一部分
// https://vuejs.org/guide/custom-directive.html#custom-directives
// 'my-directive'将用作'v-my-directive'
export default ({ app }) => {
app.directive('my-directive', MyDirective)
}