vue中的事件
<template>
<!-- 执行多个事件:需要把要处理的事件以英文逗号进行分隔 -->
<button @click="one('hi', $event), two('hello')">执行多个事件</button>
<!-- 对于 Vue 而言,JavaScript 中的所有事件它都支持 -->
<div class="container" @mouseenter="enter" @mouseleave="leave" @mousemove="move"></div>
</template>
<script setup lang="ts">
const one = (s: string, event: MouseEvent) => {
console.log('one.....', s, event)
}
const two = (s: string) => {
console.log('two...', s);
}
const enter = () => {
console.log('鼠标进入');
}
const leave = () => {
console.log('鼠标离开');
}
const move = () => {
console.log('鼠标移动')
}
</script>
<style>
.container {
width: 200px;
height: 200px;
background-color: #0d6efd;
}
</style>
对于无参函数,vue事件在调用方法时会产生一个事件对象,对于有参函数在必须要在方法中添加事件参数$event才能使用事件参数。
按键修饰符
<template>
<!-- 按钮修饰符 -->
<!--
.enter:回车键
.tab:tab键
.delete (捕获“删除”和“退格”键)
.esc:取消键
.space:空格
.up:向上
.down:向下
.left:向左
.right:向右
-->
<input type="text" v-model="username" @keyup.enter="submit($event)">
<input type="text" v-model="password" @keyup.space="submit($event)">
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
</template>
<script setup lang="ts">
import { ref } from '@vue/reactivity'
const username = ref<string>('')
const password = ref<string>('')
const submit = (event: KeyboardEvent) => {
console.log(event.keyCode);
console.log(username.value);
console.log(password.value);
}
const clear = () => {
console.log('按了 alt + enter 组合键')
}
</script>
<style>
.container {
width: 200px;
height: 200px;
background-color: #0d6efd;
}
</style>
关于事件捕获和事件冒泡,以及阻止默认行为
<template>
<!-- 事件修饰符 -->
<!--
.stop:用于阻止冒泡形为
.capture:用于捕获事件
.prevent:用于阻止默认形为
.self:精确控制事件源
.once:用于事件只执行一次
-->
<div class="container" @click.self="divHandler">
<button @click="btnHandler">点击冒泡</button>
<button @click.stop="btnHandler">点击不会冒泡</button>
</div>
<a href="https://www.baidu.com" @click.prevent="jump">点击不会进入百度</a>
<a href="https://www.baidu.com" v-on:click.prevent.once="jumpUrl">百度</a>
</template>
<script setup lang="ts">
const divHandler = () => {
console.log('div被点击了...');
}
const btnHandler = () => {
console.log('按钮被点击了....');
}
const jumpUrl = () => {
console.log('点击后执行了...');
}
</script>
<style>
.container {
width: 200px;
height: 200px;
background-color: #0d6efd;
}
</style>
图片切换案例
最终效果:实现点击小图标换大图切换为当前小图片
代码的实现:
<template>
<div class="container">
<div class="box">
<img :src="imgPath">
</div>
<ul>
<li v-for="(item,index) in imgs" :key="index"><img v-bind:src="item" @click="showImg($event)"></li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 指定默认显示的图片路径
let imgPath = ref<string>('src/assets/images/11.jpg')
// 封装图片数据
const imgs: string[] = ['src/assets/images/11.jpg', 'src/assets/images/13.jpg', 'src/assets/images/15.jpg', 'src/assets/images/17.jpg', 'src/assets/images/19.jpg']
// 声明事件
const showImg = (event: MouseEvent): void => {
//console.log(event.currentTarget?.src)
imgPath.value = event.currentTarget?.src
}
</script>
<style scoped>
div,ul,li,img {
padding: 0;
margin: 0;
}
.container {
width: 300px;
height: 300px;
margin: 0 auto;
}
.box {
width: 100%;
height: 168px;
border: 2px solid #ccc;
overflow: hidden;
}
.box img {
width: 300px;
}
ul {
width: 100%;
display: flex;
margin-top: 10px;
}
li {
list-style: none;
width: 80px;
height: 40px;
overflow: hidden;
border: 1px solid #ccc;
margin-right: 5px;
}
li > img {
width: 80px;
height: 40px;
cursor: pointer;
}
</style>
拖拽案例
最终需要实现的效果:点击蓝色部分实现窗口的移动,松开鼠标停止移动
代码实现:
<template>
<!--
指令的案例:拖拽指令
-->
<div class="box" v-move>
<div class="header"></div>
<div></div>
</div>
</template>
<script setup lang="ts">
// 自定义拖拽指令
import {Directive, DirectiveBinding} from "@vue/runtime-core";
const vMove: Directive = (el: HTMLElement) => {
// 获取指令绑定的对象
let moveElement = el.firstElementChild as HTMLElement // 断言
//console.log(el.firstElementChild);
const mousedown = (event: MouseEvent) => {
let x = event.clientX - el.offsetLeft
let y = event.clientY - el.offsetTop
//console.log(x, y);
const move = (event: MouseEvent) => {
el.style.left = event.clientX - x + 'px'
el.style.top = event.clientY - y + 'px'
// 鼠标释放
moveElement.addEventListener('mouseup', ()=> {
moveElement.removeEventListener('mousemove', move)
})
}
// 鼠标移动
moveElement.addEventListener('mousemove', move)
}
// 鼠标按下
moveElement.addEventListener('mousedown', mousedown)
}
</script>
<style scoped>
.box {
position: fixed;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
border: 1px solid #999;
transform: translate(-50%, -50%);
}
.header {
height: 35px;
background-color: #0a53be;
cursor: move;
}
</style>