vue自定义弹窗组件

在平时写页面的时候，一些页面总是需要到弹窗，可以将它写成组件的形式，考虑到有不一样的弹窗，可以按照下面的来写：
新建popup.vue,

首先先来普及一下知识点：
1.弹窗组件通过slot插槽接受从父组件那里传过来弹窗内容。
2.弹窗组件通过props接收从父组件传过来的值
3.通过父组件传进来的props控制组件的显示与隐藏，子组件关闭时通过事件$emit触发父组件改变值。
在script里面

export default {
    name: 'jlDialog',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      confirm: {
        type: Boolean,
        default: false
      },
      cancel: {
        type: Boolean,
        default: false
      },
      title: {
        default: null
      },
      confirmVal: {
        type: String,
        default: '是'
      },
      cancelVal: {
        type: String,
        default: '否'
      },
      isDisabled: {
        type: Boolean,
        default: false
      },
      maskHide:{
        type: Boolean,
        default:true
      }
    },
    methods: {
      maskHandle(){
          if(this.maskHide){
              console.log(2222)
              this.$emit('input',false)
          }
      },
      onConfirm(){
          if(!this.isDisabled){
              this.$emit('onConfirm')
              this.$emit('input', false)
          }
      },
      onCancel(){
        this.$emit('onCancel')
        this.$emit('input', false)
      }
    }
  }

因为是公共的组件，在main.js里面统一引入：

import jlPopup from './CustomComponents/Popup.vue';
Vue.component('jlPopup',jlPopup )

在其他组件里面可以这样使用：

            
啦啦啦
    

以下的为css

作者：jialing_cccwei
链接：https://www.jianshu.com/p/d3ae9efa6b40
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。