小鸡动画

<template>
	<!-- 循环，input焦点测试,小鸡动画🐥 -->
	<view>
		<view v-for="item,index in list">
			<checkbox></checkbox>
			<text space="emsp">{{item.name}}       </text>
			<text>{{item.price}}元</text>
			<button style="margin-left: 50px;" type="warn" size="mini" @click="remove(index)">删除</button>
		</view>
	</view>
	
	
	<view class="out">
		<input :value="inputValue" @focus="onFocus" @blur="onBlur" />
		<image src="../../static/chicken.gif" class="pic" :class="active?'active':''"></image>
	</view>
</template>

<script setup>
import {ref} from "vue"
	
const active = ref(false)
const inputValue = ref("123")
const list = ref([
	{id:1,name:"小米手机",price:"1000"},
	{id:2,name:"苹果手机",price:"2000"},
	{id:3,name:"华为手机",price:"3000"},
])

function onFocus(e){
	console.log("获取焦点")
	active.value=true
	console.log(e)
}

function onBlur(e){
	console.log("失去焦点")
	active.value=false
	console.log(e)
}

function remove(index){
	list.value.splice(index,1)
}
</script>

<style lang="scss" scoped>

	
.out{
	margin-top: 50px;
	position: relative;
	input{
		border: 1px solid black;
		height: 50px;
		position: relative;
		z-index: 2;
		background-color: white;
	}
	.pic{
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 1;
		top: 0px;
		left: calc(50% - 15px);
		transition: top 0.3s;
	}
	.active{
		top:-30px;
	}
}
</style>