用vue实现输入框打字放大特效

最新推荐文章于 2024-05-16 13:41:41 发布

与月儿漫邀

最新推荐文章于 2024-05-16 13:41:41 发布

阅读量875

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_48666244/article/details/128366664

版权

一、vue侦听器watch

目标：可以侦听data属性值改变

语法：

watch:{
    "被侦听的属性名"(newVal,oldVal){
        // 变量名对应值改变这里自动触发
    }

二、vue侦听器--深度侦听和立即执行

目标 : 侦听复杂类型 , 或者立即执行侦听函数

语法：

 watch:{
        "要侦听的属性名":{
            immediate:true,//立即执行
            deep:true,//深度侦听复杂类型内变化
            handler(newVal,oldVal){
                
            }
        }
    }

三、计算属性

语法：

computed:{
        // 写法1
        "计算属性名"(){
        
        },
        //写法2
        "计算属性名" :{
            set(值){

            },
            get(){
                return 值
            }
        }
    }

html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>输入框打字放大特效</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="container">
        <h1>输入框打字特效</h1>
        <div class="input-box">
            <input type="text" id="txtMessage" v-model="message">
            <label for="txtMessage">
                <span class="input-animate" v-for="m in message2">{{m}}</span>
            </label>
        </div>
    </div>
</body>

</html>

<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="js/index.js"></script>

css

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 方便演示，满屏居中 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(to bottom,#6a85b6,#bac8e0);
    /* 溢出隐藏 */
    overflow: hidden;
}
h1{
    color: #fff;
    text-align: center;
}
.input-box{
    position: relative;
}
.input-box input{
    /* 隐藏原生输入框 */
    opacity: 0;
}
.input-box label{
    min-width: 100%;
    min-height: 40px;
    background-color: #fff;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    padding: 0 10px;
    cursor: text;
    /* 设置过渡 */
    transition: 0.2s;
}
/* ~的作用是选择该元素之后的所有相同元素。 */
.input-box input:focus ~ label{
    box-shadow: 0 5px 20px #6a85b6;
}
.input-box span{
    font-size: 16px;
    font-weight: bold;
}
.input-animate{
    /* 打字动画：动画名 时长 加速后减速 */
    animation: print 0.2s ease-in-out;
}
.shake{
    /* 输入框颤动动画 */
    animation: shake 0.2s ease-in-out;
}

/* 定义动画 */
/* 打字动画 */
@keyframes print {
    0%{
        position: absolute;
        transform: scale(50);
    }
    99%{
        position: absolute;
    }
    100%{
        position: relative;
    }
}
/* 输入框颤动动画 */
@keyframes shake {
    50%{
        transform: scale(0.95);
    }
}

new Vue({
    el: '.container',
    data: {
        message: ''
    },
    watch: {
        // 监听输入框的文字变化，来实现输入框的颤动效果
        message: {
            handler: function(newVal, oldVal){
                // 如果文字有变化
                if(newVal.length > oldVal.length){
                    setTimeout(() => {
                        document.querySelector('.input-box').classList.add('shake');
                        setTimeout(() => {
                            document.querySelector('.input-box').classList.remove('shake');
                        }, 300);
                    }, 200);
                }
            }
        }
    },
    computed: {
        message2: function(){
            // 把输入的内容拆分为单字
            return this.message.split('');
        }
    }
})