vue封装弹框组件

最新推荐文章于 2024-08-07 21:53:27 发布

「已注销」

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量2k

点赞数 3

文章标签： javascript html5 vue.js css3 es6

本文链接：https://blog.csdn.net/can0101/article/details/106412956

版权

本文介绍如何在Vue项目中封装一个弹框组件，包括引入组件、实现点击显示弹框的功能，以及在组件内部的具体使用方法。核心涉及Vue.js、JavaScript、HTML5和CSS3技术。

摘要由CSDN通过智能技术生成

vue封装弹框组件

1、引入弹框组件

<Popout v-show="isPrpout" v-on:confirm="onConfirm" v-on:cancel="onCancel" />

2、点击显示弹框

<button @click="onClick">点击</button>

3、在组建内使用

import Popout from './Popout'
export default {
  components: {
    Popout
  },
  data () {
    return {
      isPrpout: false
    }
  },
  methods: {
  
  	// 点击显示弹框
    onClick () {
      this.isPrpout = true
    }
  
    // 点击确定隐藏
    onConfirm (val) {
      console.log(val)
      this.isPrpout = false
    },
    
    // 点击取消隐藏
    onCancel () {
      this.isPrpout = false
    }
  }
}

组件代码

<template>
    <div class="popout">    <!-- 弹框组件 -->
        <div class="popout_box">
            <div class="popout_box_top">
                <h1>内容</h1>
            </div>