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

Posted on by

如何在setup下使用自定義指令

1. 局部的自定義指令

html中 v-img-rotote為自定義指令

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

在setup下面直接引用就行

  • 方式一：是在該組件下直接寫好指定代碼
<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>

小提示✨✨✨: 如果這個時候安裝瞭vscode中的Volar插件, 定義的代碼就會高亮顯示

2. 全局註冊自定義指令

全局和局部的自定義隻是引用方式不同, 這裡隻是代表個人的寫法, 小夥伴要有更好的可以直接忽視老夫的

在 src/directives中添加一個index.ts文件, 用來註冊所有的需要全局導入的自定義指令

index.ts的文件內容, permission 是用來提示可以直接使用鏈式編程的寫法註冊其他的全局自定義指令

/** 用來到處全局的 自定義指令 */
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)
}

然後將src/directives中的index.ts導入到main.ts中, 用來全局註冊, 最後將app傳入, 用來註冊全局的自定義指令

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>

3. 簡單的效果圖

4. 千萬要註意

註冊自定義指令時, 定義的name指令名稱在使用的時候,不要寫錯瞭, 這裡註冊的全局和局部的自定義指令名稱都是img-rotote, 所以在html中使用時需要v-img-rotote,

如下所示：

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：