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文件, 用來注冊所有的需要全局導(dǎo)入的自定義指令
index.ts的文件內(nèi)容, permission 是用來提示可以直接使用鏈?zhǔn)骄幊痰膶懛ㄗ云渌娜肿远x指令
/** 用來到處全局的 自定義指令 */
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導(dǎo)入到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)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
修飾符也是Vue的重要組成成分之一，利用好修飾符可以大大地提高開發(fā)的效率，接下來給大家介紹一下面試官最喜歡問的13種Vue修飾符，感興趣的可以了解一下2021-07-07
vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在使用Vue2開發(fā)移動端頁面的時候,需要做一個效果,實現(xiàn)的方案是背景漸變,但是想要實現(xiàn)這個效果就必須進行定位,我的背景高度需要在一個十分恰當(dāng)?shù)奈恢?但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化,為什么會變化？所以本文介紹了Vue中獲取圖片高度的方法2024-08-08
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機快速了解與實例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關(guān)于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關(guān)資料,文中通過代碼介紹的介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
vue關(guān)于eslint空格縮進等的報錯問題及解決
這篇文章主要介紹了vue關(guān)于eslint空格縮進等的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05