ディレクティブ-カスタム ディレクティブ (破壊的な更新に属する)
Vue には、v-if、v-for、v-bind、v-show、v-model と一連の便利で高速な命令があります。今日は、vue で提供されるカスタム命令について学びましょう。
1. Vue3命令のフック機能
作成された 要素が初期化されると、
beforeMount命令が 要素にバインドされ、1 回だけ呼び出されます。
マウントされた 要素は親 dom に挿入されます。BeforeUpdate
は、要素が 更新される前に 呼び出されます 。 削除後に 1 回だけ呼び出されます。
Vue2 命令バインド挿入更新コンポーネント更新アンバインド
2. セットアップでローカル命令を定義する
ただし、注意すべき制限があります。ローカル カスタム ディレクティブをテンプレートで直接使用するには、vNameOfDirective の形式で名前を付ける必要があります。
<template>
<button @click="show = !show">开关{
{show}} ----- {
{title}}</button>
<Dialog v-move-directive="{background:'green',flag:show}"></Dialog>
</template>const vMoveDirective: Directive = {
created: () => {
console.log("初始化====>");
},
beforeMount(...args: Array<any>) {
// 在元素上做些操作
console.log("初始化一次=======>");
},
mounted(el: any, dir: DirectiveBinding<Value>) {
el.style.background = dir.value.background;
console.log("初始化========>");
},
beforeUpdate() {
console.log("更新之前");
},
updated() {
console.log("更新结束");
},
beforeUnmount(...args: Array<any>) {
console.log(args);
console.log("======>卸载之前");
},
unmounted(...args: Array<any>) {
console.log(args);
console.log("======>卸载完成");
},
};
3. ライフサイクルフックパラメータの詳細説明
最初の el は現在 DOM 要素にバインドされています
2番目のバインディング
instance : ディレクティブを使用するコンポーネントのインスタンス。
value : ディレクティブに渡される値。たとえば、v-my-directive="1 + 1" の場合、値は 2 です。
oldValue : 以前の値、beforeUpdate でのみ使用可能であり、更新されました。値が変更されているかどうかに関係なく使用できます。
arg : ディレクティブに渡される引数 (存在する場合)。たとえば、v-my-directive:foo では、arg は「foo」です。
modifiers : 修飾子 (存在する場合) を含むオブジェクト。たとえば、v-my-directive.foo.bar では、修飾子オブジェクトは {foo: true, bar: true} です。
dir : ディレクティブの登録時に引数として渡されるオブジェクト。たとえば、次のディレクティブでは
3 番目の現在の要素の仮想 DOM は Vnode です
4 番目の prevNode 上の仮想ノード。beforeUpdate および更新されたフックでのみ使用可能
4. 関数の省略表現
他のフック関数に関係なく、マウント時と更新時に同じ動作をトリガーしたい場合があります。次に、次の関数を渡すことでこの関数パターンを実装できます。
<template>
<div>
<input v-model="value" type="text" />
<A v-move="{ background: value }"></A>
</div>
</template>
<script setup lang='ts'>
import A from './components/A.vue'
import { ref, Directive, DirectiveBinding } from 'vue'
let value = ref<string>('')
type Dir = {
background: string
}
const vMove: Directive = (el, binding: DirectiveBinding<Dir>) => {
el.style.background = binding.value.background
}
</script>
1. ケースのカスタムドラッグアンドドロップコマンド
<template>
<div v-move class="box">
<div class="header"></div>
<div>
内容
</div>
</div>
</template>
<script setup lang='ts'>
import { Directive } from "vue";
const vMove: Directive = {
mounted(el: HTMLElement) {
let moveEl = el.firstElementChild as HTMLElement;
const mouseDown = (e: MouseEvent) => {
//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
console.log(e.clientX, e.clientY, "-----起始", el.offsetLeft);
let X = e.clientX - el.offsetLeft;
let Y = e.clientY - el.offsetTop;
const move = (e: MouseEvent) => {
el.style.left = e.clientX - X + "px";
el.style.top = e.clientY - Y + "px";
console.log(e.clientX, e.clientY, "---改变");
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
});
};
moveEl.addEventListener("mousedown", mouseDown);
},
};
</script>
<style lang='less'>
.box {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid #ccc;
.header {
height: 20px;
background: black;
cursor: move;
}
}
</style>
2. 案件許可ボタン
<template>
<div class="btns">
<button v-has-show="'shop:create'">创建</button>
<button v-has-show="'shop:edit'">编辑</button>
<button v-has-show="'shop:delete'">删除</button>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive, } from 'vue'
import type {Directive} from 'vue'
//permission
localStorage.setItem('userId','xiaoman-zs')
//mock后台返回的数据
const permission = [
'xiaoman-zs:shop:edit',
'xiaoman-zs:shop:create',
'xiaoman-zs:shop:delete'
]
const userId = localStorage.getItem('userId') as string
const vHasShow:Directive<HTMLElement,string> = (el,bingding) => {
if(!permission.includes(userId+':'+ bingding.value)){
el.style.display = 'none'
}
}
</script>
<style scoped lang='less'>
.btns{
button{
margin: 10px;
}
}
</style>