uniapp vue3 typescript 自定义指令报错unknown directive如何解决？

在uniapp+vue3+typescript项目中，使用自定义指令时报错"unknown directive"，具体代码如下：

const vMyDirective = {
  mounted(el) {
    // 指令逻辑
  }
}

组件中使用：

<div v-my-directive></div>

错误提示：[Vue warn]: Failed to resolve directive: my-directive

请问这种情况该如何解决？需要额外配置ts类型声明吗？

2 回复

检查指令名称是否正确注册，确保在main.ts或组件中正确引入。指令名需以v-开头，在模板中使用时注意大小写匹配。


在uniapp + Vue3 + TypeScript中使用自定义指令时出现"unknown directive"错误，通常是由于指令注册或使用方式不正确导致的。以下是解决方案：

1. 正确注册自定义指令

全局注册（推荐）

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 注册全局指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

局部注册

<template>
  <input v-focus />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const vFocus = {
  mounted(el: HTMLElement) {
    el.focus()
  }
}
</script>

2. TypeScript类型声明

在TypeScript项目中，建议添加类型声明文件：

// types/directives.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    vFocus: typeof import('./directives/focus').default
  }
}

export {}

3. 常见错误排查

检查指令名称

确保指令名称以 v- 开头：

<!-- 正确 -->
<input v-focus />

<!-- 错误 -->
<input focus />

检查指令定义

确保指令对象结构正确：

// 正确的指令定义
const vMyDirective = {
  mounted(el: HTMLElement, binding: any) {
    // 指令逻辑
  },
  updated(el: HTMLElement, binding: any) {
    // 更新逻辑
  }
}

检查uniapp兼容性

某些DOM操作在uniapp中可能受限，使用uniapp提供的API：

const vFocus = {
  mounted(el: any) {
    // 在uniapp中可能需要使用nextTick
    uni.nextTick(() => {
      if (el.focus) {
        el.focus()
      }
    })
  }
}

4. 完整示例

<template>
  <view>
    <input v-focus placeholder="自动聚焦" />
  </view>
</template>

<script setup lang="ts">
// 局部指令定义
const vFocus = {
  mounted(el: any) {
    uni.nextTick(() => {
      el.focus()
    })
  }
}
</script>

按照以上步骤检查你的代码，应该能解决"unknown directive"错误。

回到顶部