如何寫一個全域性的 Notice 元件？

暮冬有八發表於2022-06-10
元件

下面將會實現這樣的效果：image

  1. 元件動態建立指令碼：

    NotificationBanner.js

    import Vue from "vue";
import Notice from "@/components/Noticer/Notice.vue";

function create(Component, props) {
  // 先建立例項
  const vm = new Vue({
    render(h) {
      //h就是createElement,它返回VNode
      return h(Component, { props });
    },
  }).$mount();
  // 手動掛載

  // 判斷是否存在container，如果不存在則先建立
  let container;
  container = document.querySelector(".noticer-container");
  if (container == null) {
    container = document.createElement("div");
    container.classList.add("noticer-container");
    container.style.position = "fixed";
    container.style.top = "50px";
    container.style.right = "0px";
    container.style.overflow = "hidden";
    container.style.zIndex = 9999;

    document.body.appendChild(container);
  }

  container.appendChild(vm.$el);

  //銷燬方法
  const comp = vm.$children[0];
  comp.remove = function () {
    container.removeChild(comp["$el"]);
    vm.$destroy();
  };
  comp.show();
  return comp;
}

Vue.prototype.$notice = {
  error: function (props) {
    create(Notice, Object.assign(props, { type: "error" }));
  },
  info: function (props) {
    create(Notice, Object.assign(props, { type: "info" }));
  },
  success: function (props) {
    create(Notice, Object.assign(props, { type: "success" }));
  },
  warn: function (props) {
    create(Notice, Object.assign(props, { type: "warn" }));
  },
};

    這裡有一些值得注意的地方：

    1. container： 的作用是notice的容器，它可以用於定位notice在頁面的哪裡展示，注意notice不應該隨頁面捲動，因此其定位是fixed, 而之所以設定為 overflow:hidden 的原因則是，notice 在出現和移除的時候，發生的動畫偏移，會讓頁面出現橫向滾動條。為了避免重複建立container， 這裡做了一個判斷邏輯。然後所有動態生成的notice例項dom都會通過 appendChild 新增到這個容器。
    2. 在移除的時候, 移除的是 vm.$children[0]["$el"] , 原因是，Notice 模板的實現中，外層套了一個 transition ， 而這個transition是並不會渲染dom的。

  2. 建立Notice元件模板：

    元件模板

    <template>
  <transition
    enter-active-class="animate__animated animate__slideInRight"
    leave-active-class="animate__animated animate__slideOutRight"
    @after-leave="afterLeave"
  >
    <div v-if="isShow" class="notice__root">
      <div :class="`notice-type-${type}`" class="noticer">
        {{
          type === "error"
            ? "&#127827;"
            : type === "success"
            ? "&#127808;"
            : type === "warn"
            ? "&#127819;"
            : "&#128051;"
        }}
        : {{ message }}
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    message: {
      type: String,
      default: "",
    },
    time: {
      type: Number,
      default: 1000,
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    show() {
      this.isShow = true;
      setTimeout(this.hide, this.time);
    },
    hide() {
      this.isShow = false;
    },
    afterLeave() {
      this.remove();
    },
  },
};
</script>
<style lang="less" scoped>
@error: rgb(255, 30, 30);
@warn: rgb(240, 192, 0);
@success: rgb(0, 144, 74);
@info: rgb(0, 80, 218);

@errorBg: rgb(255, 208, 208);
@warnBg: rgb(255, 245, 207);
@successBg: rgb(210, 255, 233);
@infoBg: rgb(203, 222, 255);

.notice__root {
  user-select: none;
  padding: 5px 50px 5px 5px;
}

.noticer {
  padding: 5px 20px;
  margin: 10px 0px;
  // margin-right: 50px;
  border-radius: 8px;
  font-size: 16px;
  width: auto;
  min-width: 280px;
  max-width: 300px;
  word-break: break-all;
  text-align: center;
  box-sizing: border-box;
}
.notice-type-error {
  color: @error !important;
  border: 2px solid @error;
  box-shadow: 1px 1px 5px 2px @errorBg;
  background-color: @errorBg;

  // border: 1px solid red;
}
.notice-type-warn {
  color: @warn !important;
  border: 2px solid @warn;
  background-color: @warnBg;
  box-shadow: 1px 1px 5px 2px @warnBg;
}
.notice-type-success {
  color: @success !important;
  border: 2px solid @success;
  background-color: @successBg;
  box-shadow: 1px 1px 5px 2px @successBg;
}
.notice-type-info {
  color: @info !important;
  border: 2px solid @info;
  background-color: @infoBg;
  box-shadow: 1px 1px 5px 2px @infoBg;
}
</style>

  3. 在 main.js 中引入執行該指令碼即可

    import Vue from "vue";
import App from "./App.vue";
import "animate.css";
import "@/components/Noticer/NotificationBanner.js";


new Vue({
  render: (h) => h(App),
}).$mount("#app");

  4. 程式碼中使用例項：

    if (!this.nickname) {
    this.$notice.error({
        message: "好漢！姓甚名誰？",
        time: 3000,
    });
} else {
    this.showModal = false;
    this.$notice.info({
        message: this.nickname + "來了！！！",
        time: 3000,
    });
}

動態建立元件的執行邏輯：
當在使用的時候：

this.$notice.error({
    message: "好漢！姓甚名誰？",
    time: 3000,
});

上方程式碼觸發，實際上會觸發 NotificationBanner.js 中的 create函式，該函式建立了一個notice 的元件例項，並在實力上新增了一個remove 方法，然後直接觸發元件中的 show 方法。

notice 模板例項中：

methods: {
    show() {
        this.isShow = true;
        setTimeout(this.hide, this.time);
    },
    hide() {
        this.isShow = false;
    },
    afterLeave() {
        this.remove();
    },
},

show 方法執行，除了展示 notice，立即設定一個延時函式執行 hide 方法。

hide 方法執行， vue 提供的 transition 鉤子 afterleave() 會在移除動畫執行完畢後觸發。 這時候，去觸發 remove 方法，將該notice 元件例項移除。

相關文章