Vue component development: implementation method of folding panel component

Vue component development: Folding panel component implementation method, specific code examples are required

Introduction:
In Web development, folding panel (Accordion) is a common Component for hiding and showing content. It allows the user to expand or collapse the content area by clicking on the title. This article will introduce how to use Vue components to implement a simple accordion panel component and provide specific code examples.

1. Project preparation
First, we need to prepare a Vue project. You can use Vue CLI to create a new project:

vue create accordion-demo

Then enter the project directory:

cd accordion-demo

2. Create a folding panel component
Create a component file named Accordion.vue in the src/components directory, and create a basic folding panel component through the following code:

<template>
  <div class="accordion">
    <div class="accordion-item" v-for="(item, index) in items" :key="index">
      <div class="accordion-title" @click="toggleItem(index)" :class="{ active: activeIndex === index }">
        {{ item.title }}
      </div>
      <div class="accordion-content" v-show="activeIndex === index">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Accordion',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeIndex: -1
    }
  },
  methods: {
    toggleItem(index) {
      if (index === this.activeIndex) {
        this.activeIndex = -1;
      } else {
        this.activeIndex = index;
      }
    }
  }
}
</script>

<style scoped>
.accordion {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-title {
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.active .accordion-content {
  display: block;
}
</style>

In this component , we used props to receive an array named items, each element contains title and content. Then use the v-for directive to iterate through each element in the array and bind the click event @click to switch the state of the accordion panel. toggleItem The method implements the switching logic and sets activeIndex to the currently clicked panel index.

3. Use the folding panel component
Use the folding panel component we just created in App.vue and pass in the data. Suppose there is an array items, containing the titles and contents of three panels:

<template>
  <div>
    <accordion :items="items"></accordion>
  </div>
</template>

<script>
import Accordion from './components/Accordion.vue';

export default {
  name: 'App',
  components: {
    Accordion
  },
  data() {
    return {
      items: [
        { title: '面板1', content: '面板1的内容' },
        { title: '面板2', content: '面板2的内容' },
        { title: '面板3', content: '面板3的内容' }
      ]
    }
  }
}
</script>

Here, we use the accordion panel component through the <accordion> tag and pass the items array to The component’s items prop.

4. Run the project
Finally, we run the following command in the project root directory to start the project:

npm run serve

Then open http://localhost:8080 in the browser to view operation result.

Conclusion:
This article introduces how to use Vue components to implement a simple folding panel component and provides specific code examples. With this example, we learned how to create a basic accordion component and how to pass data to the component and use it. This is just a simple example that you can extend and customize to suit your needs.

I hope this article can help you understand the development and use of Vue components, and how to develop a folding panel component. If you are interested in this topic, you can continue to learn more about the more advanced usage and techniques of Vue components. Wish you more success in Vue development!

The above is the detailed content of Vue component development: implementation method of folding panel component. For more information, please follow other related articles on the PHP Chinese website!