<div class="card-item">
  <div class="img">
    <img v-img-rotote src="~@/assets/images/funny.png" />
  </div>
  <div class="text-title lineEllipsisOne">小火車(chē)況且況且</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>

/** 用來(lái)到處全局的 自定義指令 */
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' // 基于斷點(diǎn)的隱藏類(lèi) Element 額外提供了一系列類(lèi)名，用于在某些條件下隱藏元素
import App from './App.vue'
import router from './router'
import { store, key } from './store'
/** 注冊(cè)全局的 自定義指令 */
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">小火車(chē)況且況且</div>
</div>

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