تغییردهنده های رویداد (Event Modifiers)

«تغییردهنده رویداد (Event Modifier)» یعنی پسوندی برای v-on که رفتار رویداد را دقیق تر کنترل می کند. مثلا فقط یک بار اجرا شود، پیش فرض لغو شود، یا با کلید خاص اجرا شود.

چطور رفتار v-on را تغییر دهیم؟

کافی است نقطه و اسم تغییردهنده را اضافه کنیم. مثلا .once یعنی متد فقط بار اول اجرا شود.

<div id="app">
  <p>Click the button to create an alert:</p>
  <button v-on:click.once="createAlert">Create Alert</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  methods: {
    createAlert() {
      alert('Alert created from button click');
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

نکته: می توان همان کار را داخل متد با event.preventDefault() انجام داد؛ اما تغییردهنده ها خواناتر هستند.

تغییردهنده های رویداد صفحه کلید

رویدادهای «keydown»، «keypress»، «keyup» داریم. با پسوندهایی مثل .enter، .space، یا حروف مثل .s روی کلید خاص گوش می دهیم.

<input v-on:keydown="getKey">
<p>{{ keyValue }}</p>

<script>
const app = Vue.createApp({
  data() {
    return {
      keyValue: ''
    };
  },
  methods: {
    getKey(evt) {
      this.keyValue = evt.key;
      console.log(evt.key);
    }
  }
});
<\/script>

مشاهده در ادیتور

نمونه: اجرای متد با کلید مشخص

با .s فقط هنگام فشردن «S» متد اجرا می شود.

<div id="app">
  <p>Try pressing the 's' key:</p>
  <textarea v-on:keyup.s="createAlert"></textarea>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  methods: {
    createAlert() {
      alert("You pressed the 'S' key!");
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

ترکیب چند تغییردهنده

می توان چند پسوند را ترکیب کرد. مثلا همزمان .ctrl و .s باهم.

<div id="app">
  <p>Press Ctrl + S inside textarea:</p>
  <textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  methods: {
    createAlert() {
      alert("You pressed the 'S' and 'Ctrl' keys, in combination!");
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

تغییردهنده های دکمه ماوس

برای تشخیص دکمه خاص از .left، .center، .right استفاده کن. می توان با کلیدهای سیستمی هم ترکیب کرد.

<div id="app">
  <div
    v-on:click.right="changeColor"
    v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      bgColor: 0
    };
  },
  methods: {
    changeColor() {
      this.bgColor = this.bgColor + 50;
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

ترکیب با کلیدهای سیستمی و جلوگیری از منوی راست کلیک

می توان .ctrl را افزود. همچنین با .prevent منوی پیش فرض راست کلیک را مخفی کن.

<!-- Right click + Ctrl -->
<div
  v-on:click.right.ctrl="changeColor"
  v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
  <p>Press right mouse button here.</p>
</div>

مشاهده در ادیتور

<!-- Right click + prevent default menu -->
<div
  v-on:click.right.prevent="changeColor"
  v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
  <p>Press right mouse button here.</p>
</div>

مشاهده در ادیتور

نمونه پیشرفته: کلیکِ چپ + شیفت

با click.left.shift تصویر بعدی نمایش داده می شود.

<div id="app">
  <p>Hold 'Shift' key and press left mouse button:</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      imgUrlIndex: 0,
      images: [
        'img_tiger_square.jpeg',
        'img_moose_square.jpeg',
        'img_kangaroo_square.jpeg'
      ],
      imgUrl: 'img_tiger_square.jpeg'
    };
  },
  methods: {
    changeImg() {
      this.imgUrlIndex = this.imgUrlIndex + 1;
      if (this.imgUrlIndex >= 3) {
        this.imgUrlIndex = 0;
      }
      this.imgUrl = this.images[this.imgUrlIndex];
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

گام های عملی

1. رویداد را با v-on تنظیم کن.
2. پسوند مناسب را اضافه کن.
3. متد را ساده و خوانا بنویس.

جمع بندی سریع

• .once فقط یک بار اجرا می کند.
• .prevent رفتار پیش فرض را لغو می کند.
• کلیدها را با .enter، .s و… هدف بگیر.
• می توان تغییردهنده ها را ترکیب کرد.

برای تمرین بیشتر، صفحه متدها و v-on را ببین. عبارت «تغییردهنده های رویداد» را در پروژه ات استفاده کن.