极简系列—vue3.x消息组件message

Vue2.x消息组件参考另一篇：https://blog.csdn.net/hncu1990/article/details/119153572
本文代码仓库：https://github.com/littleluckly/vue3.x-components-study

全局API与vue2.x变化

亿个小目标

实现一个小小目标—极简版的messge消息组件

• 支持多种调用方式

  1. 组件内proxy.$message方式调用

     const { proxy } = getCurrentInstance();
     proxy.$message({
       message: "我是消息提示",
       duration: 2,
     });
     

  2. 在.js文件中作为一个函数独立使用

  import { message } from "./components/message/index.js";
  message({
    message: "我是消息提示",
    duration: 2,
  });
  

• 支持手动关闭message

素材准备

素材准备：一个普通的message.vue单文件组件

• 接受两个参数：消息文本message、持续时间duration
• 两个方法：显示消息组件show、关闭消息组件close

// message.vue
<template>
  <div class="message" v-if="isShow">
    <p>
      {{ message }}
    </p>
    <button @click="close">关闭弹窗</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  props: {
    message: {
      type: String, required: true,
    },
    duration: {
      type: Number, default: 3,
    },
  },
  setup(props) {
    let isShow = ref(false);
    const show = () => {
      isShow.value = true;
      setTimeout(() => {
        isShow.value = false;
      }, props.duration * 1000);
    };
    const close = () => {
      isShow.value = false;
    };
    return { isShow, show, close };
  },
  created() {
    this.show();
  },
};
</script>

组件注册

要将一个vue组件动态的挂载到页面上，就必须先获取该组件的DOM。

• 利用渲染函数h即createVNode，将message.vue组件编译成vnode，参见：https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91
• 利用mount将vnode挂载到指定元素上
• 通过$el获取真实DOM

新建一个index.js文件

import { createApp, h } from "vue";
import Message from "./index.vue";

export const message = (props) => {
  const container = document.createElement("div");
  // 获取组件的DOM，将其挂载到body上
  const vm = createApp({
    render() {
      return h(Message, props);
    },
  });
  document.body.appendChild(vm.mount(container).$el);
  return {
    close: () => (vm.component.proxy.isShow = false),
  };
};

// 或者使用render方法，将vnode手动挂载到元素上
//import { h, render } from "vue";
//import Message from "./index.vue";

//export const message = (props) => {
//  const vm = h(Message, props);
//  const container = document.createElement("div");
//  render(vm, container);
//  // 获取组件的DOM，将其挂载到body上
//  document.body.appendChild(container.firstElementChild);
  
//  return {
//    close: () => (vm.component.proxy.isShow = false),
//  };
//};

在入口文件中，将messge方法挂载到Vue原型上后，所有的Vue组件内就能通过proxy.$message使用这个消息组件了

import { message } from "./components/message";
const app = createApp(App);
app.config.globalProperties.$message = message;

最后

以上就是现代太阳为你收集整理的极简系列---vue3.x消息组件message极简系列—vue3.x消息组件message的全部内容，希望文章能够帮你解决极简系列---vue3.x消息组件message极简系列—vue3.x消息组件message所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。