Vue中在setup下如何使用自定義指令
更新時間：2022年07月28日 15:43:52 作者：小火車況且況且
這篇文章主要介紹了Vue中在setup下如何使用自定義指令，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何在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的文件內(nèi)容, 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" />
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了滑動穿透(鎖body)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
修飾符也是Vue的重要組成成分之一，利用好修飾符可以大大地提高開發(fā)的效率，接下來給大家介紹一下面試官最喜歡問的13種Vue修飾符，感興趣的可以了解一下2021-07-07
vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
在使用Vue2開發(fā)移動端頁面的時候,需要做一個效果,實現(xiàn)的方案是背景漸變,但是想要實現(xiàn)這個效果就必須進行定位,我的背景高度需要在一個十分恰當?shù)奈恢?但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化,為什么會變化？所以本文介紹了Vue中獲取圖片高度的方法2024-08-08
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vuex是專門為Vuejs應用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機快速了解與實例應用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關(guān)于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關(guān)資料,文中通過代碼介紹的介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
vue關(guān)于eslint空格縮進等的報錯問題及解決
這篇文章主要介紹了vue關(guān)于eslint空格縮進等的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05