vue 封装自定义弹框

效果：

代码：

1、弹框封装

<template>
  <div class="all-model" v-if="isShow" v-move>
    <div class="model-panel" :style="popStyle">
      <div class="panel-head">
        <span class="head-tit">{{ title }}</span>
        <span
          class="el-icon-edit-outline"
          v-if="isEdit"
          @click="panelEdit"
        ></span>
        <svg aria-hidden="true" class="icon head-close" @click="panelClose">
  			<use xlink:href="#iconguanbi_hui"></use>
        </svg>
        <p class="han-num" v-if="numberId">
          <span>编号：</span><span>{{ numberId }}</span>
        </p>
      </div>
      <div :class="isShowBtn ? 'slot-btncontaier' : 'slot-contaier'">
        <slot></slot>
      </div>
      <div class="panel-btns" v-if="isShowBtn">
        <el-button
          v-for="(item, index) in btns"
          :key="index"
          :class="item.className"
          v-if="item.isHidden ? false : true"
          @click="() => btnFn(item.type, item)"
        >
          {{ item.text }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "popupBox",
  data() {
    return {
      isShow: false,
    };
  },
  props: {
    title: {
      type: String,
    },
    numberId: {
      type: String,
    },
    btnHandle: {
      type: Function,
    },
    isShowBtn: {
      type: Boolean,
      default: true,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
 	btns: {
      type: Array,
      default() {
        return [{ type: "close", text: "关闭", className: "closeBtn" }];
      },
    },
    popStyle: {
      type: [Object, String],
    },
  },
  computed: {
    callback() {
      return this.btnHandle;
    },
  },
  methods: {
    panelEdit() {
      this.$emit("editCallback");
    },
    panelClose() {
      this.isShow = false;
      this.$emit("closePopupCallback");
    },
    btnFn(type, item) {
      if (item.action) {
        // this.isShow = false;
        item.action(type);
      } else {
        let v = type == "yes" ? true : false;
        if (!this.callback) {
          return this.panelClose();
        } else {
          if (v) {
            this.callback(v);
          } else {
            return this.panelClose();
          }
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.all-model {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  align-items: center;
  display: flex;

  .model-panel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    min-width: 300px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(192, 196, 204, 1);
    border-radius: 6px;
    margin: 0 auto;

    .panel-head {
      height: 40px;
      line-height: 40px;
      padding: 0 16px 0 20px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      text-align: left;
      background-color: @main-c;
      .han-num {
        float: right;
        width: 220px;
        height: 50px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        line-height: 50px;
        span {
          display: inline-block;
          height: 50px;
          line-height: 50px;
        }
      }
      .head-close {
        float: right;
        width: 14px;
        height: 14px;
        margin-top: 12px;
        cursor: pointer;
      }

      .head-tit {
        font-size: @16;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        // color: @main-c;
        color: #fff;
      }
    }
    .slot-contaier {
      padding: 0 20px 20px;
      text-align: left;
      height: calc(100% - 52px);
    }
    .slot-btncontaier {
      padding: 0 20px 20px;
      text-align: left;
      height: calc(100% - 98px);
    }
    .panel-btns {
      bottom: 0;
      text-align: right;
      width: 100%;
      padding: 0 0 5px;
      .el-button {
        margin-right: 10px;
      }
 	}
    .el-icon-edit-outline {
      left: 5px;
      font-size: 20px;
      color: #c0c4cc;
      position: relative;
      top: 3px;
      cursor: pointer;
    }
  }
}
</style>

2、如何使用
组件名字：add.vue

<template>
	<div>
		<popupBox :isShowBtn="false" title="新增" ref="popup" :popStyle="popStyle" :btns="btns">
			<div>内容</div>
		</popupBox>
	</div>
</template>
<script>
// a. 引入封装好的弹框路径  b. 注册（components）
	export default {
		data(){
			return {
				popStyle: {
        			width: "22%",
     			},
     			btns:[
     				{
     					type:'yes',
     					text:"确定",
     					className:'smallBtn', // 这个样式是我全局封装的
     					action:()=>{
     						// 触发方法
     					}
     				},
     				{
     					type:'close',
     					text:'取消',
     					className:'closeBtn', // 同上
     				}
     			]
			}
		},
		methods:{
			showPopup(){
				this.$refs.popup.isShow = true
			}
		}
	}
</script>

3、如何触发弹框

<template>
	<div>
		<el-button @click="changeClick">触发</el-button>
		// 组件
		<add ref="add"></add>
	</div>
</template>
<script>
// a. 引入路径  b. 注册(components)
	export default {
		data(){
			return {
				
			}
		},
		methods:{
			// 触发
			changeClick(){
				this.$refs.add.showPopup()
			}
		}
	}
</script>

下一篇：具体使用