Bootstrap

常用方法——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>


;