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

仙女不下凡

已于 2023-04-07 16:54:40 修改

阅读量2.4k

点赞数 3

分类专栏：常用的js方法调整vue样式文章标签： vue.js javascript 前端

于 2023-01-31 10:47:55 首次发布

本文链接：https://blog.csdn.net/weixin_55181759/article/details/128813460

版权

常用的js方法同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

调整vue样式

5 篇文章 0 订阅

订阅专栏

因为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>