vue3(1)设置四个按钮,“话费”“机票”“酒店”“游戏” (2)每个按钮点击后对应文字“充话费”“订机票”“订酒店”“斗地主” (3)自定义盒子样式 (4)函数实现:点击按钮,自动切换盒子内的文字,同时切换按钮的颜色
时间: 2024-09-23 07:16:32 浏览: 50
要在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>
```