Vue组件封装及引用，封装一个带参数的弹窗组件

Vue 是一款国产的非常优秀的前端框架，官方的介绍是： Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

今天封装了一个带参数的弹窗方法，可以直接调用，自定义图片，提示文字，取消和确定（带参数的方法）。

首先，我在 components 目录下创建一个 CreditConfirmMask.vue 的文件，用来调用。代码如下：

<template>
    <div class="am-mask">
      <div class="am-content-wrapper">
        <img class="am-img" :src="sendMask.img">
        <div class="am-caption">{{sendMask.title}}</div>
        <div class="am-buttom">
          <a-button type="primary" @click="confirmMask">确定</a-button>
        </div>
        <div class="am-cancel" @click="cancel">取消</div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "sendMask",
    props: ['sendMask'],
    data () {
      return {}
    },
    methods: {
      cancel(){
        this.$emit('close');
      },
      confirmMask() {
        this.$emit('goto');
      },
    },
  }
</script>

<style scoped>
.am-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 5;
}
  .am-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 450px;
    padding: 34px 0 20px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;
  }
.am-img {
  width: 350px;
}
.am-caption {
  color: #1F2645;
  font-size: 16px;
  margin-bottom: 25px;
}
.am-buttom .ant-btn-primary {
  margin-top: 0;
  box-shadow: none;
  margin-bottom: 25px;
  }
  .am-cancel {
    color: #ACACAC;
    font-size: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ACACAC;
    cursor: pointer;
  }
</style>

组件的引用：

在 script 标签内引入：

import CreditConfirmMask from "../../components/CreditConfirmMask.vue"

调用该组件：

components: {
      CreditConfirmMask
},

前端引用：

<CreditConfirmMask v-if="isMask"
                   :sendMask="sendMask"
                   @close="cancelMask"
                   @goto="confirmMask(sendMask.id)"
/>

data：

data: function () {
  return {
    isMask: false,
    sendMask: {
      img: '',
      title: '',
      id: '',//产品id
    },
  }
},

方法调起：这时候可以将弹窗图片，提示文字和参数传过去。

maskShow(){
  this.isMask = true;
  this.sendMask.img="../../../static/image/xiajia.png";
  this.sendMask.title="是否将上架产品";
  this.sendMask.num="1";
},

这个confirmMask() 方法就可以接收到传过来的 id

confirmMask(id){
  ...
}

组件调用效果：

推荐阅读：

DouPHP去除Powered by DouPHP版权的方法

Vue.js学习笔记——条件、循环、双向绑定

Linux安装JDK+Tomcat+MySQL及发布项目教程

html中hr标签的基础知识

JQuery几个mouse事件的区别和用法