优化
This commit is contained in:
49
uni_modules/yinrh-menu-popup/readme.md
Normal file
49
uni_modules/yinrh-menu-popup/readme.md
Normal file
@@ -0,0 +1,49 @@
|
||||
## 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
|
||||
Reference in New Issue
Block a user