antd修改常用弹窗样式

Tooltip、Popconfirm、Popover

对于新手来说给你一些公用的api,写上类型都是不太懂，迷迷糊糊的跟着学。有前辈指点还好，但是很多人还是没得，更何况大佬也是很忙的，不一定会指导你，此篇文章为了解救那些不懂的人吧。

公用api

话不多说，直接上代码，每种类型的写法我都选一种展示在下面

<template>
  <div :style="wrapStyles">
    <a-tooltip placement="left" title="Prompt Text" :get-popup-container="getPopupContainer"  :mouseLeaveDelay="5" overlayClassName="join" :overlayStyle="{        'width': '313px',        'height': '231px',   'box-shadow':' 0px 2px 4px 2px rgba(0, 0, 0, 0.06)',    'border-radius': '4px',        }">
      <a-button>Adjust automatically / 自动调整</a-button>
    </a-tooltip>
    <br />
    <a-tooltip
      style="marginTop: 10px"
      placement="left"
      title="Prompt Text"
      :get-popup-container="getPopupContainer"
      :auto-adjust-overflow="false"
    >
      <a-button>Ingore / 不处理</a-button>
    </a-tooltip>
  </div>
</template>
<script>
const wrapStyles = {
  overflow: 'hidden',
  position: 'relative',
  padding: '24px',
  border: '1px solid #e9e9e9',
};
export default {
  data() {
    return {
      wrapStyles,
    };
  },
  methods: {
    getPopupContainer(trigger) {
      return trigger.parentElement;
    },
  },
};
</script>

第二种css写法

友情提示：以上案例只做样式类型写法来教学，全复制可能会引起样式冲突不太美观