踩坑修改el-input样式

最新推荐文章于 2024-06-28 14:59:29 发布

jieyucx

最新推荐文章于 2024-06-28 14:59:29 发布

阅读量392

点赞数

分类专栏： vue的那些事文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/jieyucx/article/details/129278746

版权

vue的那些事专栏收录该内容

53 篇文章 5 订阅

订阅专栏

文章讲述了在Vue项目中，如何使用less和scoped修饰符来修改el-input组件的样式，以及在组件间通过eventBus进行通信的方法。初始样式修改未生效，后通过添加::deep选择器解决了问题。

摘要由CSDN通过智能技术生成

修改el-input样式

<template>
    <div id="search_container">
        <el-input class="search" :id="inputObj.inputId" type="text" v-model="inputObj.userInput"
            placeholder="请输入你要查找的关键字"></el-input>
        <button id="searchBtn" @click="send">search</button>
    </div>
</template>

<script>
import eventBus from '@/eventBus/eventBus';
export default {
    data() {
        return {
            inputObj: {
                userInput: '',
                inputId: 'searchInput'
            }
        }
    },
    methods: {
        send() {
            eventBus.$emit('shareUserInput', this.inputObj)
            console.log(this.inputObj)
        }
    },
    mounted() {
        this.send()
    }
}
</script>
<style lang="less" scoped>
#search_container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    .el-input__inner {
        height: 30px;
        width: 300px;
        box-shadow: 0 2px 10px 2px #999999;
        border-radius: 30px;
        padding: 0 8px;
        border: solid 2px rgba(41, 36, 36, 0.308);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    #searchBtn {
        height: 30px;
        width: 80px;
        border-radius: 30px;
        text-align: center;
        cursor: pointer;
        background-color: aliceblue;
        border: solid 2px rgb(151, 163, 172);
    }

}</style>