vue弹出框组件

1.PopupPage.vue

<template>
  <div class="yh-popup-page" v-show="visible">
    <div class="yh-block">
      <div class="yh-headder">
        <span>{{title}}</span>
        <button @click="onClose" v-if="closable !== false" class="yh-icon">X</button>
      </div>
      <div class="yh-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PopupPage",
  data() {
    return {
      visible: false
    };
  },
  props: ["title", "closable"],
  methods: {
    onClose() {
      this.$emit("close", this);
    },
    close() {
      this.visible = false;
    },
    show() {
      this.visible = true;
    }
  }
};
</script>
<style scoped>
</style>

2.PopupPageDemo.vue

<template>
  <div class="yh-page">
    <h1>弹出框演示</h1>
    <div class="desc">Demo源代码：
      <code>/examples/components/modules/PopupPageDemo.vue</code>
    </div>
    <yh-button @click="showPopup">显示弹出框</yh-button>
    <yh-popup-page ref="popup" title="弹出框" @close="onClose">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" style="width:300px;" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <yh-button class="yh-primary" @click.prevent="submitForm">提交</yh-button>
            <yh-button>重置</yh-button>
          </el-form-item>
        </el-form>
      </div>
    </yh-popup-page>
  </div>
</template>
<script>
import yhbutton from "../comcompont/Button";
import popuppage from "../comcompont/PopupPage";
export default {
  name: "PopupPageDemo",
  data() {
    return {
      form: {
        name: ""
      }
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.show();
    },
    onClose(page) {
      page.close();
    },
    submitForm() {
      this.$refs.popup.close();
    }
  },
  components: {
    "yh-button": yhbutton,
    "yh-popup-page": popuppage
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>