wardrobe/tm-vuetify/components/tm-helpTips/tm-helpTips.vue

<template>
	<view class="tm-helpTips relative d-inline-block">
		<view @click.stop="toogle">
			<slot></slot>
		</view>
		<view v-show="showMenu" class="tm-menu-block absolute" :class="[direction,mentDirection]">
			<view v-if="direction==='bottom'" class=" px-32" :class="[tipFangx]">
				<text class="iconfont icon-sort-up  " style="font-size: 46upx;line-height: 0.5;margin-bottom: -4upx;"
					:class="[!black_tmeme?`text-${color_tmeme} text`:'',black_tmeme?'text-grey-darken-3':'']"></text>
			</view>
			<view :class="[color_tmeme,`shadow-${color_tmeme}-1`,black_tmeme?'bk':'']" class="  pa-16 round-2 text-align-left flex-top-start" >
				<view>
					<text class="text-size-s">{{label}}</text>
				</view>
				<view @click.stop="toogle" class=" text-align-center flex-shrink pl-32">
					<tm-icons :black="black_tmeme" :size="24" :color="iconColor" dense name="icon-times"></tm-icons>
				</view>
				
			</view>

			<view v-if="direction==='top'" class=" px-32" :class="[tipFangx]">
				<text class="iconfont icon-sort-down  " style="font-size: 46upx;line-height: 0.5;margin-top: -4upx;"
					:class="[!black_tmeme?`text-${color_tmeme} text`:'',black_tmeme?'text-grey-darken-3':'']"></text>
			</view>

		</view>
		<tm-maskFlow :blur='false' v-model="showMenu" bgColor='none'></tm-maskFlow>
	</view>
</template>

<script>
	/**
	 * 弹出菜单
	 * @property {Boolean} black = [true|false] 默认:false,暗黑模式。
	 * @property {Boolean} show = [true|false] 默认:false,始终显示菜单。
	 * @property {String} icon-color = [] 默认:white,关闭图标颜色主题名称
	 * @property {String} color = [] 默认:primary,主题背景色
	 * @property {String} tip-direction = [left | center | right] 默认:center,指示三角形的方向
	 * @property {String} direction = [top | bottom] 默认:bottom,弹出方向，top | bottom
	 * @property {String} ment-direction = [left | center | right] 默认:center,弹出在父组件上的对齐方式，默认居中。可选left,right,center
	 * @property {String} label = [] 默认:[],需要显示的内容
	 * @property {String} rang-key = [] 默认:title,菜单列表数组对象时，需要提供key
	 * @property {Function} change 点击列表项目时触发，返回：{index:index,value:item}
	 * @example tm-helpTips direction="top"  label="每点击一次增加一个积分哦,你知道了吗？">
				<tm-icons name="icon-question-circle"></tm-icons>
			</tm-helpTips>
	 * 
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmMaskFlow from "@/tm-vuetify/components/tm-maskFlow/tm-maskFlow.vue"
	export default {
		components:{tmIcons,tmMaskFlow},
		name: "tm-helpTips",
		props: {
			black: {
				type:Boolean | String,
				default:null
			},
			// 三角形的方向。left | center | right
			tipDirection: {
				type: String,
				default: 'center'
			},
			// 始终显示菜单
			show: {
				type: Boolean,
				default: false
			},
			// 关闭图标颜色主题名称
			iconColor: {
				type: String,
				default: 'white'
			},
			// 主题色
			color: {
				type: String,
				default: 'primary'
			},
			// 弹出方向，top | bottom
			direction: {
				type: String,
				default: 'bottom'
			},
			// 弹出在父组件上的对齐方式，默认居中。可选left,right,center
			mentDirection: {
				type: String,
				default: 'center'
			},
			label: {
				type: String,
				default: () => {
					return "";
				}
			},
			// 如果list提供的是对象数组，需要提供对象的key。如果是string对象，无需提供。默认title
			rangKey: {
				type: String,
				default: 'title'
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			tipFangx: function() {
				if (this.tipDirection === 'left') return 'flex-start ';
				if (this.tipDirection === 'center') return 'flex-center';
				if (this.tipDirection === 'right') return 'flex-end ';
			}
		},
		data() {
			return {
				showMenu: false,
			};
		},
		mounted() {
			this.showMenu = this.show;
		},
		methods: {
			toogle() {
				if (!this.label || this.label.length == 0) return;
				this.showMenu = !this.showMenu;
				this.$emit("update:show",this.showMenu)
			},
			open() {
				if (!this.label || this.label.length == 0) return;
				this.showMenu = true;
				this.$emit("update:show",true)
			},
			off() {
				if (!this.label || this.label.length == 0) return;
				this.showMenu = false;
				this.$emit("update:show",false)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tm-helpTips {
		position: relative;
		text-align: center;
		.tm-menu-block {
			z-index: 502;
			width: 320upx;
			

			&.bottom {
				top: 100%;
				bottom: inherit;
				animation: roteScale 0.3s ease-in-out;
			}

			&.top {
				top: inherit;
				bottom: 100%;
				animation: roteScaleTop 0.3s ease-in-out;
			}

			&.center {
				left: calc(50% - 160upx);
			}

			&.left {
			
				left: 0upx;
			}

			&.right {
				right: 0upx;
				
			}
		}
	}
	
	
	@keyframes roteScale{
		0%{
			transform: scale(0.9) translateY(-20rpx);
			opacity: 0;
		}
		100%{
			transform: scale(1)  translateY(0rpx);
			opacity: 1;
		}
	}
	@keyframes roteScaleTop{
		0%{
			transform: scale(0.9) translateY(20rpx);
			opacity: 0;
		}
		100%{
			transform: scale(1)  translateY(0rpx);
			opacity: 1;
		}
	}
</style>