el-input的placeholder提示文本颜色淡出

最新推荐文章于 2024-06-27 15:12:01 发布

原创最新推荐文章于 2024-06-27 15:12:01 发布 · 517 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

该代码示例展示了如何在Vue.js应用中，通过JavaScript实现点击按钮后，el-input组件的placeholder颜色淡出的效果。点击‘淡出’按钮，input的父级类名添加change，并调用fadeOut方法，通过setInterval动态改变placeholder的透明度，从而达到淡出动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="main">
        <div id="app">
            <button @click="btnOut()">淡出</button>
            <el-input
                id="div1"
                size="medium"
                v-model="code"
                :placeholder="请扫描文字"
                @keydown.native.enter="getScan()"
                style="opacity: 1"
            ></el-input>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            code: '',
        };
    },

    mounted() {
        this.init();
    },
    methods: {
        getScan() {},,
        fadeOut(speed) {
            let el = document.getElementById('div1');
            el.style.opacity = 1;
            if (el.style.opacity != 0) {
                var speed = speed || 30;
                var num = 10;
                var st = setInterval(function () {
                    num--;
                    el.style.opacity = num / 10;
                    if (num <= 0) {
                        el.style.opacity = 1;
                        let ell = el.parentNode;
                        ell.classList.remove('change');
                        clearInterval(st);
                    }
                }, speed);
            }
        },
        //淡出按钮可以更换为接口方法
        btnOut() {
            //获取到input
            let el = document.getElementById('div1');
            //el-input设置样式在他标签的父级
            let ell = el.parentNode;
            ell.className += ' change';
            this.fadeOut(300)
        },
};
</script>
<style lang="scss" scoped>
//设置input淡出前的文字，这里设置的红色
::v-deep .change .el-input__inner {
    &::placeholder {
        color: red;
    }
}
</style>

在使用el-input的时候点击按钮让placeholder的颜色淡出