vue 之简单的弹窗组件

vue 之简单的弹窗组件

notice/Notice.vue

• 注意点：可以在添加确定 取消等按钮！

<!--  -->
<template>
  <div class="notice_wrap">
    <div>标题：{{ title }}</div>
    <div>内容：{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: "Notice",
  data() {
    return {
      title: "",
      message: ""
    };
  },
  methods: {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.notice_wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 33;
  width: 200px;
  height: 50px;
  background: pink;
}
</style>

notice/index.js

/**
 * 消息弹出窗 组件
 */
/**
 * 是否粘性定位 组件
 */
import Vue from "vue";
import Notice from "./Notice.vue";
const NoticeContructor = Vue.extend(Notice);
export default function notice(options) {
  //1：实例化
  const instance = new NoticeContructor({
    data: options
  });
  //2：手动挂载
  instance.$mount(); //代表渲染dom完成了
  //手动挂载到body
  document.body.appendChild(instance.$el); //这是 Notice组件 被挂载到body
  return instance;
}

main.js

import notice from "@/components/commom/notice/index";
Vue.prototype.$notice = notice;

使用

<template>
  <div>
    <div @click="clickMsg">打开</div>
  </div>
</template>

<script>
export default {
  name: "Hot",
  data() {
    return {};
  },
  methods: {
    clickMsg() {
      console.log("1111");
      this.$notice({
        title: "我是title",
        message: "我是msg"
      });
    }
  },
};
</script>
<style lang="scss" scoped></style>