RightMenu-DEMO

---

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
value	Boolean	No	false	显示/隐藏RightMenu, 一般不直接使用
rightMenuWidth	Number	No	200	RightMenu宽度
background	String	No	N/A	RightMenu背景色
fullExpandAnimation	Boolean	No	false	是否使用全展开动画
theme	String	No	system	主题样式, 包含light, dark, system, custom几种样式

Events

---

事件名(Name)	参数类型(args)	说明(statement)
update-height	Number	RightMenu高度变化时触发

Slot

---

1. Default

每一项通过<span></span>标签包装, 使其展示默认的样式, 分割线使用<hr>标签.

<fv-RightMenu>
    <span>Item1</span>
    <hr>
    <span>Item2</span>
</fv-RightMenu>

Appendix

---

1. 触发RightMenu显示

通过RightMenu对象的rightClick函数可以触发显示菜单, 其中函数包含两个参数

• event: 一般为鼠标或触摸事件, RightMenu将根据event.target来获取显示的位置.
• target: 指定了RightMenu受限的区域, 为一个HTMLElement用于限制RightMenu出现边界范围.

以下是两种触发函数, 其中Click事件为左键触发样例, 需要在被点击对象上执行阻止冒泡事件, rightClick事件为右键触发样例, 需要阻止默认事件.

Click($event, el) {
    $event.stopPropagation();
    this.$refs.r1.rightClick($event, el);
},
rightClick($event, el) {
    $event.preventDefault();
    this.$refs.r1.rightClick($event, el);
}