element-plus在js頁(yè)面對(duì)message的

element-plus在js頁(yè)面對(duì)message的導(dǎo)入

漏補(bǔ)缺

關(guān)于上一篇vue引入element-ui后界面空白中，提到了vue3.0配合vue-cli@4.5以上需要使用element-plus替代element-ui來(lái)實(shí)現(xiàn)ui界面的問(wèn)題。需要補(bǔ)充的就是message的調(diào)用。

message就是頂部提示，三秒消失的提示框。常用的就是success/warning/info/error。

當(dāng)然如果是vue組件，自然可以直接對(duì)message直接起作用。但是如果是在js文件里，就需要導(dǎo)入message。參考官網(wǎng)引入。

import { ElMessage } from 'element-plus';

使用

ElMessage.success(options)

正文部分

今日無(wú)正文。

每天面試題

v-if和v-show的區(qū)別

展示的效果其實(shí)是相同的，只是在隱藏元素的時(shí)候效果會(huì)有區(qū)別。

相同：

v-if與v-show都可以動(dòng)態(tài)控制dom元素顯示隱藏，

不同：

v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素。
v-show本質(zhì)是利用標(biāo)簽的display屬性，通過(guò)visibility和none控制顯隱。

v-if="false"在DOM不能獲取到該標(biāo)簽。
v-show=false在DOM中仍能獲取到該標(biāo)簽。

v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷毀的重建內(nèi)部的事件監(jiān)聽(tīng)和子組件。
v-show其實(shí)是在控制css。

v-if初始值為false，就不會(huì)編譯了。
v-show都會(huì)編譯，初始值為false,只是將display設(shè)為none,但它也編譯了。

v-if不停地銷毀和創(chuàng)建。
v-show只編譯一次，后面其實(shí)就是控制css，故v-show性能更好一點(diǎn)。

總結(jié)：頻繁切換使用v-show，不頻繁則使用v-if。
提示：不推薦同時(shí)使用 v-if 和 v-for

display:none與visibility:hidden的區(qū)別

相同：

都是隱藏標(biāo)簽，對(duì)應(yīng)的標(biāo)簽仍存在DOM結(jié)構(gòu)中

不同：

標(biāo)簽設(shè)置display: none后，不會(huì)占據(jù)該標(biāo)簽原來(lái)所在的位置，會(huì)觸發(fā)重流（回流），HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”。
標(biāo)簽設(shè)置visibility: hidden后，仍占據(jù)原來(lái)的位置，會(huì)觸發(fā)重繪，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），即是說(shuō)它仍具有高度、寬度等屬性值。

visibility具有繼承性。給父元素設(shè)置visibility:hidden;子元素也會(huì)繼承這個(gè)屬性。但是如果重新給子元素設(shè)置visibility: visible,則子元素又會(huì)顯示出來(lái)。這個(gè)和display: none有著質(zhì)的區(qū)別

visibility: hidden不會(huì)影響計(jì)數(shù)器的計(jì)數(shù)。visibility: hidden雖然讓一個(gè)元素不見(jiàn)了，但是其計(jì)數(shù)器仍在運(yùn)行。這和display: none完全不一樣。

CSS3的transition支持visibility屬性，但是并不支持display。由于transition可以延遲執(zhí)行，因此可以配合visibility使用純css實(shí)現(xiàn)hover延時(shí)顯示效果。提高用戶體驗(yàn)。

回流與重繪

重流必定導(dǎo)致重繪，重繪不一定重流。

部分渲染樹（或者整個(gè)渲染樹）需要重新分析并且節(jié)點(diǎn)尺寸需要重新計(jì)算會(huì)發(fā)生回流。
由于節(jié)點(diǎn)的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變?cè)乇尘吧珪r(shí)，屏幕上的部分內(nèi)容需要更新時(shí)只會(huì)發(fā)生重繪。

觸發(fā)回流和重繪的情況

添加、刪除、更新 DOM 節(jié)點(diǎn)------觸發(fā)回流和重繪
通過(guò) display: none 隱藏一個(gè) DOM 節(jié)點(diǎn)------觸發(fā)回流和重繪
通過(guò) visibility: hidden 隱藏一個(gè) DOM 節(jié)點(diǎn)------只觸發(fā)重繪，因?yàn)闆](méi)有幾何變化
移動(dòng)或者給頁(yè)面中的 DOM 節(jié)點(diǎn)添加動(dòng)畫------觸發(fā)回流和重繪
用戶行為，例如調(diào)整窗口大小，改變字號(hào)，或者滾動(dòng)------觸發(fā)回流和重繪
添加一個(gè)樣式表，調(diào)整樣式屬性------觸發(fā)回流和重繪
offsetWidth,width,clientWidth,scrollTop/scrollHeight的計(jì)算------觸發(fā)回流和重繪，使瀏覽器將漸進(jìn)回流隊(duì)列Flush

減少回流與重繪

避免逐項(xiàng)更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class并一次性更改class屬性。
避免循環(huán)操作DOM。創(chuàng)建一個(gè)documentFragment或div,在它上面應(yīng)用所有DOM操作，最后再把它添加到window.document。
避免循環(huán)讀取offsetLeft等屬性。在循環(huán)之前把它們存起來(lái)。
絕對(duì)定位具有復(fù)雜動(dòng)畫的元素。絕對(duì)定位使它脫離文檔流，否則會(huì)引起父元素及后續(xù)元素大量的回流。

今天的分享就到這里，vue的學(xué)習(xí)被prototype搞崩了，所以今日無(wú)正文。

就這樣了，ばいばい

isibility:hidden和display:none的區(qū)別在于：

1.作用不同：visibility:hidden將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著。display:none將元素的顯示設(shè)為無(wú)，即在網(wǎng)頁(yè)中不占任何的位置。

2.使用后HTML元素有所不同：visibility:hidden，使用該屬性后，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說(shuō)它仍具有高度、寬度等屬性值。display:none，使用該屬性后，HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”。

3.定義不同：visibility屬性指定一個(gè)元素是否是可見(jiàn)的。display這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。

元素隱藏和顯示最常用的為 display:none 和 visibility:hidden

dispaly:none 設(shè)置該屬性后，該元素下的元素都會(huì)隱藏，占據(jù)的空間消失

visibility:hidden 設(shè)置該元素后，元素雖然不可見(jiàn)了，但是依然占據(jù)空間的位置

其他區(qū)別

1.visibility 具有繼承性，其子元素也會(huì)繼承此屬性，若設(shè)置 visibility:visible，則子元

素會(huì)顯示

2.visibility 不會(huì)影響計(jì)數(shù)器的計(jì)算，雖然隱藏掉了，但是計(jì)數(shù)器依然繼續(xù)運(yùn)行著。

3.在 CSS3 的 transition 中支持 visibility 屬性，但是不支持 display，因?yàn)?transition 可以延遲執(zhí)行，因此配合 visibility 使用純 CSS 實(shí)現(xiàn) hover 延時(shí)顯示效果可以提高用戶體驗(yàn)

4.display:none 會(huì)引起回流(重排)和重繪 visibility:hidden 會(huì)引起重繪。

#挑戰(zhàn)30天在頭條寫日記#

元素雖然強(qiáng)大，但是還是有一些特定的標(biāo)簽是不支持偽元素 before 和 after 的。

諸如 <img\>、<input\>、<iframe\>，這幾個(gè)標(biāo)簽是不支持類似 img::before 這樣使用。

究其原因，要想要標(biāo)簽支持偽元素，需要這個(gè)元素是要可以插入內(nèi)容的，也就是說(shuō)這個(gè)元素要是一個(gè)容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通過(guò)偽元素插入內(nèi)容。

純CSS實(shí)現(xiàn)title屬性hover效果

我們都知道，在 HTML 標(biāo)簽中有這樣一個(gè)屬性 – title，該屬性規(guī)定關(guān)于元素的額外信息，就是我們可以往 title 里面填入一段文字，鼠標(biāo)移到元素上時(shí)就會(huì)顯示這段文本。

像是這樣 <element title="value" >。效果如下：

;

但是這個(gè) hover 框有兩個(gè)小問(wèn)題：

響應(yīng)太慢，通常鼠標(biāo) hover 上去要隔 1s 左右才會(huì)出現(xiàn)這個(gè) title 框
框體結(jié)構(gòu)無(wú)法自定義，彈出框的樣式無(wú)法自定義

嗯，通常要解決上面的方法，或者說(shuō)我們需要一個(gè)鼠標(biāo) hover 上去的時(shí)候彈出一個(gè)提示層的效果都不會(huì)采用 title 屬性，而是配合使用 JS 模擬一個(gè)彈出層。

這里有一個(gè)純 CSS 的方案可以解決這個(gè)場(chǎng)景，運(yùn)用了偽元素，先上 Demo：

鼠標(biāo) hover 一下文字，發(fā)現(xiàn)彈出層響應(yīng)十分迅速（因?yàn)榫褪?CSS hover，沒(méi)有延遲）。并且這里的彈出層的樣式也可以完全自定義，沒(méi)有用到 JS 代碼，并且查看 HTML 代碼可以看到不需要多余的標(biāo)簽。

怎么實(shí)現(xiàn)的呢？主要是運(yùn)用了偽元素的 content屬性，content通常是用于在偽元素中插入內(nèi)容的。而其中有一句語(yǔ)法content: attr(value)類似這樣，可以讀取對(duì)應(yīng) HTML 標(biāo)簽的value屬性。也就是：

假設(shè)一個(gè) HTML 標(biāo)簽定義為： <div data-msg="ABC">
那么該 div 對(duì)應(yīng)的偽類如果設(shè)置了 content:attr(data-msg)，就可以讀取到 data-msg 的值，相當(dāng)于content:"ABC"

而且框體由于是偽類生成的，所以我們可以自定義它的樣式及位置，運(yùn)用這個(gè)效果，我們應(yīng)用在可以在許多無(wú)法正常把信息展示完的地方。

借用偽元素實(shí)現(xiàn)多列均勻布局

我們經(jīng)常需要實(shí)現(xiàn)多列均勻布局，能夠自適應(yīng)各種情況，如下：

在移動(dòng)端我們可以使用 flex 布局，但是在 PC 端如果要兼容 IE6+ ，通常都需要一些額外的標(biāo)簽控制最后一個(gè)元素或者配合 JS 進(jìn)行運(yùn)算。

我們知道，有個(gè) text-align:justify可以實(shí)現(xiàn)兩端對(duì)齊文本效果，一開(kāi)始我猜測(cè)使用它可以實(shí)現(xiàn)：

試了一下是不行的，并沒(méi)有實(shí)現(xiàn)所謂的兩端對(duì)齊，查找原因，在 W3C找到這樣一段解釋:

最后一個(gè)水平對(duì)齊屬性是 justify，它會(huì)帶來(lái)自己的一些問(wèn)題。CSS 中沒(méi)有說(shuō)明如何處理連字符，因?yàn)椴煌恼Z(yǔ)言有不同的連字符規(guī)則。規(guī)范沒(méi)有嘗試去調(diào)和這樣一些很可能不完備的規(guī)則，而是干脆不提這個(gè)問(wèn)題。

額，我看完上面一大段解釋還是沒(méi)明白上面意思，再繼續(xù)查證，才找到原因：

雖然 text-align:justify 屬性是全兼容的，但是要使用它實(shí)現(xiàn)兩端對(duì)齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用。

也就是說(shuō)每一個(gè) <i>1</i>間隙，至少需要有一個(gè)空格或者換行或者制表符才行。

我嘗試給每一塊中間添加一個(gè)換行符，發(fā)現(xiàn)還是不行：

再尋找原因，是出在最后一個(gè)元素上面，然后我找到了 text-align-last這個(gè)屬性，text-align-last 屬性規(guī)定如何對(duì)齊文本的最后一行，并且 text-align-last 屬性只有在 text-align 屬性設(shè)置為 “justify” 時(shí)才起作用。

嘗試給容器添加 text-align-last:justify，發(fā)現(xiàn)終于可以了，多列均勻布局：

但是一看兼容性，慘不忍睹，只有 IE 和最新的 chrome 支持 text-align-last 屬性，也就是說(shuō)，如果你不是在使用 IE 或者最新版的 chrome 觀看本文，上面這個(gè) codePen 例子還是沒(méi)有均勻分布。

好，鋪墊了這么久，終于可以引出本文的主角偽元素了，上面說(shuō)了要使用 text-align:justify實(shí)現(xiàn)多列布局，要配合text-align-last，但是它的兼容性又不好，真的沒(méi)辦法了么，其實(shí)還是有的，使用偽元素，可以完美實(shí)現(xiàn)：

通過(guò)給偽元素 :after 設(shè)置 inline-block，配合容器的text-align: justify就可以輕松實(shí)現(xiàn)多列均勻布局了。配合幾句 hack 代碼，可以實(shí)現(xiàn)兼容到 IE6+ ，最重要的是代碼不長(zhǎng)，很好理解。

本文主要就是多介紹了偽元素的兩種實(shí)用方法，更多偽元素的妙用可以戳

我另一篇講述 CSS 偽元素的文章：【CSS進(jìn)階】偽元素的妙用–單標(biāo)簽之美，看完本文覺(jué)得有意思的可以再去看看上一篇。

也希望覺(jué)得不錯(cuò)的同學(xué)順手在我的 Github 點(diǎn)個(gè) star ： CSS3奇思妙想。

希望這篇文章對(duì)大家有所幫助，尤其是在對(duì)問(wèn)題解決的思維層面上。

到此本文結(jié)束，如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

在線咨詢

上一篇：CSS 文本樣式
下一篇：騰訊、愛(ài)奇藝、優(yōu)酷....VIP免廣告