vue中 input框清除按钮的显示与隐藏

最新推荐文章于 2024-12-02 18:15:00 发布

XingFang666

最新推荐文章于 2024-12-02 18:15:00 发布

阅读量1.2w

点赞数 1

分类专栏：记录vue 项目

本文链接：https://blog.youkuaiyun.com/xfmuchengxue/article/details/89405181

版权

项目同时被 2 个专栏收录

23 篇文章

订阅专栏

记录vue

10 篇文章

订阅专栏

<input v-model="name" class="input step2-cont-ipt" required placeholder="请输入姓名" >
<a class="clear" @click="clear1();return false;"></a>

methods: {
        clear1(){
            if(this.name){
                this.name = '';
            }
        }
    }

.clear { 
                    display: none; 
                    position: absolute; 
                    width: 30px; 
                    height: 30px;
                    right: 2%;
                    top: 50%;
                    transform: translate(-2%,-50%);
                    background: url('../../assets/images/clear.png');
                    background-size:100% 100%;
                }
                .input::-ms-clear { display: none; }
                .input:valid + .clear { display: inline; }