更新记录
1.0.2(2024-06-12)
下载此版本
1、增加内部图标插槽。
2、增加遮罩控制字段。
1.0.1(2024-06-11)
下载此版本
调整部分样式
1.0.0(2024-06-11)
下载此版本
1、基于 uview2,增加遮罩。
2、替换原有图标库,使用uview2图标。
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
mc-bubble气泡组件使用
1、搭配组件:
也就用到点图标,后续会改掉
2、使用示例
<mc-bubble type="list" :selectData="formMenus" position="right" topOpsotion="right"
opacity="0.3" bgcRgba="#fff" color="#333" @selectFun="TapPopup">
// 被包裹展示的内容 —— 默认插槽
<u-icon name="more-dot-fill" color="#fff" class="moremenu"></u-icon>
// 自定义内部图标
<!-- <template #itemIcon="{element,index}">
<u-icon class="image" :name="element.icon" size="20" color="#bfbfbf"></u-icon>
</template> -->
</mc-bubble>
3、Props
参数 |
类型 |
说明 |
默认值 |
type |
String |
气泡显示类型:list 为悬浮气泡选择器,bubble 为气泡文本展示 |
list |
selectData |
Array |
Item数据内容,type为list 时传入 |
[] |
position |
String |
type为list时可用值left center right ,为bubble时可用值top bottom left right |
选择器默认center 气泡文本默认right |
topOpsotion |
String |
控制箭头所处位置,可选项 left center right |
center |
bgcRgba |
String |
气泡背景色 |
rgba(0, 0, 0, 0.8) |
color |
String |
文本颜色 |
#FFF |
showOverlay |
Boolean |
是否展示遮罩 |
true |
opacity |
String |
遮罩透明度 |
0.3 |
4、Event
事件名 |
说明 |
返回值 |
selectFun |
气泡选择器列表点击事件 |
点击项数据 |
5、slot
名称 |
说明 |
default |
包裹展示的插槽内容 |
itemIcon |
气泡列表内左侧图标插槽 |