事件修饰符

@Events Modifiers

事件修饰符 Events Modifier

限制事件特性；如点击事件常见的修饰符有

点击事件常见修饰符
类型	说明
.prevent	阻止默认事件 <form> 的默认提交刷新；<a> 的默认跳转和刷新
.stop	停止事件的传播/冒泡多用于子元素
.self	事件对象 e.target 是自己才触发多用于父元素
.once	只触发一次
.capture	默认是冒泡事件；绑定一个事件捕获从文档的根节点开始，向下传播，直到到达目标元素多用于父元素

[] 阻止表单默认事件 - 提交时不刷新页面

<form @submit.prevent="submit">
    <input type="text" name="uname" placeholder="your name">
    <button>submit</button>
</form>

按键修饰符 Key Modifier

指定哪个键或哪些触发；多个按键根据先后顺序指定

如果不指定具体的键，任何一个键都可以触发

使用别名代替键，如 Enter 代表回车键、Space 代表空格键、Left 代表左方向键

还可以使用系统按键，如 Ctrl、Alt、Shift等

多用于表单

按键事件修饰符
类型	说明
keyup.enter	按下 Enter 键
keyup.alt.enter	按下 Alt 键 + Enter 键
keyup.ctrl.enter	配合 Ctrl 键 + Enter 键
keydown.tab	按下 Tab 键未释放

鼠标按键修饰符 Mouse Modifier

鼠标按键修饰符
类型	说明
left	左键
right	右键
middle	中键

Summary & Homework

Summary

事件修饰符

. prevent

. stop

. self

按键修饰符

. alt

. shift

. ctrl

Homework

[] 模态框 - 商品详情页 DetailsView.vue → 交易保障

单击"更多"，打开模态框

单击"关闭"或其它任何地方关闭模态框

样式略

方案1. 使用动态类实现 - 效果可以更丰富细腻

<div class="modal" :class="{ 'show': isShow }" @click.self="isShow = false">
  <div class="cont">
    <span class="close" @click.stop="isShow = false">×</span>
    // ...
  </div>
</div>

.modal {
  display: none;
  // ...
}

.show {
  display: flex;
}

方案2. 使用条件渲染实现 - 样式比较简单

<div class="modal" v-show="isShow" @click.self="isShow = false">
  <div class="cont">
    <span class="close" @click.stop="isShow = false">×</span>
    // ...
  </div>
</div>

改进：封装组件；使用自定义事件 defineEmits()，单击显示对应的权益模态框

<Guarantee @show-guarantee="isShowModal = true" />