在上一篇文章中，主要觀摩學(xué)習(xí)了淘寶的“>” 實(shí)現(xiàn)透罢，開拓了自己的思路榜晦。
順便總結(jié)一下自己，有時會做不代表做的好羽圃，跟高中數(shù)學(xué)一樣乾胶，一道題會有好幾種解法（提起數(shù)學(xué)就有種淡淡的憂桑...）；在前端中更是如此朽寞，有時僅僅是為了完成任務(wù)识窿，很少考慮過更優(yōu)的解決方法，So~利用上篇總結(jié)的方法脑融，嘗試一些改變喻频，舉一反三。
史前
現(xiàn)有項(xiàng)目中的組件poptip
圖片已掛肘迎，待更新半抱。
注意這些poptip的小三角，以前用的笨方法就是切圖膜宋。很顯然窿侈，這是個非常蛋疼的方法，因?yàn)椋?/p>
- 不同狀態(tài)的
poptip意味著不同顏色的小三角秋茫，以上圖為例史简，4個狀態(tài)下的poptip就要對應(yīng)要切4個不同顏色的三角箭頭； - 不同狀態(tài)下三角箭頭的方向可能不一樣肛著，上下左右...那么也就是4個方向*4中顏色=16個切圖Ｔ脖！枢贿！
很明顯殉农，這不是一個好的解決問題的方法。
「抄」越
我們知道用CSS寫兩個內(nèi)外重疊在一起的三角形局荚，改變內(nèi)三角形的背景色即能實(shí)現(xiàn) ">", 那么poptip中的三角箭頭利用這個方法應(yīng)該也不成問題超凳。
思路是和">"一樣一樣的，只不過耀态，需要注意的是內(nèi)外兩個三角形border-color的處理轮傍。
由于是組件，為了方便展（裝）示(逼)首装，這里就貼上Sass的代碼创夜。
HTML：
<div class="poptip poptip-succ"> <!--poptip基礎(chǔ)樣式，poptip-succ/warn/error/info 作為子模塊標(biāo)注提醒狀態(tài)-->
<div class="poptip-bd">
彈出提示框
</div>
<span class="poptip-close">×</span>
<span class="arrow arrow-top"> <!--arrow為箭頭基礎(chǔ)樣式仙逻，arrow-top/right/bottom/left控制箭頭方向-->
<span class="arrow arrow-in"></span>
</span>
</div>
Sass:
//poptip state class
// poptipClassName, backgroundColor, borderColor, arrowClassName, positionY, positionX, marginTop, marginLeft
$popInfo: info #edf4fa #c7dbeb top -16px 20px -7px -8px;
$popSucc: succ #ebf9df #bed7a8 right 20px -16px -8px -9px;
$popError: error #faedee #fad2cd bottom -16px 20px -9px -8px;
$popWarn: warn #fcf5e3 #e8d4a8 left 20px -16px -8px -7px;
$poptipGroup: $popInfo, $popSucc, $popError, $popWarn !default;
/* poptip arrow style */
.#{$poptipBaseClass}{
//poptip 的基礎(chǔ)樣式
.#{$poptipArrowClass}{
width: 0px;
height: 0px;
line-height: 0;
font-size: 0;
border: 8px dashed transparent;
position: absolute;
zoom: 1;
}
//各個方向上的arrow
@each $arrowItem in $poptipGroup{
$arrowBorderStyle: 8px solid transparent;
$arrowPositionClass: nth($arrowItem,4);
$arrowPositionY: nth($arrowItem,5);
$arrowPositionX: nth($arrowItem,6);
$arrowMarginTop: nth($arrowItem,7);
$arrowMarginLeft: nth($arrowItem,8);
$arrowClass: unquote('arrow-'+$arrowPositionClass);
//如果是向上的箭頭驰吓，其實(shí)要設(shè)置的是三角形的下邊框的顏色涧尿；以此類推。
//position的取值先預(yù)設(shè)檬贰，后面根據(jù)實(shí)際需求重新調(diào)整
.#{$arrowClass}{
@if $arrowClass == 'arrow-top'{
border-bottom: $arrowBorderStyle;
top: $arrowPositionY;
left: $arrowPositionX;
.#{$poptipArrowClass}-in{border-bottom: $arrowBorderStyle;}
}
@else if $arrowClass == 'arrow-right'{
border-left: $arrowBorderStyle;
top: $arrowPositionY;
right: $arrowPositionX;
.#{$poptipArrowClass}-in{border-left: $arrowBorderStyle;}
@if $ie6{_right: -17px;}
}
@else if $arrowClass == 'arrow-bottom'{
border-top: $arrowBorderStyle;
bottom: $arrowPositionY;
left: $arrowPositionX;
.#{$poptipArrowClass}-in{border-top: $arrowBorderStyle;}
}
@else if $arrowClass == 'arrow-left'{
border-right: $arrowBorderStyle;
top: $arrowPositionY;
left: $arrowPositionX;
.#{$poptipArrowClass}-in{border-left: $arrowBorderStyle;}
}
.#{$poptipArrowClass}-in{
margin-top: $arrowMarginTop;
margin-left: $arrowMarginLeft;
}
}
}
}
/* poptip state style */
@each $poptipItem in $poptipGroup{
$stateClass: nth($poptipItem,1);
$backgroundColor: nth($poptipItem,2);
$borderColor: nth($poptipItem,3);
$poptipClass: unquote('poptip-'+$stateClass);
.#{$poptipClass}{
border: 1px solid $borderColor;
background-color: $backgroundColor;
@each $arrowItem in $poptipGroup{
$arrowPositionClass: nth($arrowItem,4);
$arrowClass: unquote('arrow-'+$arrowPositionClass);
//各種狀態(tài)下的arrow顏色姑廉，
.#{$arrowClass}{
@if $arrowClass == 'arrow-top'{
border-bottom-color: $borderColor; //外三角的顏色是poptip的邊框顏色相同
.#{$poptipArrowClass}-in{border-bottom-color: $backgroundColor;} //內(nèi)三角的顏色是poptip的背景顏色相同
}
@else if $arrowClass == 'arrow-right'{
border-left-color: $borderColor;
.#{$poptipArrowClass}-in{border-left-color: $backgroundColor;}
}
@else if $arrowClass == 'arrow-bottom'{
border-top-color: $borderColor;
.#{$poptipArrowClass}-in{border-top-color: $backgroundColor;}
}
@else if $arrowClass == 'arrow-left'{
border-right-color: $borderColor;
.#{$poptipArrowClass}-in{border-right-color: $backgroundColor;}
}
}
}
}
}
Tips:
當(dāng)border-style : dashed時，border-color:transparent在IE6下才有效偎蘸。因此庄蹋，通常我要寫一個三角瞬内，首先會寫出三角的基礎(chǔ)樣式:
.arrow{
width: 0px;
height: 0px;
line-height: 0;
font-size: 0;
border: 8px dashed transparent;
}
然后再根據(jù)具體是哪一個方向的三角迷雪，改變對應(yīng)邊框的border-style和border-color。
.arrow{
width: 0px;
height: 0px;
line-height: 0;
font-size: 0;
border: 8px dashed transparent;
border-bottom: 8px solid #bed7a8;
}
