Popover 气泡框

常用于弹出菜单的显示。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
arrowSize	Number,String	12px	箭头大小	All
offset	Number,String	0	距离目标偏移量	All
borderColor	String	null	边框颜色	All
radius	Number,String	null	圆角	All
maskBgColor	String	rgba(0,0,0,0)	弹出层背景	All
animation	Boolean,String,Number	true	开启动画	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

插槽

插槽名	说明
default

方法

方法名	说明
open(triggerRectInfo)	打开气泡框 triggerRectInfo触发容器的绘制信息，必须传递

示例

<template>
  <view class="c-p-15 c-f-left-center">
    <c-btn id="openBtn" ref="openBtn" type="打开" width="80" @click="openMenu" />
  </view>
  <c-popover ref="popover">
    <c-btn type="none" text="扫一扫" height="44" width="120" size="lg" />
    <c-divider />
    <c-btn type="none" text="新增记录" height="44" width="120" size="lg" />
  </c-popover>
</template>
<script setup>
  import {ref, getCurrentInstance} from "vue"
  import {useQueryRect} from "@/uni_modules/cook-uni/mixins/queryElRectMixin";
  const instance = getCurrentInstance();
  const queryRect = useQueryRect(instance);
  const popover = ref(null)
  
  function openMenu(){
    queryRect('#openBtn').then(btnRectInfo=>{
      popover.value.open(btnRectInfo)
    })
  }
</script>