a-popover的使用

a-popover的使用

<template>
  <div id="popoverUsing">

    <a-popover
      autoAdjustOverflow
      overlayClassName="myPopClass"
      v-model="visible"
      trigger="click"
      placement="bottomLeft"
      @visibleChange="afterCloseDo"
    >

      <!-- 触发popover的元素 -->
      <div class="openPop"></div>

      <!-- 弹框内容区域 -->
      <template slot="content">
        <section>
          <p>Content</p>
          <p>Content</p>
        </section>
        <div>
          <a-button type="primary" style="margin-right:10px" @click="sure"
            >确然</a-button
          >
          <a-button type="primary" @click="cancel">取消</a-button>
        </div>
      </template>

    </a-popover>

  </div>
</template>

<script>

export default {

  data() {
    return {
      visible: false
    }
  },

  methods: {
    sure() {
      console.log('确认')
      this.visible = false
    },

    cancel() {
      console.log('取消')
      this.visible = false
    },

    afterCloseDo() {
      console.log('隐藏后的回调')
    }
  }
}

</script>
<style lang="less" scoped>
.openPop {
  width: 160px;
  height: 24px;
  border: 1px solid green;
}
</style>

<style lang="less">
#popoverUsing{
 .myPopClass {
   width: 200px;
   padding-top: 2px;
   .ant-popover-arrow {
     display: none !important;
   }
   .ant-popover-inner-content {
     section {
       background-color: #ccc;
     }
   }
 }
}
</style>

overlayClassName:普通的class起名对他没有用，需要使用overlayClassName来给他添加类名

加了scoped对他的样式做修改也没有用,修改的使用需要注意，不要造成全局样式污染

参数	作用	类型	默认值
arrowPointAtCenter	箭头是否对准目标元素中心	布尔值	false
autoAdjustOverflow	气泡被遮挡时自动调整位置	布尔值	true
defaultVisible	默认是否显隐	布尔值	false
placement	气泡框位置	可选，方位词	top
visible(v-model)	控制显示与隐藏	布尔值	false
title	可以直接在a-popover中，也可以在slot="title"中	可选，字符串	无