CSS 上划提示输入框动画

<template>
	<view class="content">
		<view class="input-group" @mouseenter="startAnimation" @mouseleave="stopAnimation">
			<input :disabled="ked" type="text" class="input" @blur="shiqu" @input="input" :class="{ act: isChecked }">
			<view class="user-label" :class="{ active: isChecked }">姓名</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const data = ref(""); // 绑定输入框的数据
	const isChecked = ref(false); // 判断是否输入框有内容
	const ked = ref(false); // 判断输入框是否可用
	// 输入框输入事件
	function input(e) {
		data.value = e.detail.value
	}
	// 移动端
	// 输入框失去焦点事件
	function shiq

相关推荐

  1. C#如何实现一个输入输入,匹配提示数据

    2024-01-10 11:32:01       51 阅读
  2. react写一个从下往出的弹弹窗组件

    2024-01-10 11:32:01       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-10 11:32:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-10 11:32:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-10 11:32:01       82 阅读
  4. Python语言-面向对象

    2024-01-10 11:32:01       91 阅读

热门阅读

  1. 2024系统分析师---论软件系统架构风格

    2024-01-10 11:32:01       57 阅读
  2. 机器学习 -- 贝叶斯决策理论

    2024-01-10 11:32:01       59 阅读
  3. API的介绍

    2024-01-10 11:32:01       62 阅读
  4. git stash 命令详解

    2024-01-10 11:32:01       79 阅读
  5. redis(1)

    2024-01-10 11:32:01       60 阅读
  6. MATLAB中slist函数用法

    2024-01-10 11:32:01       58 阅读
  7. linux学习笔记

    2024-01-10 11:32:01       40 阅读
  8. 前端常用js、css效果

    2024-01-10 11:32:01       51 阅读
  9. C++经典程序(2)

    2024-01-10 11:32:01       52 阅读
  10. 《微信小程序开发从入门到实战》学习七十七

    2024-01-10 11:32:01       59 阅读
  11. Rust基础类型之布尔类型和字符

    2024-01-10 11:32:01       52 阅读
  12. Electron快速上手

    2024-01-10 11:32:01       53 阅读