tooltip_vue2可以横竖切换添加图标

renlmingj

2024 年 06 月 04 日

173 次浏览

暂无评论

3492字数

uniapp_v2

##### 一、在 components 中新建 toolTip 文件夹并新建 toolTip.vue文件

###### 1、写入 html 代码

```html
<template>
	<view class="tooltip">
		<slot></slot>
		<view v-if="content || $slots.content" class="tooltip-popup" :style="initPosition">
			<view class="popup-img" :style="initImg">
				<image v-if="img" :src="img" mode="aspectFill" class="img"></image>
				{{content}}
			</view>
		</view>
	</view>
</template>
```

###### 2、写入 css 代码

```scss
.tooltip {
	position: relative;

.tooltip-popup {
		position: absolute;
		display: none;
		background-color: #666;
		border-radius: 10px;
		color: #fff;
		font-size: 12px;
		text-align: justify;
		line-height: 16px;
		padding: 10px;
		z-index: 1;
		
		.popup-img {
			
			.img {
				max-width: 30rpx;
				max-height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

&:hover .tooltip-popup {
		display: block;
	}
}
```

###### 3、写入 js 代码

```js
export default {
	name: "toolTip",
	data() {
		return {

};
	},
	props: {
		content: {
			type: String,
			default: ''
		},

position: {
			type: String,
			default: 'top' // top --- 上  bottom --- 下  left --- 左  right --- 右
		},
		
		direction: {
			type: String,
			default: 'cross' // cross --- 横着   vertical --- 竖着
		},
		
		img: {
			type: String,
			default: '' // 图标 --- 可以为 base64 或者 线上链接 30rpx 以内
		},
	},
	methods: {},
	computed: {
		initPosition() {
			let style = {};
			if(this.position === 'left' && this.direction === 'cross') {
				style = {
					top: '50%',
					transform: 'translateY(-50%)',
					right: '100%',
					marginRight: '15rpx',
					width: '100%',
				}
			} else if(this.position === 'left' && this.direction === 'vertical') {
				style = {
					top: '50%',
					transform: 'translateY(-50%)',
					right: '100%',
					marginRight: '15rpx',
				}
			} else if(this.position === 'right' && this.direction === 'cross') {
				style = {
					top: '50%',
					transform: 'translateY(-50%)',
					left: '100%',
					marginLeft: '15rpx',
					width: '100%',
				}
			} else if(this.position === 'right' && this.direction === 'vertical') {
				style = {
					top: '50%',
					transform: 'translateY(-50%)',
					left: '100%',
					marginLeft: '15rpx',
				}
			} else if(this.position === 'top' && this.direction === 'cross') {
				style = {
					bottom: '100%',
					transform: 'translateX(-50%)',
					left: '50%',
					marginBottom: '15rpx',
					width: '100%',
				}
			} else if(this.position === 'top' && this.direction === 'vertical') {
				style = {
					bottom: '100%',
					transform: 'translateX(-50%)',
					left: '50%',
					marginBottom: '15rpx',
				}
			} else if(this.position === 'bottom' && this.direction === 'cross') {
				style = {
					top: '100%',
					transform: 'translateX(-50%)',
					left: '50%',
					marginTop: '15rpx',
					width: '100%',
				}
			} else if(this.position === 'bottom' && this.direction === 'vertical') {
				style = {
					top: '100%',
					transform: 'translateX(-50%)',
					left: '50%',
					marginTop: '15rpx',
				}
			}
			return style;
		},
		initImg() {
			let style = {};
			if(this.direction === 'cross') {
				style = {
					display: 'flex',
					alignItems: 'center',
				}
			} else if(this.direction === 'vertical') {
				style = {};
			}
			return style;
		}
	},
}
```

##### 二、父组件调用

###### 1、html 代码

```html
<tool-tip content="示例文字" position="bottom" direction="cross" img="https://www.baidu.com/favicon.ico">
	<view>示例文字展示</view>
</tool-tip>
```

###### 2、js代码

```js
import toolTip from '@/components/toolTip/toolTip.vue';
export default {
	components: { toolTip },
	data() {
		return {
            
		}
	},
	methods: {

}
}
```

##### 三、效果展示
![效果图][1]

[1]: https://www.renlmingj.cn/usr/uploads/2024/06/1532046599.png

最后修改：2024 年 06 月 13 日