vue公共按钮实现
Vue 公共按钮的实现方法
在 Vue 中实现公共按钮组件，可以通过封装一个可复用的按钮组件来实现。以下是几种常见的实现方式：
封装基础按钮组件
创建一个基础的按钮组件，包含常见的属性和事件：
<template>
<button
:class="['base-button', type]"
:disabled="disabled"
@click="handleClick"
>
<slot></slot>
</button>
</template>
<script>
export default {
name: 'BaseButton',
props: {
type: {
type: String,
default: 'default',
validator: value => ['default', 'primary', 'danger', 'warning'].includes(value)
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
handleClick() {
this.$emit('click')
}
}
}
</script>
<style scoped>
.base-button {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
border: 1px solid #dcdfe6;
}
.primary {
background-color: #409eff;
color: white;
}
.danger {
background-color: #f56c6c;
color: white;
}
.warning {
background-color: #e6a23c;
color: white;
}
</style>使用渲染函数实现更灵活的按钮
对于需要更复杂逻辑的按钮，可以使用渲染函数：
export default {
functional: true,
props: {
type: {
type: String,
default: 'default'
},
icon: String
},
render(h, { props, slots, listeners }) {
return h(
'button',
{
class: ['func-button', props.type],
on: listeners
},
[
props.icon && h('i', { class: ['icon', props.icon] }),
slots().default
]
)
}
}全局注册按钮组件
在 main.js 中全局注册按钮组件：
import BaseButton from '@/components/BaseButton.vue'
Vue.component('BaseButton', BaseButton)使用混入(Mixin)添加通用按钮逻辑
创建按钮混入文件 buttonMixin.js：
export default {
methods: {
handleButtonClick() {
if (this.disabled) return
this.$emit('click')
}
},
computed: {
buttonClasses() {
return [
'button',
this.type,
{
'is-disabled': this.disabled
}
]
}
}
}按钮组件的使用示例
在页面中使用公共按钮组件：
<template>
<div>
<BaseButton @click="handleClick">默认按钮</BaseButton>
<BaseButton type="primary" @click="handleClick">主要按钮</BaseButton>
<BaseButton type="danger" :disabled="true">禁用按钮</BaseButton>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('按钮被点击')
}
}
}
</script>这些方法提供了不同层次的封装方式，可以根据项目需求选择合适的实现方案。基础按钮组件适合大多数简单场景，渲染函数方式适合需要高度定制的情况，而混入则适合需要在多个组件间共享按钮逻辑的场景。
