Custom Directives and Plugins

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Custom directive lifecycle ကိုသုံးရန်
Directive နှင့် component ကိုရွေးချယ်ရန်
Plugin register လုပ်ရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Custom directive ကို low-level DOM behavior ပြန်လည်အသုံးပြုလိုသောအခါသာသုံးပါ။ UI structure ပါလျှင် component သို့မဟုတ် composable ပိုသင့်တော်သည်။ App-wide services နှင့် directives စုစည်းရန် plugin ၏ install(app) ကိုသုံးနိုင်သည်။

vue

<script setup>
const vFocus = {
  mounted(element) {
    element.focus()
  }
}
</script>

<template>
  <label>
    Search
    <input v-focus placeholder="Type to search">
  </label>
</template>

You should see

Search input receives focus after mount

လက်တွေ့စမ်းကြည့်ရန်

Element အပြင်ဘက် click လျှင် callback ခေါ်သော v-click-outside custom directive တစ်ခုရေးပါ။

Custom Directives — Vue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

ရိုးရိုး template logic ကို directive အဖြစ်ရှုပ်ထွေးစေခြင်း
Directive event listener ကို unmounted hook တွင်မရှင်းခြင်း

လေ့ကျင့်ခန်း

Element အပြင်ဘက် click လျှင် callback ခေါ်သော v-click-outside custom directive တစ်ခုရေးပါ။

You'll know it worked when: Search input receives focus after mount