uniapp小案例---趣味打字坤

当点击输入框时出现小鸡打字

当输入框失焦时打字鸡沉下去

原图自取

这里运用了一个三元 :class="isActive?'active':''",当聚焦时isActive=true从而让class绑定,当失焦时isActive=false

复制代码
<template>
  <view class="out">
    <input type="text" @focus="isActive=true" @blur="isActive=false" placeholder="请输入用户名" />
    <image class="pic" :class="isActive?'active':''"  src="../../static/test/630ef32c0688d0bc83977e0344dda16c.gif"></image>

  </view>
</template>

<script setup>
  import {ref} from "vue";
  const isActive=ref(false);


</script>

<style lang="scss" scoped>
  .out{
    // background-color: darkgray;
    width: 100%;
    height: 100px;
    padding-top: 10px;
    input{
      background-color: #fff;
      margin-top: 20px;
      margin-left: 18px;
      width: 380px;
      height: 40px;
      border: 1px solid black;
      position: relative;
      z-index: 2;
    }
    .pic{
      width: 30px;
      height: 30px;
      // 相对于最近的定位祖先元素定位:
      position: absolute;
      top: 30px;
      // 混合单位运算
      left: calc(50% - 12px);
      z-index: 1;
      // 当top值发生变化时,平滑过度
      transition: top 0.3s;

    }
    .pic.active{
      top:5px;
    }
  }
</style>
相关推荐
时间的情敌几秒前
基于 Vue3 及TypeScript 项目后的总结
前端·vue.js·typescript
lpfasd1235 分钟前
从 Electron 转向 Tauri:用 Rust 打造更轻、更快的桌面应用
javascript·rust·electron
纯爱掌门人21 分钟前
鸿蒙端云一体化云存储实战:手把手教你玩转文件上传下载
前端·harmonyos
非凡ghost23 分钟前
图吧工具箱-电脑硬件圈的“瑞士军刀”
前端·javascript·后端
非凡ghost24 分钟前
Xrecode3(多功能音频转换工具)
前端·javascript·后端
橙某人25 分钟前
飞书多维表格插件:进一步封装,提升开发效率!🚀
前端·javascript
他们叫我秃子36 分钟前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
非凡ghost37 分钟前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端
用户842981424181040 分钟前
10个JavaScript编程实用技巧
javascript
扎瓦斯柯瑞迫41 分钟前
cursor: 10分钟魔改环境、优雅获取Token
前端·javascript·后端