vue3（1）设置四个按钮，“话费”“机票”“酒店”“游戏” （2）每个按钮点击后对应文字“充话费”“订机票”“订酒店”“斗地主” （3）自定义盒子样式 （4）函数实现：点击按钮，自动切换盒子内的文字，同时切换按钮的颜色

要在Vue3中实现这个功能，你可以按照以下步骤创建组件： 1. 首先，你需要安装Vue并创建一个新的Vue项目，可以使用Vue CLI进行快速搭建。 ```bash npm install -g @vue/cli vue create your-project-name ``` 2. 安装所需的CSS库（如Vuetify或Element Plus），如果你想要自定义盒子样式。例如，使用Element Plus： ```bash npm install element-plus ``` 3. 创建一个`ButtonGroup.vue`组件文件，里面包含四个按钮和对应的点击事件处理函数： ```html <template> <div class="button-group"> <el-button v-for="(item, index) in items" :key="index" :style="{ backgroundColor: buttonColor[index] }" @click="changeText(index)"> {{ item.text }} </el-button> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ props: { items: { type: Array, default: () => [ { text: '话费', value: 0 }, { text: '机票', value: 1 }, { text: '酒店', value: 2 }, { text: '游戏', value: 3 } ] }, buttonColor: { type: Array, default: () => ['blue', 'orange', 'green', 'red'] } }, data() { return { currentTextIndex: 0 }; }, methods: { changeText(index) { this.currentTextIndex = (this.currentTextIndex + 1) % this.items.length; this.$emit('update:text-index', this.currentTextIndex); } } }); </script> <style scoped> .button-group { display: flex; } </style> ``` 4. 然后在父组件中引入并使用这个组件，并监听文本索引的变化来更新内容和按钮颜色： ```html <template> <div> <button-group :items="items" :button-color="buttonColors" @update:text-index="updateButtonText"></button-group> <div class="text-container"> <p v-text="currentText"></p> </div> </div> </template> <script> import ButtonGroup from './components/ButtonGroup.vue'; export default { components: { ButtonGroup }, data() { return { items: ..., buttonColors: ..., // 根据需求自定义按钮颜色数组 currentText: '默认文本' }; }, computed: { currentText() { return this.items[this.currentTextIndex].text; } }, methods: { updateButtonText(index) { this.currentText = this.items[index].text; } } }; </script> <style scoped> /* 自定义按钮组和文本容器样式 */ </style> ```