vue使用elment ui 自定义按钮样式/改变el-button，el-input的样式详解

最新推荐文章于 2024-08-22 18:11:07 发布

草莓丸子不加冰

最新推荐文章于 2024-08-22 18:11:07 发布

阅读量9.1k

点赞数 6

分类专栏： vue CSS 文章标签： vue css html web

本文链接：https://blog.csdn.net/qq_43690438/article/details/109239600

版权

本文详细讲解了在Vue项目中如何使用Element UI自定义按钮样式，包括如何改变el-button的样式。通过设置HTML结构的type属性，并在CSS中避免使用scoped限制，可以实现自定义颜色等效果。

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

vue使用elment ui 自定义按钮样式/改变el-button的样式

例如：
在这里插入图片描述
鼠标移入按钮：

代码如下：
HTML结构：在type属性里面写自己自定义的名字

<el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.foodname" placeholder="菜品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="bblue">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="goon" @click="getData">重置</el-button>
        <el-button type="goon" @click="addData">添加</el-button>
      </el-form-item>
    </el-form>