legacy.pda.deploy-review/components/xmh-ip-input/bubble-tip.vue

<template>
	<view>
		<view class="speech-bubble" :class="direction">
			<text>{{msg}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bubble-tip",
		props: {
			msg: {
				type: String
			}
		},
		data() {
			return {
				direction: "speech-bubble-bottom"
			};
		}
	}
</script>

<style scoped>
	.speech-bubble {
		position: relative;
		background-color: #292929;
		width: max-content;
		min-width: 100rpx;
		/* 垂直居中 */
		color: white;
		text-align: center;
		border-radius: 10px;
		padding: 10rpx 10rpx 10rpx 10rpx;
	}

	.speech-bubble:after {
		content: '';
		position: absolute;

		width: 0;
		height: 0;

		border: 15rpx solid;
	}

	.speech-bubble-bottom:after {
		border-top-color: #292929;
		top: 100%;
		left: 50%;
		margin-left: -15rpx;
	}
</style>