如何对bindMenu菜单进行自定义样式
====================

#### 问题现象

如何自定义bindMenu菜单的背景颜色并显示箭头？

#### 背景知识

[bindMenu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#bindmenu)为组件绑定弹出式菜单，菜单项以垂直列表形式显示，支持长按、点击或鼠标右键触发。

#### 解决方案

bindMenu方法入参数中[MenuOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#menuoptions10)继承[ContextMenuOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#contextmenuoptions10)。可通过属性[backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundcolor)和[backgroundBlurStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundblurstyle9)组合设置菜单背景颜色，ContextMenuOptions中的enableArrow属性设置是否显示箭头。

代码示例如下：

@Entry
@Component
struct MenuIndex {
  @Builder
  MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Column() {
        Column() {
          Row() {
            Image($r('sys.media.ohos\_ic\_public\_camera'))
              .width(20)
              .height(20)
              .margin({ right: 4 });
            Text('相机')
              .fontSize(14)
              .fontColor('#44474B');
          }
          .height(28)
          .padding({ left: 8, right: 8 })
          .onClick(() \=\> {
          });

          Row() {
            Image($r('sys.media.ohos\_ic\_public\_albums'))
              .width(20)
              .height(20)
              .margin({ right: 4 });
            Text('相册')
              .fontSize(14)
              .fontColor('#44474B');
          }
          .height(28)
          .padding({ left: 8, right: 8 })
          .onClick(() \=\> {
          });
        };
      }
      .width('30%');
    };
  }

  build() {
    Column() {
      Text('click for menu')
        .fontSize(20)
        .margin({ top: 20 })
        .bindMenu(this.MenuBuilder, {
          enableArrow: true, _// 是否显示箭头_
          placement: Placement.Bottom, _// 菜单组件优先显示的位置，当前位置显示不下时，会自动调整位置_
          backgroundColor: '#F1F3F5', _// 菜单背板颜色_
          backgroundBlurStyle: BlurStyle.NONE, _// 菜单背板模糊材质_
          borderRadius: 10 _// 菜单边框圆角半径_
        });
    }
    .height('100%')
    .width('100%')
    .padding({ top: 200 })
    .backgroundColor('#f0f0f0');
  }
}