focus就是input框聚焦时触发，blue就是input框失去焦点时触发。
分别用@focus和@blue触发事件。
下面这个例子中，就用@focus和@blur来改变Image的class样式。
触发函数时可以设置参数来获取输入框的值：
获取输入框的值就是e.detail.value
该案例完整代码如下：
<template><view class="iptbox"><input type="text" :value="iptvalue" @focus="onFocus" @blur="onBlur"><image src="../../static/chicken.gif" :class="isActive?'active':''"></image></view>
</template><script setup>import {ref} from "vue";let isActive = ref(false);// 聚焦function onFocus(e) {console.log(e);isActive.value = true;}// 失去焦点function onBlur() {isActive.value = false;}
</script><style lang="scss" scoped>.iptbox {position: relative;}input {border: 1px solid #ccc;width: 80vw;height: 40px;margin: auto;margin-top: 50px;background-color: #fff;z-index: 2;}image {width: 24px;height: 24px;position: absolute;top: 0;left: calc(50% - 12px);z-index: -1;transition: top .3s;}image.active {top: -24px;}
</style>案例中用到的图片:
