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

一、vue侦听器watch

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

 语法：

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

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

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

语法：

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

 三、计算属性

语法：

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

            },
            get(){
                return 值
            }
        }
    }

html

    
    

    
    



    

        
输入框打字特效
        

            
            
                {{m}}
            
        
    

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);
    }
}

js

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('');
        }
    }
})