用vue编写一个添加按钮 点击按钮弹出弹框

好的，以下是一个简单的示例代码：

<template>
  <div>
    <button @click="showModal">添加</button>
    <div v-if="isModalVisible" class="modal">
      <div class="modal-content">
        <h2>添加项目</h2>
        <!-- 添加项目表单 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalVisible: false,
    };
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
    },
  },
};
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

在这个示例中，我们创建了一个按钮并绑定了 `showModal` 方法，当按钮被点击时，`showModal` 方法会将 `isModalVisible` 属性设置为 `true`，从而显示弹框。

在模板中，我们使用 `v-if` 指令来控制弹框的显示，当 `isModalVisible` 为 `true` 时，弹框会显示出来。

最后，我们还添加了一些基本的样式来使弹框居中显示并设置半透明背景。当然，你可以根据需要自行调整样式。