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">小火車(chē)況且況且</div>
</div>在setup下面直接引用就行
- 方式一：是在該組件下直接寫(xiě)好指定代碼
<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>- 方式二：是在固定文件夾下編寫(xiě)好了指令代碼, 然后直接引用即可, 前提是代碼不能出錯(cuò)的喲
<script lang="ts" setup> import vImgRotote from '@/directives/imgRotote' </script>
小提示???: 如果這個(gè)時(shí)候安裝了vscode中的Volar插件, 定義的代碼就會(huì)高亮顯示
2. 全局注冊(cè)自定義指令
全局和局部的自定義只是引用方式不同, 這里只是代表個(gè)人的寫(xiě)法, 小伙伴要有更好的可以直接忽視老夫的
在 src/directives中添加一個(gè)index.ts文件, 用來(lái)注冊(cè)所有的需要全局導(dǎo)入的自定義指令
index.ts的文件內(nèi)容, permission 是用來(lái)提示可以直接使用鏈?zhǔn)骄幊痰膶?xiě)法注冊(cè)其他的全局自定義指令
/** 用來(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)
}然后將src/directives中的index.ts導(dǎo)入到main.ts中, 用來(lái)全局注冊(cè), 最后將app傳入, 用來(lái)注冊(cè)全局的自定義指令
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>3. 簡(jiǎn)單的效果圖
4. 千萬(wàn)要注意
注冊(cè)自定義指令時(shí), 定義的name指令名稱(chēng)在使用的時(shí)候,不要寫(xiě)錯(cuò)了, 這里注冊(cè)的全局和局部的自定義指令名稱(chēng)都是img-rotote, 所以在html中使用時(shí)需要v-img-rotote,
如下所示：
<img v-img-rotote src="~@/assets/images/funny.png" />
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue事件符.capture的含義及用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了滑動(dòng)穿透(鎖body)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
修飾符也是Vue的重要組成成分之一，利用好修飾符可以大大地提高開(kāi)發(fā)的效率，接下來(lái)給大家介紹一下面試官最喜歡問(wèn)的13種Vue修飾符，感興趣的可以了解一下2021-07-07
vue讀取本地的excel文件并顯示在網(wǎng)頁(yè)上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁(yè)上方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在使用Vue2開(kāi)發(fā)移動(dòng)端頁(yè)面的時(shí)候,需要做一個(gè)效果,實(shí)現(xiàn)的方案是背景漸變,但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位,我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢?但是我的圖片會(huì)隨著移動(dòng)端頁(yè)面的變化而發(fā)生高度的變化,為什么會(huì)變化？所以本文介紹了Vue中獲取圖片高度的方法2024-08-08
Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue狀態(tài)機(jī)的開(kāi)啟與停止操作詳細(xì)講解
Vuex是專(zhuān)門(mén)為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關(guān)于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關(guān)資料,文中通過(guò)代碼介紹的介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05