wxc-popover

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 同时设置了遮罩层，通过点击遮罩层的任一位置，进行退出。

规则

  • 常用于拓展气泡按钮组
  • 在指定坐标位置弹出气泡，点击遮罩层进行关闭
  • 支持上、下、左、右四个方向
  • 可自定义气泡和箭头具体位置

Demo

wxc-popover 气泡菜单 - 图1 wxc-popover 气泡菜单 - 图2

使用方法

  1. <template>
    2.   <div class="wxc-demo">
    3.     <wxc-minibar @wxcMinibarRightButtonClicked="minibarRightButtonClick"
    4.                  right-text="..."></wxc-minibar>
    5.     <wxc-popover ref="wxc-popover"
    6.                  :buttons="btns"
    7.                  :position="popoverPosition"
    8.                  :arrowPosition="popoverArrowPosition"
    9.                  @wxcPopoverButtonClicked="popoverButtonClicked"></wxc-popover>
    10.   </div>
    11. </template>
    12.   13. <script>
    14.   import { WxcMinibar, WxcPopover} from 'weex-ui';
    15.   16.   const modal = weex.requireModule('modal');
    17.   18.   // https://github.com/alibaba/weex-ui/blob/master/example/popover/type.js
    19.   import { RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from './type';
    20.   21.   export default {
    22.     components: { WxcMinibar, WxcPopover },
    23.     data: () => ({
    24.       leftButton: RETURN_ICON,
    25.       btns:[
    26.         {
    27.          icon: SCAN_ICON,
    28.          text:'Scan',
    29.          key:'key-scan'
    30.         },
    31.         {
    32.           icon: QRCODE_ICON,
    33.           text:'My Qrcode',
    34.           key:'key-qrcode'
    35.         },
    36.         {
    37.           icon: QUESTION_ICON,
    38.           text:'Help',
    39.           key:'key-help'
    40.         },
    41.       ],
    42.       popoverPosition:{x:-14,y:380},
    43.       popoverArrowPosition:{pos:'top',x:-15}
    44.     }),
    45.     methods: {
    46.       minibarRightButtonClick () {
    47.         this.$refs['wxc-popover'].wxcPopoverShow();
    48.       },
    49.       popoverButtonClicked (obj) {
    50.         modal.toast({ 'message': `key:${obj.key}, index:${obj.index}`, 'duration': 1 });
    51.       }
    52.     }
    53.   };
    54. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
buttons Array Y [] 气泡按钮数据列表，如 [{icon: 'http://cdn.zwwill.com/weexui/icon/scan.png',text:'Help',key:'key-help'}]
position Object Y {x:0,y:0} 气泡位置，x>0 为左边距，x<0 为右边距，y同理
arrowPosition Object Y {pos:'top',x:0,y:0} 气泡箭头位置，pos 为'top,bottom,left,right'，配合x，y定位箭头位置
coverColor String N rgba(0,0,0,0.4) 遮罩层颜色，如 rgba(0,0,0,0.4)，rgb(0,0,0)，#000
hasAnimation Boolean N true 是否开启展开动画
textStyle Object N {} 文字样式覆盖
### 调用显示
1. 在wxc-popover上面绑定ref，然后调用this.$refs['wxc-popover'].hide();即可显示Click to copy

事件回调

  1. // `@wxcPopoverButtonClicked` 返回一个对象，标志点击按钮的 `key` 和 `index`Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-popover/