如何使用 Typescript 在 Vue 3 中创建全局自定义指令

【问题标题】：How to create global custom directives in Vue 3 with Typescript如何使用 Typescript 在 Vue 3 中创建全局自定义指令
【发布时间】：2021-01-31 03:16:05
【问题描述】：

我使用最新的 Vue cli 创建了该应用程序，我正在尝试注册一个全局自定义指令，但没有成功。有人可以告诉我我在这里做错了什么吗？

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

const app = createApp(App);

app.directive("highlight", {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value;
  },
});

app
  .use(store)
  .use(router)
  .mount("#app");

【问题讨论】：

标签： typescript vue.js vuejs3 custom-directive

【解决方案1】：

指令v-highlight 应该有一个字符串类型的值，例如：

     <h3 v-highlight="'yellow'">highlighted using yellow</h3>
    <h3 v-highlight="'#4455ff'">highlighted using blue</h3>

如果您在没有'' 的情况下提供它，您将遇到以下错误：

[Vue 警告]：在渲染期间访问了属性“黄色”但未在实例上定义

这意味着您的指令正在寻找一个名为yellow 的数据或计算属性，该属性未在您的脚本中定义。

LIVE DEMO

我提出了这个issue，他们会修复那个语法错误

【讨论】：