一、基本概念
EL-Button 是饿了么 UI 组件库中的一个按钮组件，具有多种类型和样式。
二、点击事件绑定
为 EL-Button 组件绑定点击事件，可以使用 v-on 指令，也可以直接在方法中使用 $emit 触发。
点击我
<script>
export default {
methods: {
handleClick() {
console.log('点击了 EL-Button')
}
}
}
</script>
三、按钮类型
EL-Button 支持 primary、success、warning、danger、info 五种类型。可以通过设置 type 属性来改变按钮类型。
primary
success
warning
danger
info
四、禁用状态
可以通过设置 disabled 属性来禁用按钮，并且支持通过变量动态绑定。
禁用按钮
点击我
<script>
export default {
data() {
return {
isDisabled: true
}
}
}
</script>
五、图标按钮
EL-Button 还可以通过设置 icon 属性来实现图标按钮的效果。
六、圆角按钮
可以通过设置 round 属性来实现圆角按钮的效果，同时也支持通过设置 circle 属性来实现圆形按钮。
圆角按钮
圆形按钮
七、大小尺寸
EL-Button 支持多种大小尺寸的设置。
中等尺寸
小型尺寸
迷你尺寸
八、自定义样式
可以通过设置 style 和 class 属性来自定义按钮的样式。
自定义样式
自定义样式
.my-button {
color: red;
background-color: yellow;
}
九、应用场景
EL-Button 可以广泛应用于各种场景，如表单提交、搜索、弹窗操作等。
十、总结
本篇文章详细介绍了 EL-Button 点击事件的各种实现方式、多种类型和样式、禁用状态、图标按钮、大小尺寸等多个方面的内容，并举例说明了各种用法。希望可以帮助大家更好地了解和应用 EL-Button 组件。
原创文章，作者：UKIDT，如若转载，请注明出处：https://www.506064.com/n/371967.html
微信扫一扫 
支付宝扫一扫 