Vue中在setup下如何使用自定义指令

<div class="card-item">
  <div class="img">
    <img v-img-rotote src="~@/assets/images/funny.png" />
  </div>
  <div class="text-title lineEllipsisOne">小火车况且况且</div>
</div>

<script lang="ts" setup>
const vImgRotote = {
	beforeMount(el: HTMLElement) {
	  el.onmouseover = () => {
	    el.style.transform = 'rotate(-360deg)'
	    el.style.transition = 'all 0.5s'
	  }
	  el.onmouseleave = () => {
	    el.style.transform = 'rotate(0)'
	  }
	}
}
</script>

<script lang="ts" setup>
import vImgRotote from '@/directives/imgRotote'
</script>

/** 用来到处全局的 自定义指令 */
import type { App } from 'vue'
import permission from './permission'
import imgRotote from './imgRotote'

export default (app: App) => {
  app.directive('img-rotote', imgRotote).directive('permission', permission)
}

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 基于断点的隐藏类 Element 额外提供了一系列类名，用于在某些条件下隐藏元素
import App from './App.vue'
import router from './router'
import { store, key } from './store'
/** 注册全局的 自定义指令 */
import globalDirectives from '@/directives'
const app = createApp(App)

app.use(store, key).use(router).use(ElementPlus).mount('#app')

globalDirectives(app)

<div class="card-item">
  <div class="img">
    <img v-img-rotote src="~@/assets/images/funny.png" />
  </div>
  <div class="text-title lineEllipsisOne">小火车况且况且</div>
</div>

<img v-img-rotote src="~@/assets/images/funny.png" />