vue点击图标弹出窗口

要实现点击图标弹出窗口的功能，可以使用 Vue.js 框架提供的组件和事件处理机制。以下是一种可能的实现方式：

1. 定义一个包含图标和弹出窗口的组件，例如：

<template>
  <div>
    <i class="icon" @click="showDialog">图标</i>
    <div class="dialog" v-if="dialogVisible">
      弹出窗口内容
    </div>
  </div>
</template>

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

<style>
.icon {
  /* 图标样式 */
}
.dialog {
  /* 弹出窗口样式 */
}
</style>

2. 在父组件中使用这个新组件，并传递需要展示的内容：

<template>
  <div>
    <my-icon-dialog>
      弹出窗口内容
    </my-icon-dialog>
  </div>
</template>

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

export default {
  components: {
    MyIconDialog
  }
}
</script>

这样，当用户点击图标时，就会展示弹出窗口，内容为父组件中传递的内容。同时，由于使用了组件和数据绑定机制，可以方便地在多个地方复用这个功能。