vue支持js中的事件以及图片切换案例和拖拽案例

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>