vue2 封装弹框组件

最新推荐文章于 2025-05-31 16:01:08 发布

前端小白_小小敏

最新推荐文章于 2025-05-31 16:01:08 发布

阅读量717

点赞数

文章标签： css css3 html vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46037501/article/details/125677568

版权

本文详细介绍了如何在 Vue2 中封装一个弹框组件，从父组件的调用到子组件的设计，包括HTML结构、JavaScript逻辑以及CSS样式。通过这个过程，可以提升应用的复用性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：封装弹框组件

父组件

html 代码如下（示例）：

   <!-- 点击出现弹框事件 -->
    <div class="smallButton" @click="onPopUp">
      <img src="" alt="" />
      <span>评价打分</span>
    </div>
    <!-- 弹框组件 -->
    <Popup v-show="isPopUp" v-on:confirm="onConfirm" v-on:cancel="onCancel" />

js 代码如下（示例）：

// 引入弹框组件
import Popup from './evaluatePopup' 
export default {
data() {
 return {
   isPopUp: false, // 弹框的显示隐藏
 }
},
components: {
 Popup,
},
methods: {
 // 点击显示弹框
 onPopUp() {
   this.isPopUp= true
 },
 // 点击确定隐藏
 onConfirm(val) {
   console.log(val)
   this.isPopUp= false
 },
 // 点击取消隐藏
 onCancel() {
   this.isPopUp= false
 },
},
}

子组件（弹框）

html 代码如下（示例）：

<div class="popup">
    <!-- 弹框组件 -->
    <div class="popup_wrap">
      <div class="popup_header">
        <span>评价打分</span>
        <span @click="onCancel">X</span>
      </div>
      <div class="popup_content">
        <h1>内容</h1>
      </div>
      <div class="popup_footer">
        <p @click="onCancel">取消</p>
        <p @click="onConfirm">保存</p>
      </div>
    </div>
  </div>

js 代码如下（示例）：

export default {
  data() {
    return {
      isPopUp: true,
    }
  },
  methods: {
    //  点击确定
    onConfirm() {
      this.$emit('confirm', '确定111')
    },
    // 点击取消
    onCancel() {
      this.$emit('cancel', '取消111')
    },
  },
}

css 代码如下（示例）：

<style lang="scss" scoped>
.popup {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .popup_wrap {
    padding: 24px;
    width: 50%;
    height: 25%;
    background-color: white;
  }
  .popup_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .popup_content {
    height: 100px;
  }
  .popup_footer {
    display: flex;
    cursor: pointer;
    p {
      width: 75px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #ccc;
    }
    p:last-child {
      background: rgb(61, 130, 219);
      margin-left: 20px;
    }
  }
}
</style>

总结

提示：这里对文章进行总结：