Vue.extend、message消息提示

前言

努力学习的小白一枚，如果有什么错误的地方，麻烦留言指正。

Vue 2.x

推荐文章：Vue.extend()实现MessageBox弹窗

起因
在使用element 的message组件时，产生了个疑问，正常使用组件都是通过import的形式引入到页面中，然后通过props进行属性的传递。但是通过函数调用就感觉很特别，看完了上面的文章，有了一些自己的理解。

效果

代码

• 组件代码

<template>
  <div class="message-container">
    <transition name="fade">
      <div
        v-if="visible"
        class="message"
        :style="{ background: messageBackground[type] }"
      >
        <img class="icon" :src="icon[type]" />
        <div>{{ message }}</div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: {
        success: require("../../assets/ok.jpeg"),
        info: require("../../assets/warning.jpeg"),
      },
      messageBackground: {
        success: "#F0F9EB",
        info: "#909399",
      },
      type: "success",
      visible: false,
      message: "11",
    };
  },
  mounted() {},
  methods: {
  },
};
</script>

<style scoped>
.icon {
  width: 20px;
  height: 20px;
  margin: 0 20px;
}
.message-container {
  display: flex;
  justify-content: center;
  margin-top: 3%;
}
.message-container .message {
  display: flex;
  align-items: center;
  width: 300px;
  min-height: 40px;
  border: 1px solid #fafafa;
  border-radius: 10px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

• js代码

import Main from "./main.vue";

export default function(Vue) {
  //继承基础信息
  let MessageConstructor = Vue.extend(Main);
  //创建实例
  let Instance = new MessageConstructor();
  //手动挂载实例
  Instance.$mount();
  document.body.appendChild(Instance.$el);

  Vue.prototype.$message = ({ type, message }) => {
    //打开消息
    Instance.visible = true;
    //设置类型
    Instance.type = type;
    //设置信息
    Instance.message = message;
    //关闭
    setTimeout(() => {
      Instance.visible = false;
      //console.log("关闭了");
      document.body.removeChild(Instance.$el);
    }, 2000);
  };
}

使用

• 全局引用

//全局引入消息
import MessageBox from "./message/src/main.js";

Vue.config.productionTip = false;

Vue.use(MessageBox);

• 使用

<template>
  <div id="app">
    <Button @click="openMessage">打开</Button>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    openMessage() {
      this.$message({
        type: "success",
        message: "哈哈哈",
      });
    },
  },
};
</script>

个人理解

上面那种写法确实有些难理解，但是如果是下面这种形式呢

<message ref="messageRef"></message>

openMessage(){
  this.$refs.messageRef.type='success'
  ...
}

  //继承基础信息
  let MessageConstructor = Vue.extend(Main);
  //创建实例
  let Instance = new MessageConstructor();

这两句跟refs基本上是一个作用，无非是将ref的这些操作写在了一个方法了，通过方法传参来实现了赋值