49 lines
1.7 KiB
Markdown
49 lines
1.7 KiB
Markdown
|
## yinrh-menu-popup
|
|||
|
|
仿IOS长按的悬浮菜单
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
### 在``template``中直接使用
|
|||
|
|
```
|
|||
|
|
<yinrh-menu-popup v-model="value" :pop-data="menu" dynamic :x="x" :y="y" direction="row" theme="dark"
|
|||
|
|
:placement="place" @tapPopup="tapPopup" />
|
|||
|
|
```
|
|||
|
|
### 在``template``中，需要出现菜单的 view 上添加 id 和 click 事件
|
|||
|
|
```
|
|||
|
|
<text id="popup-menu" @longTap="longTap">长按出现悬浮菜单</text>
|
|||
|
|
```
|
|||
|
|
### 在``script``中，添加 longTap 和 tapPopup 方法
|
|||
|
|
```
|
|||
|
|
longTap() {
|
|||
|
|
let dom = uni.createSelectorQuery().in(this);
|
|||
|
|
// popup-menu 为上面添加的 id 值
|
|||
|
|
dom.select('#popup-menu').boundingClientRect();
|
|||
|
|
dom.exec(data => {
|
|||
|
|
// 配置 place、value、x、y 的值
|
|||
|
|
let isTop = data[0].top >= 60,
|
|||
|
|
place = isTop ? 'bottom' : 'top';
|
|||
|
|
this.place = place + '-center';
|
|||
|
|
this.value = !this.value;
|
|||
|
|
this.x = data[0]['width'] / 2;
|
|||
|
|
this.y = data[0][isTop ? 'top' : 'bottom'];
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
tapPopup(e) {
|
|||
|
|
console.log(e);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 参数说明
|
|||
|
|
+ maskBg：遮罩背景颜色，默认 rgba(0,0,0,0)，不透明
|
|||
|
|
+ value：显示或隐藏菜单，true-显示，false-隐藏，默认 true
|
|||
|
|
+ x：长按组件的中心值，单位px
|
|||
|
|
+ y：长按组件的 top 或 bootom 值，单位px
|
|||
|
|
+ theme：悬浮菜单的样式，支持 light 和 dark，默认 light
|
|||
|
|
+ gap：
|
|||
|
|
+ triangle：悬浮菜单的箭头，true-显示，false-隐藏，默认 true
|
|||
|
|
+ dynamic：悬浮菜单的显示方式，true-动态，false-静态，默认 true
|
|||
|
|
+ popData：悬浮菜单的列表
|
|||
|
|
+ direction：悬浮菜单排列方向，支持 column 和 row，默认 column
|
|||
|
|
+ placement：悬浮菜单的箭头相对于菜单的位置 top-start、top-end、bottom-start、bottom-end、top-center、bottom-center，默认 top-start
|