93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
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>
|