RightMenu-DEMO

---

属性

---

属性	类型	必填	默认值	说明
modelValue	boolean	否	false	显示/隐藏RightMenu，一般不直接使用。
rightMenuWidth	number	否	200	RightMenu宽度。
background	string	否	''	RightMenu背景色。
fullExpandAnimation	boolean	否	false	是否使用全展开动画。
theme	string	否	'global'	主题样式。支持 global、light、dark、system 和 custom。
disabled	boolean	否	false	参见组件的 disabled 选项。
lang	string	否	"global"	参见组件的 lang 选项。

事件

---

事件名	参数	说明
update-height	Number	RightMenu高度变化时触发。

插槽

---

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);
}