vue3 +element+ts按钮切换

可以使用Vue3的响应式数据和Element的按钮组件来实现按钮的切换效果。同时，使用TypeScript可以更好地管理代码和类型。

首先，需要在Vue3的组件中定义一个响应式的变量来保存按钮的状态（开/关）：

<template>
  <el-button :type="status ? 'primary' : 'danger'" @click="toggleStatus">
    {{ status ? '开' : '关' }}
  </el-button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const status = ref(false); // 初始状态为关闭

    const toggleStatus = () => {
      status.value = !status.value; // 点击按钮切换状态
    };

    return {
      status,
      toggleStatus,
    };
  },
});
</script>

在上面的代码中，我们使用了`ref`函数来创建一个响应式的变量`status`，并在按钮的点击事件中切换状态。按钮的颜色和文字根据状态来动态显示。

如果需要在其他组件中使用这个按钮组件，可以将它注册为全局组件：

import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

const app = createApp(App);

app.component('my-button', MyButton);

app.mount('#app');

然后就可以在其他组件中使用`<my-button>`标签来引用这个按钮组件了。

希望这个例子能够对你有所帮助！