亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I?示例詳解

 更新時(shí)間:2022年08月08日 10:29:31   作者:bald3r  
這篇文章主要為大家介紹了Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I的手寫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

最近在實(shí)現(xiàn)Message組件,就是會(huì)從屏幕頂端彈出的一個(gè)小提醒,過一會(huì)兒就消失了。我個(gè)人非常喜歡這個(gè)設(shè)計(jì),感覺在后續(xù)的復(fù)用性也很高,于是就打算自己手寫一個(gè)作為發(fā)財(cái)U(kuò)I的組件

支持的功能

目前的Message有四種類型:

普通提醒 normal

成功提醒 success

警告提醒 warning

錯(cuò)誤提醒error

同時(shí)還支持設(shè)置持續(xù)的時(shí)間:

使用方法

是不是非常簡單??

<template>
  <div>
    <button @click="popNormalMsg">打開一個(gè)普通提醒</button>
  </div>
</template>
<script lang="ts">
import {popMessage} from "../../lib/popMessage";
export default {
  name: "Message1.demo",
  components: {Button},
  setup() {
    const popNormalMsg = () => {
      popMessage({
        message: '這是一個(gè)全局顯示的普通提醒',   //提醒內(nèi)容
        msgType: 'normal',   //提醒類型normal success error warning
        closeDelay: '2000',  //顯示的時(shí)長,以ms為單位
      })
    }
    return {popNormalMsg}
  }
}
</script>

實(shí)現(xiàn)過程

如何實(shí)現(xiàn)不同類型的切換?

其實(shí)切換類型只是切換圖標(biāo)而已哈哈哈

這里使用了IconPark圖標(biāo)庫,這里使用了一個(gè)投機(jī)取巧的辦法,把不同的圖標(biāo)命名為相應(yīng)的type,可以節(jié)省一些處理的步驟

  
href=#normalmsgType='normal'
href=#successmsgType='success'
href=#warningmsgType='warning'
href=#errormsgType='error'
const typeIndicator = `<use href="#${props.msgType}" rel="external nofollow"  rel="external nofollow" ></use>`
<template>
  <div ref="msgDiv" class="rich-message">
    <svg class="iconpark-icon" v-html="typeIndicator">
      //2??typeIndicator的內(nèi)容會(huì)原封不動(dòng)的跑到這里
    </svg>
    //3??最后和svg標(biāo)簽一起變成type對(duì)應(yīng)的圖標(biāo)
    <div class="rich-message-msgText">{{ message }}</div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Message",
  props: {
    message: {
      type: String,
      required: true,
    },
    msgType: {
      type: String,
      default: 'normal',
    },
  },
  setup(props) {
    const typeIndicator = `<use href="#${props.msgType}" rel="external nofollow"  rel="external nofollow" ></use>`
    return {typeIndicator}
    //1??接受到傳來的type,然后typeIndicator會(huì)自動(dòng)變?yōu)橄鄳?yīng)的圖標(biāo)use標(biāo)簽
  }
}
</script>

如何實(shí)現(xiàn)Message的彈出和消失?

使用了CSS的transform,實(shí)際上就是Message在初始狀態(tài)下是藏在畫面外的,通過添加一個(gè).message-active的類來讓它顯示出來,在經(jīng)過closeDelay毫秒后移除.message-active類。

.rich-message {
  ...
  transform: translateY(-100px);
  transition: all 250ms;
  &.message-active {
    transform: translateY(0px);
    opacity: 1;
  }
}

如何實(shí)現(xiàn)往下排列而非堆疊?

為了讓他們能夠一個(gè)一個(gè)的排列下來而不是堆疊在一起,我想到了insertAdjacentElement()方法

element.insertAdjacentElement(position, element);

position有下面四種取值

'beforebegin': 在該元素本身的前面。

'afterbegin':只在該元素當(dāng)中,在該元素第一個(gè)子孩子前面。

'beforeend':只在該元素當(dāng)中,在該元素最后一個(gè)子孩子后面。

'afterend': 在該元素本身的后面。

不難發(fā)現(xiàn)這里似乎可以使用beforeend和afterend。經(jīng)過我的思考,為了保持DOM樹的整潔,我采用了創(chuàng)建一個(gè)msgContainer的div來存放所有的Message的方法,因此我也相應(yīng)的使用了beforeend

let msgContainer = document.getElementById('msgDiv')
if (msgContainer === null) {
  msgContainer = document.createElement('div')
  msgContainer.id = 'msgDiv'
  document.body.appendChild(msgContainer)
}
const div = document.createElement('div'); //這個(gè)div就是Message所在的div
msgContainer.insertAdjacentElement('beforeend', div)

給msgContainer一個(gè)CSS樣式

#msgDiv {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

如何實(shí)現(xiàn)添加和移除.message-active類?

如果msgDiv在創(chuàng)建時(shí)就帶有.message-active類,那么將會(huì)閃現(xiàn)在頁面中,所以msgDiv應(yīng)該是在渲染后被添加了.message-active類,為了實(shí)現(xiàn)這個(gè)效果,使用了一個(gè)setTimeout()。

同時(shí)在closeDelay之后將這個(gè)類移除。

但是這樣存在一個(gè)問題,這個(gè)msgDiv只是看不見了,依然存在于DOM樹中。

setTimeout(() => {
    msgDiv.classList.add('message-active')
}, 0)
setTimeout(() => {
    msgDiv.classList.remove('message-active')
}, closeDelay * 1);

如何將隱藏的Message從DOM樹中移除

在Message的淡出動(dòng)畫結(jié)束后移除就好了,這里使用了.ontransitionendAPI,但是還存在問題,即如果有多個(gè)Message,他們會(huì)同時(shí)消失,原因是雖然每個(gè)Message在創(chuàng)建時(shí)都會(huì)有一個(gè)計(jì)時(shí)器,但是在移除時(shí)卻是所有的msgDiv一起移除,因此需要有區(qū)分的方法。

setTimeout(() => {
    msgDiv.classList.remove('message-active')
    msgDiv.ontransitionend = () => {
      app.unmount();
      div.remove();
    }
}, closeDelay * 1);

如何區(qū)分不同的Message?

在本項(xiàng)目中,我使用了隨機(jī)生成ID的方式,如此一番就能精準(zhǔn)的控制每個(gè)msgDiv

function randomLetter(len) {
  let str = '';
  for (let i = 0; i < len; i++) {
    str += String.fromCharCode(~~(Math.random() * 26 + 65));
  }
  return str;
}
const msgId = randomLetter(~~(Math.random() * 10 + 30)) //生成了一個(gè)隨機(jī)字符串
const app = createApp({
  render() {
    return h(Message, {
      message,
      msgType,
      id: msgId,
     });
  }
});
app.mount(div);
const msgDiv = document.getElementById(String(msgId))
setTimeout(() => {
    msgDiv.classList.add('message-active')
}, 0)
setTimeout(() => {
    msgDiv.classList.remove('message-active')
    msgDiv.ontransitionend = () => {
      app.unmount();
      div.remove();
    }
}, closeDelay * 1);

最后的一個(gè)小細(xì)節(jié)

我們使用了一個(gè)msgContainer將所有的Message包裹的起來,從而實(shí)現(xiàn)順序排列,但是在最后一個(gè)Message消失后,msgContainer會(huì)作為一個(gè)空的div仍然存在于DOM樹中,這很不環(huán)保,因此在最后一個(gè)Message消失后將msgContainer也一并移除

setTimeout(() => {
  msgDiv.classList.remove('message-active')
  msgDiv.ontransitionend = () => {
     app.unmount();
     div.remove();
     if (msgContainer.children.length === 0) {
       msgContainer.remove()
     }
  }
}, closeDelay * 1);

以上就是Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I 示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Message組件發(fā)財(cái)U(kuò)I 的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue3用Proxy替代defineProperty的原因

    Vue3用Proxy替代defineProperty的原因

    vue的人都知道,vue3里面使用了proxy替換了defineProperty,本文主要介紹了Vue3用Proxy替代defineProperty的原因,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12
  • vue中進(jìn)行微博分享的實(shí)例講解

    vue中進(jìn)行微博分享的實(shí)例講解

    在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實(shí)例內(nèi)容,有需要的朋友們可以參考下。
    2019-10-10
  • Vue項(xiàng)目業(yè)務(wù)邏輯模塊介紹

    Vue項(xiàng)目業(yè)務(wù)邏輯模塊介紹

    這篇文章主要介紹了Vue項(xiàng)目業(yè)務(wù)邏輯,不同的項(xiàng)目有不同的功能,不同的功能需要不同的實(shí)現(xiàn),實(shí)現(xiàn)這些核心功能的代碼就叫業(yè)務(wù)邏輯。所以說業(yè)務(wù)邏輯是指一個(gè)實(shí)體單元為了向另一個(gè)實(shí)體單元提供服務(wù),應(yīng)該具備的規(guī)則與流程
    2022-11-11
  • vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁面最下方

    vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁面最下方

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁面最下方,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue中使用Axios最佳實(shí)踐方式

    vue中使用Axios最佳實(shí)踐方式

    Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請(qǐng)求庫,可以用于瀏覽器和?node.js,Axios?使用簡單,包尺寸小且提供了易于擴(kuò)展的接口,這篇文章主要介紹了vue中使用Axios最佳實(shí)踐,需要的朋友可以參考下
    2022-09-09
  • Vue3 Suspense處理異步組件加載的工作原理

    Vue3 Suspense處理異步組件加載的工作原理

    Vue3在新版本中提供了一個(gè)新的API,稱為Suspense,它可以使異步組件的加載更加高效和流暢,在本文中,我們將詳細(xì)了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來提高 Web 應(yīng)用程序的性能
    2023-06-06
  • Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢)用法講解

    Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢)用法講解

    這篇文章主要介紹了Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢)用法講解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼

    Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼

    這篇文章主要介紹了Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼,需要的朋友可以參考下
    2017-09-09
  • VUE中setTimeout和setInterval自動(dòng)銷毀案例

    VUE中setTimeout和setInterval自動(dòng)銷毀案例

    這篇文章主要介紹了VUE中setTimeout和setInterval自動(dòng)銷毀案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決

    關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決

    這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12

最新評(píng)論