本文小编为大家详细介绍“vue中的el-button样式怎么自定义”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue中的el-button样式怎么自定义”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
/* 更改elememt-ui地固定样式 */
/*按钮的背景颜色样式*/
.el-button--primary {
background-color: rgb(247, 146, 146) !important;
}
/*鼠标经过*/
.el-button--primary:hover {
background-color: rgb(178, 253, 144) !important;
}
/*鼠标按下*/
.el-button--primary:focus {
background-color: rgb(159, 230, 240) !important;
}
还可以添加背景图片
但每一个样式后面都要添加!important即可改变按钮的默认样式
按钮的其他样式 和平时一样添加就好了
.el-button--primary {
background-color: #105EED !important;
color: white !important;
font-size: 20px;
height: 66px;
}
<el-button type="info" data-id="2" plain : @click="tabChange">11111</el-button>
<el-button type="info" data-id="3" plain : @click="tabChange">2222</el-button>
<div v-show="tab==2" class="width58"></div>
<div v-show="tab==3" class="width58"></div>
tabChange(e) {
let tabid = e.currentTarget.dataset.id
this.tab = tabid
},
如图,我想实现二维码的图片可以根据不同状态进行disabled的切换,本来是用两个img实现的,但是img还需要设置图片不可点击,虽然css使用cursor:no-drop也能实现,后来突然想到button就默认支持disabled呀,我只用把这个二维码的图片设置为button的自定义图标,我就可以使用button的disabled去控制是否可以点击了
button的icon属性自定义一个图标名称,这个自定义的图标名称会默认添加到button下i标签的class上,我们只需要设置i标签的样式就可以了
<el-button
slot="reference"
type="text"
icon="el-icon-my-qr-code"
:class=" //控制显示图标的颜色
hasIncludeHttpText(row)
? 'qr-code-icon-default'
: 'qr-code-icon-disabled'
"
:disabled="!hasIncludeHttpText(row)"
></el-button>
设置样式需要注意加/deep/,因为这些样式不是在当前组件的,所以不加/deep/设置是没有用的,当然如果不加scoped就不用加/deep/了
.qr-code-icon-default {
/deep/ .el-icon-my-qr-code {
background: url('~@home/assets/images/qr-code-icon.svg') no-repeat;
}
}
.qr-code-icon-disabled {
/deep/ .el-icon-my-qr-code {
background: url('~@home/assets/images/disabled-qr-code-icon.svg') no-repeat;
}
}
/deep/.el-icon-my-qr-code {
font-size: 16px;
background-size: cover;
}
/deep/ .el-icon-my-qr-code:before {
content: '替';
font-size: 16px;
visibility: hidden;
}
读到这里,这篇“vue中的el-button样式怎么自定义”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。