input无内容提交显示抖动提示效果

最新推荐文章于 2022-10-31 21:30:43 发布

青田。

最新推荐文章于 2022-10-31 21:30:43 发布

阅读量301

点赞数 1

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/127104293

版权

vue 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

一、效果图

二、代码

<template>
    <div>
        <div style="width:20vw; margin:80px auto 0px auto">
            <el-input v-model="name" :class="{'applyShake': shakeInput}"
                placeholder="请输入内容"></el-input>
            <div style="text-align:centen; margin-top:20px">
              <el-button type="primary" @click="handleSumbit">确定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
          data() {
             return {
                 name:'',
                 shakeInput:false,
             }
          },
          methods:{
             handleSumbit(){
                if(!this.name){
                     this.shakeInput = true;
                     setTimeout(() => {
                       this.shakeInput = false;
                     },820);
                 return;
              }
              this.$message('提交成功')
            },
        }     
    }
</script>
<style scoped >
.applyShake{
  animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
@keyframes shake {
  10%,90%{
    transform: translate3d(-1px,0,0);
  }
  20%,80%{
    transform: translate3d(2px,0,0);
  }
  30%,50%,70%{
    transform: translate3d(-4px,0,0);
  }
  40%,60%{
    transform: translate3d(4px,0,0);
  }
}
</style>