Как создать глобальные пользовательские директивы в Vue 3 с помощью Typescript

#typescript #vue.js #vuejs3 #custom-directive

#typescript #vue.js #vuejs3 #пользовательская директива

Вопрос:

Я создал приложение с последней версией командной строки Vue и безуспешно пытаюсь зарегистрировать глобальную пользовательскую директиву. Может кто-нибудь сказать мне, что я здесь делаю не так?

 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");
  

скриншот, показывающий проблему

Ответ №1:

Директива v-highlight должна иметь значение типа string, например :

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

  

если вы предоставили его без '' , у вас будет следующая ошибка :

[Предупреждение Vue]: свойство «yellow» было доступно во время рендеринга, но не определено в экземпляре

Это означает, что ваша директива ищет вызываемые данные или вычисляемое свойство yellow , которое не определено в вашем скрипте.

ЖИВАЯ ДЕМОНСТРАЦИЯ

Я поднял эту проблему, и они исправят эту синтаксическую ошибку