常用方法——8.ant 气泡卡片Popover的样式修改 （vue3）

• 因为Popover的样式不在app的div里面，所以当我们使用deep穿透的时候是不管用的，一般这种情况可以在全局样式中修改；但是大多数时候，大型项目中不可以私自修改全局样式，这种情况怎么办呢？

下面我们来解决这个问题：

<template>
  <a-popover v-model:visible="visible" title="Title" trigger="click" overlay-class-name="pops">
    <template #content>
      <a @click="hide">Close</a>
    </template>
    <a-button type="primary">Click me</a-button>
  </a-popover>
</template>

<script lang="ts">
import {
      
       defineComponent, ref } from 'vue';
export default defineComponent({
      
      
  setup() {
      
      
    const visible = ref<boolean>(false);

    const hide = () => {
      
      
      visible.value = false;
    };

    return {
      
      
      visible,
      hide,
    };
  },
});
</script>

<style scoped  lang="less">
.pops {
      
      
  // 在这里面写样式就可以修改了
}
</style>