个人信息栏目主要实现一个带下划线的文字组件，很多地方都可以用到。可以设置颜色，字体大小，是否是粗体，下划线的高度
TextUnderline.vue
<template>
<div ref="wrap">
<slot name="at"></slot>
<slot name="icon"></slot>
<span class="text" ref="text" @click="handleClick">{{text}}</span>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
components: {}
})
export default class extends Vue {
@Prop()
private text!: string;
@Prop()
private color!: string;
@Prop()
private size!: string;
@Prop()
private isBold!: string;
@Prop()
private underlineHeight!: string;
private mounted() {
if (this.size) {
if (!isNaN(Number(this.size))) {
const obj = this.$refs.wrap as HTMLElement;
obj.style.fontSize = this.size + "px";
}
if (!isNaN(Number(this.underlineHeight))) {
const obj = this.$refs.text as HTMLElement;
obj.style.borderWidth = this.underlineHeight + "px";
}
if (this.color) {
const obj = this.$refs.text as HTMLElement;
obj.style.borderColor = this.color;
obj.style.color = this.color;
}
if (this.isBold && this.isBold === "true") {
const obj = this.$refs.wrap as HTMLElement;
obj.style.fontWeight = "bold";
}
}
}
private handleClick() {
this.$emit("click");
}
}
</script>
<style scoped lang="scss">
div {
font-size: 20px;
.text:hover {
border-bottom: 2px solid black;
padding-bottom: 1px;
cursor: pointer;
}
}
</style>
效果展示
在这里插入图片描述
