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

问题描述

我使用最新的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");

解决方法

伪指令v-highlight的值应为string类型，如：

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

如果没有提供''就提供了它，则将出现以下错误：

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

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

LIVE DEMO

我提出了这个issue，他们将解决该语法错误