vue2实现点击弹开再次点击收回

在Vue.js 2中，要实现点击按钮后弹出内容框，再次点击将关闭这个内容框，通常可以使用自定义组件以及`v-show`或`v-if`指令来控制元素的显示和隐藏状态。下面是一个简单的示例：

首先，创建一个可开关的弹出组件，如`Popover.vue`:

<template>
  <div v-if="visible" class="popover">
    <button @click="toggleVisible">点击</button>
    <p>这是弹出的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    toggleVisible() {
      this.visible = !this.visible;
    },
  },
};
</script>

<style scoped>
.popover {
  display: none; /* 或者 flex, inline-block 等 */
}
.popover.show {
  display: block; /* 当 visible 为 true 时显示 */
}
</style>

然后在需要使用的地方引入并使用该组件：

<!-- parent component -->
<template>
  <div>
    <button @click="openPopover">打开</button>
    <Popover :visible.sync="isPopoverVisible"></Popover>
  </div>
</template>

<script>
import Popover from './Popover.vue';

export default {
  components: {
    Popover,
  },
  data() {
    return {
      isPopoverVisible: false,
    };
  },
  methods: {
    openPopover() {
      this.isPopoverVisible = true;
    },
  },
};
</script>

当你点击“打开”按钮时，`isPopoverVisible`会被设置为`true`，这会通过`sync`属性同步到`Popover`组件的`visible`属性，使其显示出来；再次点击按钮时，`isPopoverVisible`就会变为`false`，弹出框就消失了。