ynTriangleBadge.vue

<!-- 三角角标组件 -
use:
   <ynTriangleBadge width="60" height="60" text="金8" bgcolor="green" fontsize="12"></ynTriangleBadge>
-->
<template>
	   <!-- 定义三角面板，包含2个元素 三角绘制和文字 -->
	   <view class="trianglePanel" :style="{'max-width':width+'px','min-width':width+'px','max-height':height+'px','min-height':height+'px'}">
		  <view class="triangle-topright" :style="{'border-top':height+'px solid '+bgcolor,'border-left':width+'px solid transparent'}"></view>
		  <!-- 用margin-left重叠三角 -->
		  <view class="textbox" :style="{width:width*0.5+'px',height:height*0.5+'px','font-size':fontsize+'px','margin-left':width*-0.5+'px'}">
		        {{text}}
		  </view>		
	   </view>	
</template>

<script>
	export default {
	        //组件名称  非必须
			name: 'ynTriangleBadge',   
	        props: {
					//组件背景颜色
					bgcolor:{
						type:String,
						default: 'blue'
					},
					width:{
						type:String,
						default: '50'	
					},
					height:{
						type:String,
						default: '50'	
					},
					text:{
						type:String,
						default:'N'
					},
					// 一般字体大小是12px 网页端不能再小了  移动端可以再小 可以显示出来 
					fontsize:{
						type:String,
						default:"12"
					}
			},
			data() {
				return {										
						
				};
			},
			methods: {							

			},		
			created: function() {
		
			},		
			// computed相当于属性的一个实时计算
			computed: { 
			},
	}		
</script>

<style>
.trianglePanel{
   display: flex;
   align-self:flex-end;
   color: white;
   /* border: red 1px solid; */
}

.textbox{
	align-self: flex-start;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	margin: 1px;
	/* 字符空格不忽略 */
	white-space: pre;     
	word-break: break-all;
}

/* 右上三角	上 左有宽度  下 右 无宽度 */
.triangle-topright{
/*   top:0;
   left:0; */
   z-index: 0;
   width:0;
   height:0;
}

</style>