Vue项目中Element UI块级按钮(Block Button)实现方法咨询
实现Element UI块级按钮(与列宽一致)的两种方法
嘿,我之前做Vue项目用Element UI时也碰到过这个需求!官方文档确实没专门提块级按钮的实现,但其实用两种简单方式就能轻松搞定,分享给你:
方法一:自定义全局CSS类(推荐复用)
给按钮加一个自定义类,然后写CSS让它占满容器宽度:
- 在你的全局样式文件(比如
App.vue的<style>标签,或者单独的global.css)里添加:
.el-button.block-btn { width: 100%; display: block; }
这里加el-button前缀是为了避免样式污染其他元素,确保只作用于Element按钮。
- 在组件里直接使用这个类:
<el-col :span="8"> <el-button class="block-btn" type="primary">块级提交按钮</el-button> </el-col>
方法二:内联样式(快速临时使用)
如果只是某一处需要块级按钮,直接给按钮加内联样式更省事:
<el-col :span="12"> <el-button type="success" style="width: 100%; display: block;">和列同宽的按钮</el-button> </el-col>
小提示:
为什么要加display: block?因为Element UI的按钮默认是inline-block元素,只设置width:100%可能会残留一些行内元素的间隙,加上display:block就能让按钮完全填满容器的宽度啦~
内容的提问来源于stack exchange,提问作者V. Sambor




