<div id="app">
  <div class="p-5">
    <h4>滑鼠修飾符</h4>
    <ul>
      <li>.left 只當點擊鼠標左鍵時觸發。</li>
      <li>.right 只當點擊鼠標右鍵時觸發。</li>
      <li>.middle 只當點擊鼠標中鍵時觸發。</li>
    </ul>
    <h6 class="mt-3">不添加修飾符</h6>
    <div class="p-3 bg-primary">
      <span class="box" @click="trigger('right button')">
      </span>
    </div>
    <h6 class="mt-3">加修.left飾符</h6>
    <div class="p-3 bg-primary">
      <span class="box" @click.left="trigger('right button')">
      </span>
    </div>
    <h6 class="mt-3">添加.right修飾符</h6>
    <div class="p-3 bg-primary">
      <span class="box" @click.right="trigger('right button')">
      </span>
    </div>
    <h6 class="mt-3">添加.middle修飾符</h6>
    <div class="p-3 bg-primary">
      <span class="box" @click.middle="trigger('right button')">
      </span>
    </div>
  </div>
</div>
.box {
  display: block;
  background-color: var(--bs-light);
  border: 1px solid var(--bs-gray);
  width: 80px;
  height: 80px;
}
.box {
  transition: all .5s;
}
.box.rotate {
  transform: rotate(45deg)
}
const App = {
  data() {
    return {
      text: '小明',
      isTransform: true,
      num: 10,
      event: 'click',
    }
  },
  methods: {
    trigger: function(name) {
      console.log(name, '此事件被觸發了')
    }
  }
};
Vue.createApp(App).mount('#app');
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js