VUE 2.x中全局组件的封装（三）

作者: _皓月__ | 来源:发表于2021-04-23 15:01 被阅读0次

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

为什么使用 extend

在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？

这时候，Vue.extend + vm.$mount 组合就派上用场了。

一个简单示例-hello world

index.vue

<template>
  <div>
    <p>text:{{ text }}</p>
    <p>content:{{ content }}</p>
    <p>isShow:{{ isShow }}</p>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "textDefault"
    }
  },
  data() {
    return {
      isShow: false,
      content: "contentDefault"
    };
  }
};
</script>

跟他同级目录的 index.js

import Vue from "vue";
import helloWorld from "./index.vue";
const HelloWorldConstructor = Vue.extend(helloWorld);

const Hello = option => {
  const HelloWorldInstance = new HelloWorldConstructor({
    data: {
      content: option.content
    },
    // 传props 值必须用 propsData
    propsData: {
      text: option.text
    }
  }); // 实例化一个带有content内容的Notice
  // 设置 data 中的值也可以这样直接写
  HelloWorldInstance.isShow = option.isShow;
  HelloWorldInstance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
  let helloDom = HelloWorldInstance.$el;
  document.body.appendChild(helloDom); // 将dom插入body
  // 一
  // return HelloWorldInstance;
  // 二
  return () => {
    HelloWorldInstance.$el.parentNode.removeChild(HelloWorldInstance.$el);
  };
};

export default {
  install: Vue => {
    Vue.prototype.$hello = Hello;
  }
};

main.js中注入

import Hello from "@/components/global/Hello"; //这个是 index.js
Vue.use(Hello); // 使用全局组件 Hello

使用--在test.vue中

<template>
  <div>
    测试 hello 组件
  </div>
</template>
<script>
export default {
  name: "test",
  created() {
    let removeHello = this.$hello({
      content: "hello--content",
      text: "hello--text",
      isShow: "isShow-true"
    });
    setTimeout(() => {
      // 一
      // removeHello.$el.parentNode.removeChild(removeHello.$el);
      // 二
      removeHello();
    }, 3000);
  }
};
</script>

Vue.extend 自定义插件形式全局弹窗提示组件

来个升级版，写个类似alert的组件
notice.vue

<template>
  <transition name="message-fade">
    <div :class="['message', 'notice-' + type]" v-show="visible">
      <i :class="'el-icon-' + type + ' content-' + type"></i>
      <div :class="['content', 'content-' + type]">{{ content }}</div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      type: "info", //'success','warning','error'
      duration: 2500, // 弹窗展示时长
      visible: false,
      hasClose: false,
      noticeTimer: null
    };
  },
  mounted() {
    this.close();
    if (window.noticeEl && window.noticeEl.length > 0) {
      let top = parseFloat(window.noticeEl[window.noticeEl.length - 1].style.top);
      this.$el.style.top = top + 80 + "px";
      window.noticeEl.push(this.$el);
    } else {
      window.noticeElTop = this.$el.offsetTop || document.body.clientHeight * 0.04;
      this.$el.style.top = window.noticeElTop + "px";
      window.noticeEl = [this.$el];
    }
  },
  methods: {
    close() {
      setTimeout(() => {
        this.visible = false;
        window.noticeEl = window.noticeEl.filter(val => val !== this.$el);
        let top = window.noticeElTop;
        window.noticeEl.map((val, index) => {
          val.style.top = top + index * 80 + "px";
          return val;
        });
        setTimeout(() => {
          this.$destroy(true);
          this.$el.parentNode.removeChild(this.$el);
        }, 800); // 销毁自身组件，主要是要大于动画执行时间
      }, this.duration);
    }
  }
};
</script>

<style scoped lang="scss">
.message {
  position: absolute;
  top: 8vh;
  left: 50%;
  padding: 15px 20px;
  border-radius: 8px;
  background-color: #fff;
  transform: translateX(-50%);
  transition: opacity 0.2s, transform 0.2s, top 0.4s;
  font-size: 30px;
}
.content {
  display: inline-block;
  margin-left: 12px;
  min-width: 380px;
}
/* .#2ed573 */
.notice-success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
.el-icon-success,
.content-success {
  color: #67c23a;
}
.notice-warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
}
.notice-warning .content-warning {
  color: #e6a23c;
}
.notice-error {
  background-color: #fef0f0;
  border-color: #fde2e2;
}
.notice-error .content-error {
  color: #f56c6c;
}

// donghua
.message-fade-enter,
.message-fade-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-8vh);
}
.message-fade-enter-to,
.message-fade-leave {
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
}

.message-fade-enter-active {
  transition: all 0.4s ease;
}
.message-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.2, 0.8, 1);
}
</style>

跟notice.vue同级目录的 index.js

import Vue from "vue";
const NoticeConstructor = Vue.extend(require("./notice.vue").default);

let nId = 1;
// 为了同时兼容单独引入此组件的情况,加 export ，可以单独导出
export const Notice = (option = { message: "提交成功！", type: "success" }) => {
  const NoticeInstance = new NoticeConstructor({
    data: {
      content: option.message,
      type: option.type
    }
  }); // 实例化一个带有content内容的Notice
  NoticeInstance.visible = true;
  NoticeInstance.id = "notice-" + nId++;
  NoticeInstance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
  NoticeInstance.$el.style.zIndex = nId + 10000;
  document.body.appendChild(NoticeInstance.$el); // 将dom插入body
  return NoticeInstance;
};
// 全局组件挂载所用，对应 Vue.use()
export default {
  install: Vue => {
    Vue.prototype.$notice = Notice;
  }
};

main.js中注入

import Notice from "@/components/global/Notice"; //这个是 index.js
Vue.use(Notice); // 使用全局组件 notice

使用--在test.vue中

<template>
  <div>
    <el-button type="danger" @click="testClick">
      Notice全局组件使用
    </el-button>
    <el-button type="danger" @click="NoticeClick">
      Notice单独引入使用
    </el-button>
  </div>
</template>

<script>
import { Notice } from "@/components/global/Notice"; //这个是 index.js
export default {
  name: "test",
  methods: {
    NoticeClick() {
      let num = Math.floor(Math.random() * (1 - 10) + 10);
      let type = "";
      if (num <= 3) {
        type = "success";
      } else if (num <= 6) {
        type = "warning";
      } else {
        type = "error";
      }
      Notice({
        message: "提交成功！",
        type
      });
    },
    testClick() {
      let num = Math.floor(Math.random() * (1 - 10) + 10);
      let type = "";
      if (num <= 3) {
        type = "success";
      } else if (num <= 6) {
        type = "warning";
      } else {
        type = "error";
      }
      this.$notice({
        message: "提交成功！",
        type
      });
      //   this.$notify({
      //     title: "成功",
      //     message: "这是一条成功的提示消息",
      //     type
      //   });
    }
  }
};
</script>

上面引入定义的组件用了两种方式

import helloWorld from "./index.vue";
const HelloWorldConstructor = Vue.extend(helloWorld);

等同于

const NoticeConstructor = Vue.extend(require("./notice.vue").default);

网友评论

本文标题：VUE 2.x中全局组件的封装（三）

本文链接：https://www.haomeiwen.com/subject/rkaelltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！