使用Less制作带箭头提示框

Posted 2020-09-21 ljbguanli

这里使用Less来制作带箭头的提示框，跟css比起来。方便多了，能够剩下非常多的代码。别的不扯了。先看看效果吧。

这里我实现了4个方向的提示框，以下是详细实现代码：

提示框代码：

<div class="top_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            上提示框<br/>
        </div>
    </div>

    <div class="left_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            左提示框<br/>
        </div>
    </div>

    <div class="right_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            右提示框<br/>
        </div>
    </div>

    <div class="bottom_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            下提示框<br/>
        </div>
    </div>

less部分：

这里将实现提示框的代码封装到一个library.less文件里的，方面多个地方调用，其它less文件使用该文件时，直接使用@import "library";就能够引入该文件了

library.less文件代码：

//边框
.border(all,@b_w:1px,@color:#cdcdcd,@style:solid){
	border:@b_w @style @color;
}

//上边框
.border(top,@b_w:1px,@color:#cdcdcd,@style:solid){
	border-top:@b_w @style @color;
}

//右边框
.border(right,@b_w:1px,@color:#cdcdcd,@style:solid){
	border-right: @b_w @style @color;
}

//下边框
.border(bottom,@b_w:1px,@color:#cdcdcd,@style:solid){
	border-bottom:@b_w @style @color;
}

//左边框
.border(left,@b_w:1px,@style:solid,@color:#cdcdcd){
	border-left: @b_w @style @color;
}

//定位->相对定位
.position(r){
	position: relative;
}
//定位->绝对定位
.position(a){
	position: absolute;
}
//定位->固定定位
.position(f){
	position: fixed;
}

//字体
.font(@size:14px,@lh:30px,@style:normal,@family:"微软雅黑"){
	font:@style @size/@lh @family;
}

//内边距
.padd(all,@distance:10px){
	padding:@distance;
}

.padd_top_left(@top_distance:5px,@left_distance:10px){
  padding:@top_distance @left_distance;
}
//上内边距
.padd(top,@distance:10px){
	padding-top: @distance;
}
//右内边距
.padd(right,@distance:10px){
	padding-right: 10px;
}
//下内边距
.padd(bottom,@distance:10px){
	padding-bottom: @distance;
}
//左内边距
.padd(left,@distance:10px){
	padding-left: @distance;
}

//外边距
.margin(all,@distance:10px){
	margin:@distance;
}

.margin_top_left(@top_distance:5px,@left_distance:10px){
  margin:@top_distance @left_distance;
}
//上外边距
.margin(top,@distance:10px){
	margin-top:@distance;
}
//右外边距
.margin(right,@distance:10px){
	margin-right:@distance;
}
//下外边距
.margin(bottom,@distance:10px){
	margin-bottom:@distance;
}
//左外边距
.margin(left,@distance:10px){
	margin-left:@distance;
}

/**
向上的三角
top:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(top,@b_width:10px,@color:#cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color:transparent transparent @color transparent;
  border-style:solid dashed dashed dashed;
}

/**
向右的三角
right:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(right,@b_width:10px,@color:#cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color: transparent  transparent transparent @color;
  border-style: dashed solid dashed dashed;
}

/**
向下的三角
bottom:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(bottom,@b_width: 10px,@color: #cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color: @color transparent transparent transparent;
  border-style: dashed dashed solid dashed;
}

/**
向左的三角
bottom:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(left,@b_width: 10px,@color: #cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color: transparent @color transparent transparent ;
  border-style: dashed  dashed dashed solid;
}

//这里是上面的公公样式，不须要手动调用，less会自己主动调用
.triangle(@_,@b_width:10px,@color:#cdcdcd){
  width: 0px;
  height: 0px;
  display: inline-block;
}

//圆角
.border-radius(@raiuds:5px){
  border-radius:@raiuds;
  -webkit-border-radius: @raiuds;
  -moz-border-radius: @raiuds;
}

/*
	箭头向上的提示框
	top:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(top,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	top:-20px;
	left:10px;
	.line{
	  .triangle(top,10px,@color);//向上的三角
	}
	.back{
	  .triangle(top,10px,#ffffff);//向上的三角
	  top:1px;
	}
  }
}

/*
	箭头向左的提示框
	left:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(left,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	left:-20px;
	top:10px;
	.line{
	  .triangle(left,10px,@color);//向左的三角
	}
	.back{
	  .triangle(left,10px,#ffffff);//向左的三角
	  left:1px;
	}
  }
}

/*
	箭头向右的提示框
	right:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(right,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	left:@pb_w+21;
	top:10px;
	.line{
	  .triangle(right,10px,@color);//向右的三角
	}
	.back{
	  .triangle(right,10px,#ffffff);//向右的三角
	  left:-1px;
	}
  }
}

/*
	箭头向下的提示框
	bottom:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(bottom,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	bottom: 0px;
	left:10px;
	.line{
	  .triangle(bottom,10px,@color);//向下的三角
	}
	.back{
	  .triangle(bottom,10px,#ffffff);//向下的三角
	  top:-1px;
	}
  }
}

//提示框公共样式，不须要手动调用
.prompt(@_,@pb_w:200px,@color: #cdcdcd){
  .position(r);//相对定位
  .margin(top,5px);//上外边距
  .top_triangle{
	z-index: 1;
	.position(a);//绝对定位
	.line{
	  .position(a);//绝对定位
	}
	.back{
	  .position(a);//绝对定位
	}
  }
  .prompt_border{
	.position(r);//相对定位
	.border(all,1px,@color);//边框
	.padd_top_left();//内边距
	background: #ffffff;
	width: @pb_w;
	.border-radius();//圆角
	.font();
  }
}

使用另外一个文件调用：

@import "lib/library";
.top_prompt {
  .prompt(top);
}

.left_prompt{
  .prompt(left);
}

.right_prompt{
  .prompt(right);
}

.bottom_prompt{
  .prompt(bottom);
}

编译less成为css文件，我使用的是Koala的工具。当然这里代码要对less熟悉的人才干看懂，假设对less不熟悉，能够先去了解下less