写一个点击弹出的组件 vue

可以这样做：

1. 在 Vue 组件中声明一个数据属性来控制组件的显示/隐藏，例如：

data() {
  return {
    showModal: false
  }
},

2. 在组件的模板中使用 v-if 指令来切换组件的显示/隐藏：

<template>
  <div>
    <button @click="showModal = true">显示组件</button>
    <my-modal v-if="showModal" @close="showModal = false"></my-modal>
  </div>
</template>

3. 在 my-modal 组件中，可以使用一个按钮或者其他元素来触发组件关闭事件：

<template>
  <div class="modal-overlay">
    <div class="modal-content">
      <button @click="$emit('close')">关闭</button>
      <!-- 其他内容 -->
    </div>
  </div>
</template>

这样，当用户点击 "显示组件" 按钮时，组件会被显示出来；当用户点击组件中的 "关闭" 按钮时，组件会被隐藏。

相关问题

vue2封裝一个消息弹出组件

好的，以下是一个简单的 Vue2 消息弹出组件的封装示例：

// Message.vue
<template>
  <div v-if="isShow" class="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      message: ''
    }
  },
  methods: {
    showMessage(message, timeout = 3000) {
      this.message = message
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
      }, timeout)
    }
  }
}
</script>

<style>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #333;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>

使用方式：

1. 在需要使用的组件中引入 Message 组件：

import Message from './Message.vue'

2. 在组件中注册 Message 组件：

components: {
  Message
}

3. 在需要弹出消息的地方调用 showMessage 方法：

this.$refs.message.showMessage('这是一条消息')

完整示例代码：

<template>
  <div>
    <button @click="showMessage()">弹出消息</button>
    <Message ref="message"></Message>
  </div>
</template>

<script>
import Message from './Message.vue'

export default {
  components: {
    Message
  },
  methods: {
    showMessage() {
      this.$refs.message.showMessage('这是一条消息')
    }
  }
}
</script>

写一个vue代码，用element 构建一个两个组件，一个组件里有个链接，点击之后调用另一个组件的弹出式面板，并展示出来，面板里有两个输入框。

下面是一个简单的Vue代码，使用Element UI构建两个组件，点击一个链接，调用另一个组件的弹出式面板，并展示出来，面板包含两个输入框。需要注意的是，本代码使用了Vue 2.0版本和Element UI 2.0版本：

<template>
  <div>
    <h2>组件1</h2>
    <el-link @click="showPanel">点击打开面板</el-link>
    <el-dialog :visible.sync="panelVisible" title="面板" width="30%">
      <el-form>
        <el-form-item label="输入框1">
          <el-input v-model="input1"></el-input>
        </el-form-item>
        <el-form-item label="输入框2">
          <el-input v-model="input2"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      panelVisible: false,
      input1: '',
      input2: ''
    }
  },
  methods: {
    showPanel() {
      this.panelVisible = true;
    }
  }
}
</script>

<template>
  <div>
    <h2>组件2</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

在这个代码中，我们定义了两个组件，分别是“组件1”和“组件2”。在“组件1”中，我们使用了Element UI的`el-link`组件来创建一个链接，并在点击链接时调用了`showPanel`方法，该方法将`panelVisible`变量设置为`true`，从而打开弹出式面板。我们使用了`el-dialog`组件来创建弹出式面板，并在面板中放置了两个输入框，分别是“输入框1”和“输入框2”。

在“组件2”中，我们只是简单地展示了一个标题，因为我们并不需要在这个组件中添加任何内容。

在Vue中，我们可以通过`v-model`指令来绑定数据和表单元素。在这个代码中，我们使用了`v-model`指令来绑定输入框和`input1`和`input2`变量。这意味着当用户在输入框中输入内容时，Vue会自动更新这些变量的值。

最后，需要注意的是，在弹出式面板中，我们使用了`:visible.sync`指令来绑定`panelVisible`变量和弹出式面板的可见性。这意味着当我们在代码中修改`panelVisible`变量的值时，弹出式面板的可见性也会相应地改变。