【Uniapp-Vue3】表单focus和blue事件的用法

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>

案例中用到的图片: