当前位置：首页 > VUE

vue3实现按钮

2026-02-22 16:14:39VUE

使用 Vue 3 实现按钮的方法

基础按钮实现

在 Vue 3 中，可以通过 <button> 标签结合 @click 事件实现基础按钮功能：

<template>
  <button @click="handleClick">点击按钮</button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击');
};
</script>

动态样式与属性

通过 v-bind 动态绑定按钮样式和禁用状态：

vue3实现按钮

<template>
  <button 
    :class="{ 'active': isActive }" 
    :disabled="isDisabled"
    @click="handleClick"
  >
    {{ buttonText }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(false);
const isDisabled = ref(false);
const buttonText = ref('可点击按钮');

const handleClick = () => {
  isActive.value = !isActive.value;
};
</script>

<style>
.active {
  background-color: #42b983;
}
</style>

组件化封装

将按钮封装为可复用的组件，支持插槽和属性传递：

vue3实现按钮

<!-- MyButton.vue -->
<template>
  <button 
    :class="['my-button', type]" 
    :disabled="disabled"
    @click="$emit('click')"
  >
    <slot>默认文本</slot>
  </button>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'primary', 'danger'].includes(value)
  },
  disabled: Boolean
});

defineEmits(['click']);
</script>

<style scoped>
.my-button {
  padding: 8px 16px;
  border-radius: 4px;
}
.primary {
  background-color: #1890ff;
  color: white;
}
.danger {
  background-color: #ff4d4f;
  color: white;
}
</style>

使用封装组件

在父组件中调用自定义按钮组件：

<template>
  <MyButton type="primary" @click="handleSubmit">提交</MyButton>
  <MyButton type="danger" disabled>删除</MyButton>
</template>

<script setup>
import MyButton from './MyButton.vue';

const handleSubmit = () => {
  alert('表单已提交');
};
</script>

与状态管理结合

配合 Pinia 实现按钮状态管理：

<template>
  <button @click="store.increment">计数: {{ store.count }}</button>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const store = useCounterStore();
</script>