Vue 组件库 Button实现
下面是一个类似于Ant Design Vue的Button组件的实现,支持传入图标、loading等状态。
<template>
<button class="btn" :class="classes" :disabled="disabled" @click="onClick">
<i v-if="icon" :class="['iconfont', `icon-${icon}`]"></i>
<span v-if="!loading"><slot></slot></span>
<span v-else><i class="iconfont icon-loading"></i></span>
</button>
</template>
<script>
export default {
name: 'Button',
props: {
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: 'medium'
},
icon: {
type: String,
default: ''
},
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
classes() {
return [
`btn-${this.type}`,
`btn-${this.size}`
]
}
},
methods: {
onClick() {
if (!this.loading && !this.disabled) {
this.$emit('click')
}
}
}
}
</script>
<style scoped>
.btn {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
outline: none;
border: none;
padding: 8px 16px;
font-size: 14px;
}
.btn-default {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
}
.btn-primary {
background-color: #1890ff;
color: #fff;
}
.btn-success {
background-color: #52c41a;
color: #fff;
}
.btn-warning {
background-color: #faad14;
color: #fff;
}
.btn-danger {
background-color: #f5222d;
color: #fff;
}
.btn-small {
font-size: 12px;
padding: 4px 8px;
}
.btn-medium {
font-size: 14px;
padding: 8px 16px;
}
.btn-large {
font-size: 16px;
padding: 12px 24px;
}
.iconfont {
font-family: 'iconfont';
font-size: 16px;
margin-right: 4px;
}
</style>
这个组件的实现与Ant Design Vue的Button组件很相似。它支持传入类型、尺寸、图标、loading状态和禁用状态。它还使用插槽来允许在按钮内部插入任何内容。
希望这个例子能帮助你更好地理解如何实现Vue组件库。