vue3 typescript 写一个按钮，点击后字体变黑

在 Vue3 中结合 TypeScript 编写一个简单的按钮组件，当点击时更改按钮文本的颜色，可以按照以下步骤创建：

<template>
  <button @click="toggleColor" :style="{ color: buttonColor }">
    {{ buttonText }}
  </button>
</template>

<script lang="ts">
import { Component, Prop, Ref } from 'vue';

@Component({
  name: 'BlackButton'
})
export default class BlackButton extends Vue {
  // 定义按钮的文字和颜色状态
  private buttonText: string = '默认文字';
  private buttonColor: string = 'black'; // 初始颜色设为黑色

  // 变更颜色的状态变量
  private isDarkMode: boolean = false;

  // 点击事件处理函数，切换颜色
  public toggleColor() {
    this.isDarkMode = !this.isDarkMode;
    if (this.isDarkMode) {
      this.buttonColor = 'black'; // 当模式为真时，颜色恢复为黑色
    } else {
      this.buttonColor = 'initial'; // 或者使用浏览器默认颜色（如白色），这取决于你的需求
    }
  }

  // 使用 Prop 接收外部传入的文字
  @Prop() buttonTextProp: string;
  
  // 如果外部传递了文字，更新组件状态
  mounted() {
    if (this.buttonTextProp) {
      this.buttonText = this.buttonTextProp;
    }
  }
}
</script>

<style scoped>
/* 如果需要自定义样式 */
.black-button {
  color: initial; /* 或者直接设置为 black，取决于是否覆盖全局样式 */
}
</style>

在这个例子中，我们定义了一个名为 `BlackButton` 的 Vue 组件，它有一个内部状态 `isDarkMode` 控制按钮颜色。点击时，通过改变这个值来切换颜色。同时，还可以通过 `@Prop` 注解接收外部传入的按钮文字。