按钮右上方显示文字(组件封装)

效果预览

代码实现

<template>
	<div
		class="main"
		ref="btn"
		:class="{ active }"
		@click="$emit('change', active)"
	>
		<span>{{ name }}</span>
	</div>
</template>
<script>
	export default {
		data() {
			return {};
		},
		methods: {},
		props: {
			//是否获取焦点 || 是否被选中
			active: {
				type: Boolean,
				default: false
			},
			//按钮类型，1辅助，0核心
			type: {
				type: [String, Number],
				default: 1
			},
			//按钮文字
			name: {
				type: String,
				default: ""
			}
		},

		mounted() {
		    
			//元素绑定的行内css
			let style = "";
			const map = new Map();
			//这里处理上方绑定的css，name为按钮右上方小文字，color为整体主题色
			const set_data = (name, color) => {
				style = `--name:"${name}";--color:${color}`;
			};
			//我这边需要根据类型渲染不同的name、color，不需要的删掉，写死即可，或者只写一种类型
			//文字不宜过多，一般两个就可以，太多会溢出
			//类型为 0 时，渲染核心dom的css
			map.set(0, () => {
				set_data("核心", "#409eff");
			});
			//类型为 1 时，渲染辅助dom的css
			map.set(1, () => {
				set_data("辅助", "#aa324e");
			});
			//依据type设置对应的行内css，
			map.get(this.type)();
			if (style) {
				//渲染至虚拟dom
				this.$refs["btn"].style = style;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.main {
		//边框和伪类背景色
		--color: #aa324e;
		//行高
		--size: 2em;
		//上下间距
		--padding_: 0.1em;
		//伪类缩放
		--scale: 0.6;
		//外边距
		--margin: 0.5em 0.4em;
		//伪类标签文字
		--name: "默认文字";
		//正常文字大小，覆盖项目的14px文字大小
		font-size: 16px;
		user-select: none;
		transition: all 0.2s ease-in-out;
		margin: var(--margin);
		color: var(--color);
		cursor: pointer;
		border-radius: 5px;
		position: relative;
		border: 1px solid var(--color);
		display: inline-block;
		padding: var(--padding_) var(--size);
		line-height: var(--size);
		white-space: nowrap;
		overflow: hidden;
		&::after {
			content: var(--name);
			position: absolute;
			color: #fff;
			// transform-origin: center center;
			transform: rotate(45deg) scale(0.6);
			z-index: 99;
			top: -1.2em;
			right: -1em;
			height: calc((var(--size) + var(--padding_) * 2) / var(--scale));
			line-height: calc((var(--size) + var(--padding_) * 2) / var(--scale));
			display: block;
			width: calc(var(--size) / var(--scale));
			text-align: center;
		}
		&::before {
			content: "";
			right: 0;
			position: absolute;
			top: 0;
			width: 0;
			height: 0;
			font-size: inherit;
			border-style: solid;
			border-color: var(--color);
			border-width: calc((var(--size) + var(--padding_) * 2) / 2);
			border-left-color: transparent;
			border-bottom-color: transparent;
		}
		&:hover {
			//阴影
			box-shadow: 0px 0px 4px 0px var(--color);
		}
	}
	//被选中时的css
	.active {
		background-color: var(--color);
		color: #fff;
	}
</style>