ant design vue:tooltip组件color设置失效的解决方案

萌新之路

已于 2023-01-06 13:56:01 修改

阅读量394

点赞数

分类专栏： antd-Vue 文章标签： vue.js 前端 antd-vue

于 2023-01-06 13:54:15 首次发布

原文链接：https://blog.csdn.net/lilycheng1986/article/details/124125301

版权

antd-Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue应用中创建一个按钮，当鼠标悬停时显示提示信息，点击按钮触发Excel导出。方法getPopupContainer用于设置提示框的位置，而scoped样式定制了提示框的外观。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
	<div  style="width: 200px; margin:100px auto;">
		<a-tooltip title="导出excel" :getPopupContainer="getPopupContainer">
			 <a-button type="primary">导出excel</a-button>
		</a-tooltip>
	</div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
		getPopupContainer(triggerNode){
			return triggerNode.parentNode;
		}
    }
  }
</script>
<style scoped>
	/* 提示框 */
    /deep/ .ant-tooltip-inner {
        background-color:red;
     }
	 /* 小箭头 */
	 /deep/ .ant-tooltip-arrow::before {
		background-color:red; 
	 }
</style>